/* these are the main colors and header image
   replace them with anything you want! */
:root {
    --site-bg: url("images/background.png");
    --accent-color: #00000040;
    --highlight-color: #ff0062;
    --link-color: #DC7891;
    --bg-color: #00000070;
    --bg-color2: #B5B5B5;
    --text-color: #FFFFFF;
    --favorite-color: #FFE5E3;
    /* you can change the stripe colors easily from here */
    --stripe-color: #580078;
    --stripe-color2: #6c007a;
    --stripe-color3: #3a004d;
    --stripe-color4: #4c0054;
    --border-color: #000000;
    --border-width: 7px;
    --shadow-shift: 10px;
}
/* you can get hex codes from sites like this:
   https://palettes.shecodes.io/
   i just looked up "css color templates" to find that link! */

/* this applies to all the content */
* {
    color: var(--text-color);
/* change the font here, it's set up to all use the same one */
    font-family: monospace;
    border-radius: 0em;

}
/* this is for when you select text on the page */
::selection {
    background: var(--highlight-color);
    color: var(--bg-color);
}

body {
    background-image: linear-gradient(110deg, var(--stripe-color) 25%, var(--stripe-color2) 25%, var(--stripe-color2) 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, var(--stripe-color2) 75%, var(--stripe-color2) 100%);
    background-size: 40.00px 109.90px;
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
/* i think having better line spacing helps text to be more readable, but you can remove it if you want */
p {line-height: 1em;}








header {
    /* you can add the image url in :root (at the top) if you want */
    background: var(--header-bg);
    background-size: 100%;
    background-position: center;
    position: center;
    /* change the minimum height if you want it to take up more/less space */
    margin: 0 auto;
    padding: 1em 1em;
    /* i have a default border-radius set, but i didn't want rounded corners on this element */
}

/* this is your site title displayed at the top of the page 
    header > h1 {
        margin: 20px auto;
        /* border-radius: .3em; 
        max-width: 900px;
        padding: 12px;
        font-size: 4em;
        /* you can change the text-align to center or right if you want it placed differently 
        text-align: center;
        background-color: var(--bg-color);
        border: var(--border-width) solid var(--border-color);
        box-shadow: var(--accent-color) var(--shadow-shift) var(--shadow-shift);
        text-shadow: var(--bg-color2) 1px 1px 3px;
    }

 */

footer {
    text-align: center;
    font-size: small;
    padding: 1em;
    margin: 1em 1em;

}





/*

nav ul {
    justify-content: space-evenly;
    list-style-type: none;
    text-decoration: none;
    padding-left: 0;

}
nav li {
    background-color: #ffffff;
    text-align: center;
    border: 5px solid var(--border-color);
    margin-top: 10px;
    box-shadow: var(--accent-color) 5px 5px;
    
}

nav a {
    text-decoration: none;
    font-size: 2em;
}

nav li:hover {
    background-color: #000000;
    offset-position: 10px;
}



#sidebar {
    position: sticky;
    top: 20px;
    /* made the stripe bg with a generator:
    https://stripesgenerator.com/
     
    background-color: var(--bg-color);
    width: 200px;
    margin: 1em;
    padding: 1em;
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--accent-color) var(--shadow-shift) var(--shadow-shift);
    height: fit-content;
}

*/



#content {
    display: flex;
    max-width: 1300px;
    margin: auto;
}

main {
    width: 100%;
}


.MainGrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.MainGrid-1 {
    grid-area: 1 / 1 / 3 / 3;
}

.MainGrid-2 {
    grid-area: 1 / 3 / 3 / 5;
}

.MainGrid-3 {
    grid-area: 1 / 5 / 3 / 7;
}

.MainGrid-4 {
    grid-area: 3 / 2 / 5 / 4;
}

.MainGrid-5 {
    grid-area: 3 / 4 / 5 / 6;
}

.frame {
    background-color: var(--bg-color);
    padding: 1em;
    margin: 1em;
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--accent-color) var(--shadow-shift) var(--shadow-shift);
}


    .frame img {
        border: var(--border-width) solid var(--border-color);
        height: 300px;
        width: 300px;
        
    }



.MainGrid-5 img {
    border: 0 solid var(--border-color);
}



.heading {
    font-size: 25px;
    font-weight: bold;
}


/* a class for centering text and images */
    .center { text-align: center; }




.chapter {
    margin: 0px -50px;
    padding: 0.5em 0.5em;
    text-align: center;
}






.aboutme_header {
    display: flex;
    height: fit-content;
    padding: 1em 2em;
    margin: 1em;
}


.card {
    display: flex;
    width: fit-content;
}

.card img {
    width: 150px;
    margin: 10px;
    height: 150px;
}

.favorites {
    display: flex;
    height: fit-content;
    padding: 1em 2em;
    margin: 1em;
    justify-content: center;
    align-items: stretch;
}

    .favorites div {
        width:20%;
    }






.ost {
    display: flex;
    height: fit-content;
    width: 700px;
    justify-content: space-between
}

.ost img {
    width: 200px;
    height: 200px;
}

.gameBox {
    display: flex;
    height: fit-content;
    width: 1000px;
    justify-content: space-between
}

    .gameBox img {
        margin: 10px;
    }



.gameDesc {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}
    .gameDesc h1 {
        font-weight: bold;
        line-height: 0em;
        padding: 0px 0px 10px 10px;

    }
    .gameDesc h2 {
        padding-left: 10px;
    }

    .gameDesc p {
        font-size: 1.5em;
        padding-left: 10px;
        margin:0;
    }

.gameCard {
    display: flex;
    height: fit-content;
    padding: 0em 0em 1em 0em;
}



.gameCard img {
    border: var(--border-width) solid var(--border-color);
    height: 100px;
    width: 100px;
    max-width: 100%;
    margin: 10px;
    align-self: flex-end;
}





.buttonList {
    vertical-align: bottom;
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
    text-decoration: none;
    padding: 0;
    flex-wrap: wrap;
    margin: 0;
}

.buttonList li {
    flex: auto;
    background-color: #00000000;
    text-align: center;
    margin: 10px;
    box-shadow: var(--accent-color) 5px 5px;
    
}

    .buttonList li a {
        display: inline-block;
        background-color: #00000050;
        border: 5px solid var(--border-color);
        width: 100%;
        text-decoration: none;
        font-size: 2em;
        cursor: pointer;
        text-align: center;
        transition: 0.3s;
    }

        .buttonList li a:hover {
            background-color: #000000AA;
            border: 5px solid #FFFFFF;
        }


.links ul{
    padding: 1em 2em;
}

.links li {
    /* border-bottom: 5px solid var(--border-color); */
    line-height: 1.5em;
    font-size: 20px;
    padding: 0px 0px 10px 10px;
}

/*
.flag {
    width: 50px;
    height: 33px;
    border: 0px;
}

    .flag img {
        width: 50px;
        height: 33px;
        border: 0px;
    }

    */



















    /* these are the mobile styles! */
    @media only screen and (max-width: 800px) {
        #content {
            flex-wrap: wrap;
        }

        #sidebar {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            border: none;
        }

        header {
            min-height: 160px;
        }

            header > h1 {
                font-size: 3em;
                margin: .4em;
            }

        nav > ul {
            /* this stuff makes it wrap around on mobile */
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
        }

        #avatar {
            margin: 0 1em;
        }

        #bio {
            width: 50%;
        }

        main {
            margin: 0 1em;
        }

        #sidebar ul {
            margin: 0 1em;
            display: flex;
            flex-wrap: wrap;
            line-height: 2em;
        }

        #sidebar li {
            padding-left: 0;
            margin: .3em 1em;
        }

        footer {
            margin: 1em;
        }
    }