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



html,body{   
    height: 100%;
}



img, picture, video, canvas, svg{
    max-width: 100%;
    display: block;

}   



body{
    background-color: darkred;
    line-height: 1.5;
    background-image: url(Images/berserk-mozgusfight04.jpg);
    /* background-attachment: fixed;
    overscroll-behavior: none;
    overflow-x: hidden;
    background-repeat: no-repeat;
    background-size: 2072px 1180px */
}



#container{
    background-color: black;
    width: 90%;
    max-width: 1000px;
    padding: 3rem;
    margin:0 auto;
    margin-top: 50px;
    border-style:groove;
    border-radius: 0.5rem;
    border-width: 1rem;
    border-color: silver;
    position: relative;
    top: 40px;
}



#wrapper{
    width: 90%;
    max-width: 1000px;
    border-radius: 1.9rem;
    margin:0 auto;

}



#pageheader{
    min-height: 300px;
    background-color: rebeccapurple;
    padding: 1rem;
    border-radius: 1.5rem 1.5rem 0 0;
    grid-area:ph;
    color: black;
    text-shadow: 3px 3px 3px whitesmoke;
    background-image: url(Images/berserk-brandofsacrifice.jpeg);
    background-size:cover;
    background-repeat: no-repeat;
}



blockquote, #quote{
    color: white;
    font-size: 24px;
    text-shadow: 3px 3px 3px white;
    text-align: center;
}



#quote{
    display: block;
    font-size: 1.5rem;
}



#pagenav{
    grid-area:pn;
    background-color:white;
    padding: 1rem;
    text-shadow: 3px 3px 3px gray;
}



#media{
    grid-area:me;
    background-color: forestgreen;
    padding: 1rem;
    min-height: 250px;
    text-shadow: 3px 3px 3px whitesmoke;
}



#pagemain{
    grid-area:pm;
    color: #333;
    padding: 1rem;
    max-width: 1000px;
    height: 1000px;
    text-shadow: 3px 3px 3px gray;
    background-image: url(Images/berserk-mozgusandtheboys.jpeg);
    background-size: fill;
    background-position-y: -200px;

}


/* Quaters */


#Q1{
    grid-area:q1;
    background-color: lime;
    padding: 1rem;
    border: 1px solid silver;
    text-shadow: 3px 3px 3px whitesmoke;
    
}

#Q2{
    grid-area:q2;
    background-color: lime;
    padding: 1rem;
    border: 1px solid silver;
    text-shadow: 3px 3px 3px whitesmoke;

}

#Q3{
    grid-area:q3;
    background-color: lime;
    padding: 1rem;
    border: 1px solid silver;
    text-shadow: 3px 3px 3px whitesmoke;

}

#Q4{
    grid-area:q4;
    background-color: lime;
    padding: 1rem;
    border: 1px solid silver;
    text-shadow: 3px 3px 3px whitesmoke;

}



#pagefooter{
    grid-area:pf;
    background-color: blueviolet;
    padding: 1rem;
    text-shadow: 3px 3px 3px whitesmoke;

}

#subfooter{
    grid-area:sf;
    background-color: purple;
    padding: 1rem;
    min-width: 250px;
    border-radius: 0 0 1.5rem 1.5rem;
    text-shadow: 3px 3px 3px  whitesmoke;

}





/* Media Quaries */

/* 321px */
    @media screen and (min-width:321px){
        #pageheader{
            background-color: #6EFFF0;
        }
        #media{
            background-color: #FC9D3D;
        }
        body{
            background-color: #46008C;
        }
        #Q1, #Q2, #Q3, #Q4{
            background-color: #4F3309;
            color: white;
        }
        #pagefooter{
            background-color: #3C8876;
        }
        #subfooter{
            background-color: #50B69E;
        }
        #body{
            background-size: 321px;
            background-repeat: no-repeat;
        }
        }



    /* 480px */
    @media screen and (min-width:480px){
        body{
            background-color: #468C00;
        }

        #pageheader{
        background-color: #FF6E7C;
        }
        #media{
            background-color: #3D9DFC;
        }


        #Q1, #Q2, #Q3, #Q4{
            background-color: #09254F;
            color: white;
        }


        #pagefooter{
            background-color: #873B4D;
        }
        #subfooter{
            background-color: #B54E66;
        }
        }


    /* 768px */
    @media screen and (min-width:768px){
            body{
            background-color: #01478C;
        }

        #pageheader{
        background-color: #C5FF6E;
        }
        #media{
            background-color: #A86EFF;
        }

        #wrapper{
            display: grid;
                grid-template-areas: 
                "ph ph ph ph"
                "pn pn pn pn"
                "me me me me"
                "pm pm pm pm"
                "q1 q1 q2 q2"
                "q3 q3 q4 q4"
                "pf pf pf pf"
                "sf sf sf sf"
                ;
        }


        #Q1, #Q2, #Q3, #Q4{
            background-color: #4F662C;
            text-shadow: 1px 2px 3px white;
        }


        #pagefooter{
            background-color: #654299;
        }
        #subfooter{
            background-color: #432C66;
        }
        }


    /* 960px */
    @media screen and (min-width:960px){
        body{
            background-color: #8C0101;
        }

        #pageheader{
        background-color: #767676;
        }

        #media{
            background-color: #363636;
        }


        #Q1, #Q2, #Q3, #Q4{
            background-color: #AEAEAE;
        }


        #pagefooter{
            background-color: #5F5F5F;
        }
        #subfooter{
            background-color: #404040;
        }
        }


    /* 1024px */
    @media screen and (min-width:1024px){
            body{
            background-color: #018C8C ;
        }
        #container{
            background-color: #393939;
        }
        #pageheader{
        background-color: #E4E4E4 ;
        }
        #pagenav{
            background-color: black;
            color: white;
        }
        #media{
            background-color: #656565;
        }
        #pagemain{
            background-color: black;
            color: white;
        }

        #wrapper{
            display: grid;
                grid-template-areas: 
                "ph ph ph ph"
                "pn pn pn pn"
                "me me me me"
                "pm pm pm pm"
                "q1 q2 q3 q4"
                "pf pf pf pf"
                "sf sf sf sf"
                ;
        }


        #Q1, #Q2, #Q3, #Q4{
            background-color: #404040;
        }


        #pagefooter{
            background-color: #E6E6E6;
        }
        #subfooter{
            background-color: #BBBBBB;
        }
        }


    /* 1200px */
        @media screen and (min-width:1200px){
            body{
            background-color: #E6E6E6;
        }
        #container{
            background-color: black;
        }
        #pageheader{
        background-color: #E18A00;
        }
        #pagenav{
            background-color: white;
            color: black;
        }
        #media{
            background-color: #151720;
            color: white;
        }
        #pagemain{
            background-color: white;
            color: black;
        }


        #Q1, #Q2, #Q3, #Q4{
            background-color: #032065;
            color: white;
        }


        #pagefooter{
            background-color: #B46F00;
        }
        #subfooter{
            background-color: #875300;
        }
        }


    /* 1920px */
        @media screen and (min-width:1920px){
            body{
            background-image:url(Images/berserk-mozgusandtheboys.jpeg);
        }

        #pageheader{
        }
        #media{
            /* background-color: #4D9900; */
        }


        #Q1, #Q2, #Q3, #Q4{
            background-color: #2E5C00;
        }


        #pagefooter{
            background-color: #7A0000;
        }
        #subfooter{
            background-color:#5C0000;
        }

        }