/* Import Styles */
@import "_header.css";
@import "_mainHome.css";
@import "_archives.css";
@import "_artworkPage.css";
@import "_about.css";
@import "_contact.css";
@import "_footer.css";

/* Globals */
*, *::before, *::after, html {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

html, body, .overflow-x {
    overflow-x: hidden;
}

body {
    position: relative;
    overflow-x: hidden;  
    font-family:"Roboto", sans-serif;
    font-weight: 400;
    color:#000;
    letter-spacing: 0.125rem;
    min-height: 100vh;
    padding: 0 2.5rem 4rem 2.5rem;
}



/* Media Queries */
@media screen and (max-width: 48rem) { /* 768px */
    .hide-for-mobile {
        display: none;
    }
    
    body {
        padding: 0 1.5rem 4rem 1.5rem;
    }

    .header {
        align-items: flex-start;
    }
    
    .header__burgernav a {
        color:white;
        margin-bottom: 4rem;
    }
    .header__burgernav a:first-child {
        margin-top: 4rem;
    }

    #playbtn{
        top:50%;
    }
}

@media screen and (min-width: 48rem) { /* 768px */
    .hide-for-desktop{
        display: none;
    }

    .header__burgernav{
        display: none;
    }
}

@media screen and (max-width: 58.75rem) { /* 940px */
    .item {
        width: calc(50% - 2rem);
    }
}

@media screen and (min-width: 64rem) { /* 1024px */
    .artwork, .about, .contact, .archives{
        font-size: 116.6667%;
    }
}
 
@media screen and (max-width: 40rem ) { /* 640px */
    .item {
        width: calc(100% - 2rem);
    }
        
    .footer img {
        width: 1.5625rem;
        margin-left: 0.75rem;
    }

    .contact {
        text-align:center
    }
}