/*
            --Fonts-- 
            These are the font faces used for this theme. 
            If you would like to change the fonts used, replace
            the source url with a new font file. do not change 
            the font family name, as this is used throughout 
            this stylesheet. 
            */
            @import url("vars.css");

            *{
                scrollbar-color: var(--accText) var(--mainColor) ;
            }
            html{
                background-color: var(--accColor3);
                color: var(--mainText);
                font-family: 'mainText', monospace;
                font-size: 1.2em;
            }
            main{
                overflow: scroll;
                height: 100%;
            }
            footer{
                background-color: var(--mainText);
                text-align: center;
                color: var(--mainColor);
                position: relative;
                z-index: 10;
            }
            .link{
                color: var(--mainColor);
                text-decoration: none;
            }
            .link:hover{
                color: var(--accColor1);
            }
            .link:visited{
                color: var(--accText2);
            }

            #container{
                max-width: 675px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 15px;
            }

            .grid{
                display: grid;
                grid-template-columns: 27% auto auto;
                border: var(--accText) 10px ridge;
                border-radius: var(--spacing);
                background-color: var(--mainColor);
                grid-template-rows: auto 565px auto;
            }

            .gridItem1{
                grid-row: 1/2;
                grid-column: 1/4;
                
            }
            .gridItem2{
                grid-row: 2/3;
                grid-column: 1/2;
            }
            .gridItem3{
                grid-row: 2/3;
                grid-column: 2/4;
            }
            .gridItem4{
                grid-row: 3/4;
                grid-column: 1/4;
            }
            .header{
                font-family: 'boldText', monospace;
                font-size: 1.2em;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                background-color: var(--mainText);
                color: var(--mainColor);
            }
            .header h1{
                margin: 0;
                padding: var(--spacing);
            }
            .navigation ul{
                list-style: none;
                margin: 0;
                padding: 0;
                width: 100%;
                text-align: center;
            }
            .navigation li a{
                display: block;
                text-decoration: none;
                padding: var(--spacing);
                background-color: var(--mainText);
                color: var(--mainColor);
            }

            .navigation li a:hover{
                background-color: var(--accText);
                color: var(--mainColor);
            }
            li a.active{
                background-color: var(--accText);
                color: var(--mainColor);
            }

            .title{
                font-family: 'boldText', monospace;
                text-decoration: underline;
                margin: var(--spacing) 0px 0px var(--spacing);
            }
            .title h2{
                margin: 0;
            }

            .content{
                margin: var(--spacing);
            }

            #aliens{
                width: 300px;
                border: var(--accColor3) 5px ridge;
                border-radius: 5px;
            }
            textarea{
                width: 450px;
                height: 50px;
            }

            @media screen and (max-width: 896px)  {
                .flowers{
                    display: none;
                }
                .grid{
                    display: flex;
                    position: relative;
                    flex-direction: column;
                }
            }
            @media (min-height: 750px) and (max-height: 865px){
                .grid{
                    grid-template-rows: auto 725px auto;
                }
            }
            .topBar{
                background: var(--mainText);
                font-family: 'boldText';
                color: var(--mainColor);
                border: var(--accColor3) 5px ridge;
                border-radius: 5px;
            }

            .category{
                width: 450px; 
            }
            .picture{
                border: var(--accColor3) 5px ridge;
                border-radius: 5px;
                height: 250px;
            }
            .bold{
                font-family: 'boldText';
            }