@import url('https://fonts.googleapis.com/css?family=Spicy+Rice|Noto+Sans|Permanent+Marker');

/*****            NAVBAR                          **********/

.header-bg {
    background-color: #ffe200;
}

.nav-style {
    height: 90px;
    /** same height as logo image **/
}

.nav-link-style {
    
    font-family: 'Spicy Rice', cursive;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: #ff0101;
    text-align: center;
}

.nav-link-style:hover {
    color: #ffe200;
    background-color: #ff0101;
}

.logo-link {
    display: flex;
    justify-content: center;
}

.monkees-logo {

    height: 50px;

}

/*****               END NAVBAR                       **********/

/*****            FOOTER                          **********/

.social-media-icon {
    margin: 20px;
    color: white;
    border-radius: 50%;
    width: 1.7em;
    height: 1.7em;
    line-height: 1.7em;
    text-align: center;
    border: 1px solid;
}

.social-media-icon:hover {

    border: 1px black solid;
}

.facebook-icon {
    background-color: #4267B2;
    border-color: #4267B2;
}

.twitter-icon {
    background-color: #00ACEE;
    border-color: #00ACEE;
}

.youtube-icon {
    background-color: #ED3833;
    border-color: #ED3833;
}

.footer-bg {
    background-color: #ffe200;
    min-height: 30px;
}

/*****               END FOOTER                       **********/

/*****            INDEX                          **********/

.main-background {

    background-image: linear-gradient( rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.8)), url("../images/monkees.jpg");
    background-color: darkgrey;
    height: auto;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 900px;
}

.home-header {
    font-family: 'Permanent Marker', cursive;
    text-transform: uppercase;
    font-weight: bolder;
    text-align: center;
    color: #ffe200;
    text-shadow: 2px 2px #1e1e1e;
    padding-top: 10rem;
    padding-bottom: 2rem;
    font-size: 3rem;
}

.youtube-video {
    max-width: 854px;
    max-height: 480px;
}

.iframe-parent {
    max-width: 854px;
}


/*****               END INDEX                       **********/

/*****            ABOUT                          **********/

.about-background {
    background-image: linear-gradient( rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.8)), url("../images/profile.jpg");
    background-color: darkgrey;
    height: auto;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 900px;
}

.about-header {
    color: #ffe200;
    font-family: 'Spicy Rice', cursive;
    padding-top: 2em;
    padding-bottom: 1em;

}

.member-header {
    color: #ffe200;
    font-family: 'Spicy Rice', cursive;
}

.about-text {
    color: #ffe200;
    font-family: 'Noto Sans', cursive;
    font-size: 1.3em;
    padding-bottom: 1.5em;
    line-height: 1.6;
}

.about-image {
    
    padding: 10px 0;
}

/*****               END ABOUT                       **********/

/*****            MUSIC                          **********/

.music-background {
    background-image: linear-gradient( rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.8)), url("../images/red-shirt.jpg");
    background-color: darkgrey;
    height: auto;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 900px;
}

.spotify-icon {
    color: #1db954;
    background-color: #191414;
    font-size: 2em;
    border-radius: 50%;
}

.spotify-text {
    display: inline;
    color: #ffe200;
    font-family: 'Noto Sans', cursive;
    font-size: 1.3rem;
}

.spotify-link:hover {
    text-decoration: none;
}

.music-title {

    color: #ffe200;
    font-family: 'Spicy Rice', cursive;

}

.track-spacing {
    padding-bottom: 1.5em;
}

/*****               END MUSIC                       **********/

/*****            CONTACT                          **********/

.contact-background {
    background-image: linear-gradient( rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.8)), url("../images/director.jpg");
    background-color: darkgrey;
    height: auto;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 900px;
}

.contact-social-text {
    color: #ffe200;
    font-family: 'Spicy Rice', cursive;
    font-size: 1.6em;
    line-height: 1.6;
    text-align: center;
}

.contact-social-text:hover {
    
    color: #ff0101;
    text-decoration: none;
}

.social-media-icon-contact {
    margin: 20px;
    color: white;
    border-radius: 50%;
    width: 1.7em;
    height: 1.7em;
    line-height: 1.7em;
    text-align: center;
}

.contact-list {
    display: block;
}

.contact-list-element {
    display: flex;
    justify-content: center;
}

.contact-form {
    padding-bottom: 5em;
}

.contact-label {
    color: #ffe200;
    font-family: 'Noto Sans', cursive;
    font-size: 1.4em;
}

.contact-button {
    background-color: #ff0101;
    border: 1px solid #ff0101;
    color: #ffe200;
    font-family: "Noto Sans", cursive;
    font-size: 1.2em;
}

.contact-button:hover {
    
    border: 1px solid #ffe200;
    color: #ffe200;
}

.contact-button:active {
    
    background-color: #ffe200;
    color: #ff0101;
    border: 1px solid #ff0101;
}

.contact-button:focus {
    
    box-shadow: none;
}

/*****               END CONTACT                       **********/

/*****            MEDIA QUERIES                          **********/

@media (max-width: 575px) {
    
    .nav-link-style {
        
        height: 45px;
        width: 50%;
    }
    
}

@media (min-width: 576px) {
    
    .nav-style {
        height: 50px;
    }
    
    .nav-link-style {
        font-size: 1.6rem;
        height: 50px;
    }
    
    .home-header {
        font-size: 3.5rem;
    }
    
    .contact-list {
        display: flex;
        justify-content: space-around;
    }
}

@media (min-width: 768px) {
   
    .nav-style {
        height: 60px;
    }
    
    .monkees-logo {
        height: 60px;
    }
    
    .nav-link-style {
        font-size: 1.8rem;
        height: 60px;
    }
    
    .home-header {
        font-size: 4rem;
    }
    
    .about-text {
        font-size: 1.4em;
    }
    
}

@media (min-width: 992px) {

    .contact-social-text {
        font-size: 1.8em;
    }
    
    .home-header {
        font-size: 4.5rem;
    }
}



/*****               END MEDIA QUERIES                       **********/