* {
    box-sizing: border-box; /* when adding margin and padding it doesn't affect the actual element */
    padding: 0;
    margin: 0;
    font-family: 'Pixelify Sans', sans-serif;
    color: var(--primary-text-color); /* color of text*/
    /* cursor: url('./img/cursor.png'), pointer; */
}

/* Lol doesn't work for bigger res, should make it more dynamic or absolute, but this is pure trash rn*/

img {
    max-width: 100%;
}

:root { /* consistently used variables (ex: colors ect.) */
    --primary-text-color: rgba(255,255,255, 0.6);
    --primary-text-colorHover: rgba(255,255,255, 0.9);
    --background-color: rgb(65, 85, 80);
    --scrollbar-color1: rgba(0,0,0, 0.2);
    --scrollbar-color2: rgba(0,0,0, 0.1);
}

body {
    line-height: 1.5;
    background: var(--background-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centers the header, footer and container div */
    min-width: 1200px;
}

@media screen and (min-width: 2540px) and (max-width: 2999px) {
  html {
    font-size: 16px;
  }
}
@media screen and (min-width: 3000px) and (max-width: 6999px) {
    html {
        font-size: 30px;
    }
}
@media screen and (min-width: 7000px) {
    html {
        font-size: 60px;
    }
}

a {
    text-decoration: none; /* underlining, crossing out etc. */
    color: var(--primary-text-color);
    transition: 1s;
}

a:hover {
    color: var(--primary-text-colorHover);
}
ul {
    list-style: none;
}

.middle div {
    margin: 0 auto;
    width: 100%;
}

.middle p {
    text-align: justify;
    text-justify: auto;  /* justified margins */
}

h1 {
    margin-left: 3rem;
}

h2 {
    font-size: 2rem;
    margin-top: 0.5rem;
    margin-left: 3rem;
}


/* Scrollbar */

    ::-webkit-scrollbar {
        width: auto;  /* width of the entire scrollbar */
    }

    ::-webkit-scrollbar-track {
        background: var(--scrollbar-color1); /* background of the tracking area */
        border-radius: 100vw; /* roundness of the tracking area (view width)*/
        margin: 5px 0;
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-color2); /* color of the scroll thumb */
        border-radius: 100vw; /* roundness of the scroll thumb (view width) */
        /*border: 1px solid rgba(255,255,255, 0.6);*/ /* padding around the scroll thumb*/
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--scrollbar-color1) ;
    }

/* Navigation bar / Header */

    header {
        width: 100%;
        height: 100%;
    }
    .navbar {
        background-image: url(img/header1.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 1%;
        margin: auto;
        justify-content: center;
        align-items: center;
        min-width: 1000px;
        width: 60%;
        height: 80%;
    }

    .navbar .header ul {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .navbar ul li a {
        padding: 5% 50px;
        display: block;
        font-size: 2rem; /* height relative */
        font-weight: 400;
        transition: 0.5s;
    }

    .navbar ul li a:hover {
        color: var(--primary-text-colorHover);
        background: radial-gradient(rgba(58, 38, 21, 0.4), rgba(58, 38, 21, 0.1), rgba(0,0,0,0), rgba(0,0,0,0)); /* gradient : inner, middle , outer (ect can put more colors) */
    }

/* Footer */

    footer {
        width: 100%;
        height: 100%;
    }

    .footer 
    {
        background-image: url(img/header1.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 1%;
        margin: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        min-width: 1000px;
        width: 60%;
        height: 100%;
    }

    .footer div {
        justify-items:center;
        justify-content: space-between;
    }

    div.desc {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20%;
    }

    .footer div h4 {
        font-size: 1.3rem;
    }

    .footer div p {
        font-size: 1.2rem;
    }

    .footer div ul {
        justify-items: center;
    }

    .footer div img {
        width: 3rem;
    }

    p {
        font-size: 1.5rem;
        padding: 0 5%;
    }

/* The Game */

    canvas 
    {
        border-style: solid;
        border-width: 1rem;
        border-color: #5f3e38 #3f2c28 #312522 #4f322c ;
        border-radius: 1%;  /* lekerekíti a canvas sarkait */
        /* image-rendering: auto; crisp graphics */

        min-width: 600px;
        width: 90%;
        margin-bottom: 2%; margin-top: 1%;
    }

    .controls {
        justify-items: center;
        font-size: 1.3rem;
    }

    .game, .notice, .forms {
        display: flex;
        justify-content: center;
        align-content: center;
        font-size: 1.5rem;
    }

/* Utility Classes*/

    .container{
        display: flex;
        justify-content: center;
        align-content: center;
        width: 100%;
    }

    .gameBorder img {
        width: 100%;
    }

    .gameBorder {
        width: 15%;
        margin: 0;
    }

    .middle {
        padding: 1.5% 5%;
        justify-content: center;
        margin: 0;
        width: 70%;
    }

    .adjustRight {
        display:flex;
        justify-content: right;
    }

    .jester {
        background: radial-gradient(#bac086, #94bb83,#7ab9a9,#80b6bd);

        background-clip: text;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        
        color:transparent;
    }

/* Collapsible */

    .collapse {
        background-color: rgba(0,0,0,0);
        font-weight: bold;
        border: none;
        border-radius: 20px;
        outline: none;
        font-size: 2rem;
    }
    .collapse h2
    {
        color: var(--primary-text-color);
    }

    .collapse:hover {
        background-color: rgba(0,0,0,0);
    }

    .collapse h2:hover
    {
        color: var(--primary-text-colorHover);
    }

    .text {
        background-color: none;
        display: none;
        margin: 0 0;
    }

    .middle p.credits {
        font-size: small;
        word-wrap: break-word;
        text-align: start;
    }

    .collapse:after {
        content: '>';
        font-size: 2rem;
        color: var(--primary-text-color);
        margin-right: 0.5rem;
        float:inline-start;
        transition: 0.2s;
    }

    .active:after {
        transform: rotate(90deg);
    }

    .namelist {
        display: flex;
        justify-content: space-evenly;
    }

    .playtesters {
        justify-items: center;
        font-size: 1.5rem;
    }

/* Gallery */

    .galleryContainer {
        max-width: 80%;  /* the scroll bar will be longer / shorter */
        margin: 5% auto;
    }
    .gallery {
        list-style: none;
        padding: 10px;
        display: flex;
        /* flex-wrap: wrap; */ /*if i'd need more rows*/
        justify-content: space-evenly;
        white-space: nowrap;
        overflow: auto;
        /*
        scrollbar-color: rgba(0,0,0,0.2) rgba(0,0,0,0.2);
        */
        
    }
    
    .gallery::-webkit-scrollbar { /* height of the scrollbar for the gallery */
        height: 1rem;
    }

    .gallery li {
        height: 6rem;
        min-width: 10rem;
        margin: 1%;
        display: list-item;
        unicode-bidi: isolate;
    }

    .gallery img {
        width: 100%;
        height: 100%;
        object-fit:contain;
        opacity: 0.75;
        transition: 0.2s;
        margin: 0.5% 0;
    }

    .gallery img:hover {
        opacity: 1;
    }

    .mySlides {
        display: none;
        margin: 0 auto;
        margin-top: 5rem;
        align-content: center;
        transition: .32s ease-in-out;
        object-fit: contain;
        image-rendering: optimizeSpeed; /* crisp graphics */
    }

    .mySlides img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

    .slides {
        margin-bottom: 0.5rem;
        height: 20rem;
        align-content: center;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

    /* Secret */

    .middle .secret {
        color: var(--background-color);
        font-size: 0.16%;
        word-wrap: break-word;
        padding: 0; margin: 0;
    }