/* Google font import */

@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@900&display=swap');

/* Variables */

.light-theme {
    --text: black;
    --body: rgb(221, 218, 216);
    --main: rgb(240, 240, 240);
    --menu: rgba(255, 255, 255, 0.7);
    --menu-hover: rgba(212, 208, 204, 0.7);
    --border: solid black 1px;
    --game-gallery: rgba(212, 208, 204, 0.5);
    --icon: #000000;
    --icon-light: block;
    --icon-dark: none;
    --icon-filter: invert(0%);
    --accent: linear-gradient(300deg, rgb(255, 94, 0), rgb(228, 153, 41));
    --accent-simple: rgb(255, 94, 0);
    --scroll: rgb(255, 136, 0);
    --scroll-hover: rgba(255, 136, 0, 0.363);
    --itch: linear-gradient(90deg, rgba(255, 91, 91, 0.7), rgba(153, 21, 43, 0.7));
    --itch-hover: linear-gradient(90deg, rgb(255, 92, 91), rgb(153, 21, 44));
    --download: linear-gradient(90deg, hsla(85, 71%, 51%, 0.7), rgba(93, 142, 27, 0.7));
    --download-hover: linear-gradient(90deg, rgb(143, 218, 41), rgb(93, 142, 27));
    --border-radius: 10px;
}

.dark-theme {
    --text: rgb(220, 220, 220);
    --body: rgb(26, 24, 23);
    --main: rgb(46, 46, 46);
    --menu: rgba(51, 51, 51, 0.7);
    --menu-hover: rgba(75, 75, 75, 0.7);
    --border: solid rgba(220, 220, 220, 0.7) 1px;
    --game-gallery: rgba(112, 108, 104, 0.3);
    --icon: #ffffff;
    --icon-light: none;
    --icon-dark: block;
    --icon-filter: invert(100%);
    --accent: linear-gradient(300deg, rgb(255, 94, 0), rgb(228, 153, 41));
    --scroll: rgb(255, 136, 0);
    --scroll-hover: rgba(255, 136, 0, 0.363);
    --itch: linear-gradient(90deg, rgba(255, 91, 91, 0.7), rgba(153, 21, 43, 0.7));
    --itch-hover: linear-gradient(90deg, rgb(255, 92, 91), rgb(153, 21, 44));
    --download: linear-gradient(90deg, hsla(85, 71%, 51%, 0.7), rgba(93, 142, 27, 0.7));
    --download-hover: linear-gradient(90deg, rgb(143, 218, 41), rgb(93, 142, 27));
    --border-radius: 10px;
}

/* Shaping */

* {
    font-family: 'Mukta', sans-serif;
    color: var(--text);
}

h1 {
    font-size: 3.2em;
    margin-top: -5px;
    margin-bottom: 0px;
}

p {
    margin-left: 15px;
    margin-right: 15px;
}

hr {
    width: 35%;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

/* Background */

body {
    margin: 0px;
    background-color: var(--body);
}

/* Page */

main {
    box-shadow: 0px 0px 7px 1px gray;

    border-radius: calc(var(--border-radius) + 3px);

    padding: 15px;
    width: 850px;
    height: auto;

    margin: auto;
    margin-top: 10px;
    margin-bottom: 20px;

    background-color: var(--main);
}

/* Header */

.top-bg {
    border-radius: var(--border-radius);
    height: 220px;
    background: var(--accent);

    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;

    -webkit-user-select: none;
    user-select: none;
}

/* Picture */

.header_picture {
    text-align: center;
}

.header_picture img {
    margin-top: -100px;
    border: solid var(--main) 5px;
}

/* Buttons */

.left-buttons {
    display: flex;
    align-items: baseline;
    flex-direction: column;
}

.right-buttons {
    display: flex;
    align-items: start;
    flex-direction: column;
}

.menu-buttons {
    font-size: 0;

    border: 0;
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 3px 0px black;
    width: 50px;
    height: 50px;
    padding: 5px;

    margin: 5px;
    margin-bottom: 0px;
    cursor: pointer;

    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);

    background-color: var(--menu);
}

.menu-buttons:hover {
    border: 0;
    background-color: var(--menu-hover);
}

.menu-buttons::selection {
    border: 0;
}

.menu-buttons img {
    filter: var(--icon-filter);
}

/* Dark Mode Button */

.icon-light {
    display: var(--icon-light);
}

.icon-dark {
    display: var(--icon-dark);
}

/* Languages Dropdown */

#languages-select {
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 3px 0px black;
    font-size: 1em;
    width: 50px;
    height: min-content;
    -webkit-user-select: none;
    user-select: none;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    appearance: none; /* Removes default arrow */
}

#languages-select option {

    width: 100%;
    height: min-content;
    cursor: pointer;
    background-color: var(--menu);

    border-radius: 0px;
    border-bottom: var(--border);
}

#languages-select option:hover {
    cursor: pointer;
    background-color: var(--accent-simple);
}

#languages-select option:first-child {
    border-radius: var(--border-radius) var(--border-radius) 0px 0px;
}

#languages-select option:last-child {
    border-radius: 0px 0px var(--border-radius) var(--border-radius);
    border-bottom: 0px;
}

@media screen and (max-width: 830px) and (min-width:500px) {
    main {
        border-radius: 0px;

        padding: 0px;
        padding-bottom: 10px;

        width: 100%;
        height: auto;

        margin: 0px;
    }

    .top-bg {
        border-radius: 0px;
    }

    #languages-select option {
        height: 50px;
        font-size: 1.5em;
    }

}

@media screen and (max-width: 500px) {
    main {
        border-radius: 0px;

        padding: 0px;
        padding-bottom: 10px;

        width: 100vw;
        height: auto;

        margin: 0px;
    }

    .top-bg {
        border-radius: 0px;
    }

    #languages-select option {
        height: 50px;
        font-size: 1.5em;
    }
}