/*css reset (no random margins)*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin-top: 4.375rem;
    font-family:'Times New Roman', Times, serif;
}


/*navigation bar*/

/*creates the bar itself*/
.navbar {
    background-color: #4A3941;  
    display: flex;
    align-items: center;
    position:fixed;
    width:100%;
    z-index: 1000;
    top: 0;
    left: 0;
}
/*puts the links together and to the right*/
.links {
    list-style-type: none;
    display: flex;
    gap: .625rem;
    margin-right: 1.875rem;
    margin-left: auto;
}
/*each link button*/
.links > li > a{
    text-decoration: none;
    color: white;
    display:flex;
    padding:.9375rem 2.5rem;
    transition: 0.3s;

}
/*changes links and logo color when hovered*/
.links a:hover,
.navbar .logo:hover {
    background-color:gray;
}
/*logo stuff*/

.logo{
    display:flex;
    margin-right: auto;
    margin-left: 1.875rem;
    color:white;
    align-items: center;
    text-decoration: none;
    gap: .5rem;

}
.navbar img{
    height: 2.5rem;
    width: auto;
}
/*media link dropdown menu*/
.media {
    position: relative;
}
.media-dropdown{
    position:absolute;
    top: 100%;
    left:0;
    z-index: 10000;
    background-color: #4A3941;
    list-style-type:none;
    min-width:7.5938rem;

}
.media-dropdown > li > a{
    text-decoration:none;
    color:white;
    padding:.9375rem 2.5rem;
    display:flex;
}
/*hides dropdown when not hovered*/
.media .media-dropdown {
    display: none;
}
/*shows dropdown when hovered*/
.media:hover .media-dropdown {
    display:block;
}

/*titles*/
h1 {
    display: flex;
    justify-content: center;
    font-size: 6.25rem;
}
/*index text*/
.index-explanation {
    display: flex;
  justify-content: center;
    margin-top: 3.75rem;
    gap: 3.75rem;
    flex-wrap: wrap;
}
.index-explanation .explanation-1 {
    display: flex;
    font-size: 1.125rem;
    width: 37.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
/*About Us text*/
.about-us-nathan p{
    display: flex;
    font-size: .9375rem;
    justify-content: center;
    width: 18.75rem;
    margin-top: 1.25rem;

}
.about-us-jason p{
    display: flex;
    font-size: .9375rem;
    justify-content: center;
    width: 18.75rem;
    margin-top: 1.25rem;

}
/*position of the text*/
.about-us-nathan{
    align-items:center;
}
.about-us-jason{
    align-items:center;
}
.about-us img {
    height:18.75rem;
    width: auto;
}
.about-us {
    display:flex;
    justify-content:center;
    gap: 1.875rem;
    margin-top: 3.75rem;
    flex-wrap:wrap;
}

.mendelssohn-duet {
    display:flex;
    justify-content: center;
    gap: 3.75rem;
    margin-top: 7.5rem;
}
.mendelssohn-duet h2{
    display:flex;
    align-items: center;

}
.tutorials-text {
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
}
.tutorials-textbox{
    display: flex;
    justify-content:center;
    margin-top: 3.75rem;
}
.the-clarinet-dropdown {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.875rem;
    margin-left: 18.75rem;
}
.the-clarinet-dropdown ul {

}
.sections {
    font-size: 2.5rem;
}