@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,600;1,9..40,600&family=Open+Sans:ital,wght@0,300;1,300&display=swap');

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

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: black;
    color: white;
}

h1, h2, h3 {
    font-family: Arial, sans-serif;
}

p {
    font-family: "Open Sans", sans-serif; 
}

nav a {
    font-family: "DM Sans", sans-serif;
    color: white;
    text-decoration: underline;
    padding: 2em;
}

nav ul {
    font-family: "DM Sans", sans-serif;
    color: white;
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/*header, nav, main, aside, footer {
    border: 1px white solid;
}
*/
.container {
    margin: 0 auto;
    display: grid;
    width: 100%;
    height: 100vh;
    grid-template-columns:
        2fr         0.5fr;
    grid-template-rows: 5rem 20rem 30rem 2rem;
    grid-template-areas: 
        "header1    nav1"
        "main1      aside1"
        "main1      aside2"
        "footer1    footer1";
}

header {
    grid-area: header1;
    display: flex;
    align-items: center;
    
}

nav {
    grid-area: nav1;
    display: flex;
    align-items: center;
    justify-content: center;
}

main {
    grid-area: main1;
    max-height: 100%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.99)), url(img/deadmau5-live.webp);
    background-size: cover;
}

#aside1 {
    grid-area: aside1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#aside1 p {
    padding: 0.5em;
}

#aside2 {
    grid-area: aside2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

footer {
    grid-area: footer1;
}

.release-img {
    height: 100px;
    width: 100px;
}

.main-text-container {
    padding: 2em;
    font-size: 1.2em;
}

.main-text-container h2 {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
}

.img-text-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2em;
}

.img-text-container h3 {
    padding: 1em;
}

h1 {
    padding-left: 0.5em;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2em;
}

@media screen and (max-width: 920px) {
    .main-text-container {
        padding: 2em;
        font-size: 1em;
    }
}

@media screen and (max-width: 660px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "header1"
            "nav1"
            "main1"
            "aside1"
            "aside2"
            "footer1";

    }

    /*nav ul {
        flex-direction: column;
    }
    */

    header {
        justify-content: center;
        padding: 1em;
    }

    nav ul {
        flex-direction: column;
    }

    nav li {
        padding: 1em;
    }

    .main-text-container {
        padding: 2em;
        font-size: 1em;
        text-align: center;
    }
    
    #aside1 {
        padding: 3em;
    }

    nav ul li a {
        display: block;
        padding: 10px 20vw;
        margin: 5px; 
        border: 1px white solid;
        background: black;
    }
}