/* default */

:root {
    --black: #000000;
    --white: #FFFFFF;
    --space-cadet: #232644;
    --Uranian-blue: #B7DBF9;
    --savory-blue: #5663C7;
    --baby-blue: #69CAF2;
    --green-yellow: #A5EB56;
    --turquoise: #63CEAF;
    --safety-orange: #FB832A;
    --cinnabar: #ED462A;

    --space-cadet-rgba: rgba(35, 38, 68, .75);
    --Uranian-blue-rgba: rgba(183, 219, 249, 0.75);
    --savory-blue-rgba: rgba(86, 99, 199, 0.75);
    --baby-blue-rgba: rgba(105, 202, 242, 0.75);
    --green-yellow-rgba: rgba(165, 235, 86, 0.75);
    --turquoise-rgba: rgba(99, 206, 175, 0.75);
    --safety-orange-rgba: rgba(251, 131, 42, 0.75);
    --cinnabar-rgba: rgba(237, 70, 42, 0.75);
}

@font-face {
    font-family: 'Casino';
    src: url(../assets/fonts/CasinoRegular-Wyz4G.ttf);
}

@font-face {
    font-family: 'Aharoni';
    src: url(../assets/fonts/aharoni.ttf);
}

@font-face {
    font-family: 'Calibri';
    src: url(../assets/fonts/calibri-regular.ttf);
}


body {
    margin: 0;
    height: 100vh;
    width: 100vw;
    font-family: 'calibri';
}

body .container {
    display: grid;
    min-width: 100vw;
    min-height: 100vh;

    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 60px 60px 60px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "header header header header header header header header header header header header header"
        "header header header header header header header header header header header header header"
        "header header header header header header header header header header header header header"
        "main main main main main main main main main main main main main"
        "main main main main main main main main main main main main main"
        "main main main main main main main main main main main main main"
        "main main main main main main main main main main main main main"
        "main main main main main main main main main main main main main"
        "main main main main main main main main main main main main main"
        "main main main main main main main main main main main main main"
        "main main main main main main main main main main main main main"
        "main main main main main main main main main main main main main"
        "main main main main main main main main main main main main main"
        "main main main main main main main main main main main main main";
    min-height: 100vh;
}

body .header {
    grid-area: header;
    display: flex;
    background-color: var(--space-cadet);
    max-height: calc(60px * 3);
    box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 0.5);
}

body .logo {
    grid-area: logo;
    width: calc(100% / 7);
    margin: 0px;
}

body .header img {
    border-radius: 10px;
    height: 100%;
    width: auto;
    margin-left: 10px;
}

body .header .button {
    display: block;
    width: 60%;
    height: auto;
    max-height: 50%;
    max-width: calc(100% / 7);
    border-radius: 10px;
    margin: 20px;
    padding: 10px;
    background-image: url(../assets/images/cards/ruiten2.webp);
    background-size: cover;
    background-position: 0px 5px;
    border: 1px solid var(--space-cadet);
    border-bottom: 10px solid var(--black);
    transform: rotate(0deg);
    transition: all 1s ease;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 40px;
}

body .header .button:hover:not(.empty) {
    border: 1px solid var(--white);
    border-bottom: 10px solid var(--black);
    transition: all .5s ease;
    background-position: 0px -5px;

}

body .header .button p {
    text-align: center;
    font-family: 'Casino';
    font-size: 2em;
    text-decoration: none;
    color: var(--black);
}

body .header .empty {
    display: block;
    width: 60%;
    height: auto;
    max-height: 100%;
    max-width: calc(100% / 7);
    border-radius: 10px;
    margin: 20px;
    background-image: none;
    background-size: cover;
    background-position: 0px 0px;
    border: none;
    border-bottom: none;
    transform: rotate(0deg);
    transition: all 1s ease;
}

body .header a,
body .header a:visited,
body .header a:hover,
body .header a:active,
body .header a:focus {
    text-decoration: none;
    color: var(--black);
}

body .header #dropdownbutton .dropdowncontent {
    display: none;
    position: absolute;
    background-color: var(--turquoise);
    border-radius: 5px;
    min-width: fit-content;
    width: 100%;
    height: auto;
    z-index: 1;
    top: 99%;
    left: 0;
}

body .header #dropdownbutton:hover .dropdowncontent {
    display: block;
}



body .header #dropdownbutton .dropdowncontent div {
    text-decoration: none;
    text-align: center;
    font-family: 'aharoni';
    font-size: 1.5em;
    border: 2px solid var(--space-cadet);
    border-radius: 5px;
    width: 95%;
    margin: 5px;
}

body .navarea {
    grid-area: navarea;
}


body .main {
    grid-area: main;
    min-width: 100%;
    /* box-shadow: 21px 20px 20px 5px rgba(0, 0, 0, 0.5); */
}

body .main .title {
    color: var(--baby-blue);
    text-align: center;
    font-family: 'Casino';
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 3em;
}

body .main .subtitle {
    font-family: 'aharoni';
    font-size: 1.5em;

}

body .main p {
    text-align: center;
    font-family: 'Casino';
    margin-top: 0px;
    font-size: 3em;
}

body .container .header .responsivenav {
    display: none;
}

.responsivelogo {
    display: none;
}

.responsivegrid {
    display: none;
}

body {
    overflow-x: hidden;
    background: rgb(183, 219, 249);
    background: linear-gradient(90deg, rgba(183, 219, 249, 1) 0%, rgba(70, 123, 201, 1) 20%, rgba(70, 123, 201, 1) 80%, rgba(105, 202, 242, 1) 100%);
}

@media screen and (max-width: 450px) {
    .responsivegrid {
        height: fit-content;
        max-height: 10vh;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        gap: 5px 5px;
        grid-template-areas:
            "responsivelogo responsivelogo"
            "responsivehome responsivehome"
            "responsivemanuals responsiveabout"
            "responsivegames responsivecontact";
    }

    .responsivehome {
        grid-area: responsivehome;
    }

    .responsivemanuals {
        grid-area: responsivemanuals;
    }

    .responsivegames {
        grid-area: responsivegames;
    }

    .responsivecontact {
        grid-area: responsivecontact;
    }

    .responsiveabout {
        grid-area: responsiveabout;
    }

    .responsivelogo {
        grid-area: responsivelogo;
    }


    body .header .logo img {
        display: none;
    }

    body .header .button {
        display: none;
    }

    body .container .header .responsivehome,
    .responsivegames,
    .responsivemanuals,
    .responsiveabout,
    .responsivecontact {
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: casino;
        border: 2px solid var(--Uranian-blue);
        text-align: center;
        background-color: var(--savory-blue);
        height: 25px;
        margin: 0px;
    }

    body .container .header .responsivelogo {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
    }

    body .header {
        display: block;
        max-height: none;
        height: 190px
    }

    .gamesbtn {
        width: 100px;
        height: 24px;
        border: none;
        background-color: var(--savory-blue);
        font-family: casino;
        font-size: 16px;
    }

    .dropdownres {
        display: none;
        position: absolute;
        background-color: var(--baby-blue);
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        margin: 0px;
        margin-bottom: -200px;
        width: fit-content;
    }

    .dropdownres a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: center;
    }

    .dropdownres a:hover {
        background-color: var(--savory-blue);
    }

    .responsivegames:hover .dropdownres {
        display: block;
    }


}



/* homepage: html/index.html */

#homepage .main {
    max-width: none;
    min-width: 100%;
}

#homepage .block .subblock img {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}


#homepage .main .block {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
    padding: 10px;
    padding-top: 50px;
}



#homepage .coinchasehome {
    width: 20%;
}

#homepage .main .block .subblock {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}

#homepage .main .block .subblock a {
    text-decoration: none;
}

#homepage .main .block .subblock a button {
    display: block;
    width: 100%;
    min-height: 100px;
    height: auto;
    max-height: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: none;
    border-bottom: 10px solid var(--black);
    background-color: var(--space-cadet);
    color: white;
    font-size: 2em;
    font-family: 'Casino';
    transition: all .5s ease;
    transition: scale 0ms;
    transition: rotate 0ms;
    transform: scale(1) rotate(0deg);
}

.platformer_block.subblock {
    width: 100%;
}

@keyframes pulse-twitch {
    0% {
        transform: scale(1) rotate(0deg);
    }

    10% {
        transform: scale(1.1) rotate(2deg);
    }

    20% {
        transform: scale(1) rotate(-2deg);
    }

    30% {
        transform: scale(1) rotate(1deg);
    }

    40% {
        transform: scale(1) rotate(-1deg);
    }

    50% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

#homepage .main .block .subblock a button:hover {
    background-color: var(--green-yellow);
    color: var(--black);
    border: 1px solid var(--white);
    border-bottom: 10px solid var(--black);
    transition: all .5s ease;
    animation: pulse-twitch 2s infinite;
}

#homepage .main .block p {
    font-size: 1.2em;
    font-family: 'aharoni';
    margin: 0px;
    text-align: left;
    max-width: 100%;
    padding: 10px;
    background-color: var(--baby-blue-rgba);
}


/* end homepage */
/* contact */
#contact .main form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px;
    width: 80%;
    transform: translate(calc(10% + 10px), 0px);
}

#contact .main form>* {
    font-family: 'calibri';
    font-size: 1.3em;
    width: 50%;
    margin-left: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#contact .main form input[type="text"],
#contact .main form input[type="email"],
#contact .main form textarea {
    border-radius: 5px;
}

#contact .main form textarea {
    resize: horizontal;
    max-width: 90%;
    min-width: 10%;
}

.linkbutton {
    width: 90%;
    height: auto;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: none;
    border-bottom: 10px solid var(--black);
    background-color: var(--green-yellow);
    font-size: 2em;
    font-family: 'Casino';
    margin-top: 20px;
    margin-bottom: 20px;
}


/* dungeonroll */
#dungeonroll .main,
.dungeonRollBackground {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 30vw;
    min-height: 70vh;
    background-image: url('assets/images/background.webp');
    background-size: cover;
}

#dungeonroll #gameview {
    overflow: hidden;
    width: 90%;
    height: 90%;
    margin: 5%;
}

#dungeonroll #diceholder {
    margin-left: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 80%;
    height: 50%;
}

#dungeonroll .sounds {
    display: none;
}

#dungeonroll .dungeonRollBackground {
    width: 50vw;
    height: 90vh;
    background-color: #63CEAF;
    border-radius: 30px;
    border: 20px solid var(--space-cadet);
    box-shadow: 20px 20px 20px 20px rgba(0, 0, 0, 0.5);
    align-content: center;
    position: absolute;
    top: 50%;
    left: 5%;
}

#dungeonroll .gamebutton {
    background-color: var(--space-cadet);
    color: var(--white);
    border: 1px solid var(--white);
    border-radius: 5px;
    padding: 5px;
    font-size: 20px;
    font-family: 'Calibri';
    margin: 5px;
    position: relative;
}

#dungeonroll .main p:not(#overlaytext) {
    background-color: var(--space-cadet);
    color: var(--white);
    border: 1px solid var(--white);
    border-radius: 5px;
    padding: 5px;
    font-size: 20px;
    font-family: 'Calibri';
    margin: 5px;
    position: relative;
    width: min-content;
    min-width: 15%;
}

#dungeonroll #diceholder {
    margin-left: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 80%;
    height: 50%;
}


#dungeonroll .main #overlay {
    width: 80px;
    height: 500px;
    min-width: 100%;
    min-height: 100%;
    background-color: var(--space-cadet-rgba);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 60px;
}

#dungeonroll .main .overlay-container #total,
#dungeonroll .main #overlaytext {
    width: fit-content;
    min-width: 200px;
    background-color: var(--space-cadet);
    color: var(--white);
    border: 1px solid var(--white);
    border-radius: 5px;
    font-size: 20px;
    font-family: 'Calibri';
    margin: 10px;
    padding: 5px;
    position: relative;
    left: calc(50% - 10px);
    transform: translateX(-50%);
}


#dungeonroll .main .overlaybutton {
    width: fit-content;
    min-width: 100px;
    background-color: var(--space-cadet);
    color: var(--white);
    border: 5px solid var(--safety-orange);
    border-radius: 5px;
    padding: 5px;
    font-size: 20px;
    font-family: 'Calibri';
    margin: 5px;
    position: relative;
}

#dungeonroll #tutorials {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin-top: 50px;
}

#dungeonroll #tutorials .tutorialtext p {
    color: white;
    font-family: 'calibri';
    font-size: 1em;
    margin: 0px;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
    width: fit-content;
    max-width: 20vw;
}

@media (max-width:500px) {

    #dungeonroll .main .overlay-container {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        text-align: center;
        padding-top: 60px;
    }

    #dungeonroll .main .overlay-container #total,
    #dungeonroll .main #overlaytext,
    #dungeonroll .main .overlaybutton {
        min-width: none;
        width: 45%;
    }
}

@media (max-width: 1000px) {

    #dungeonroll #gameview #balance,
    #dungeonroll #gameview #bet,
    #dungeonroll #gameview #dice {
        min-width: fit-content;
    }

    #dungeonroll .main .gamemenu {
        margin-top: 40px;
    }

    #dungeonroll #diceholder {
        margin-left: 0px;
        margin-top: -10px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;

    }

    #dungeonroll #tutorials .tutorialtext p {
        max-width: 100%;
        width: 100%;
        min-width: 100%;
    }
}

/* dungeonroll 3d dice */

#dungeonroll .dice {
    height: 200px;
    width: 200px;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-100px) rotateY(-45deg) rotateX(-45deg);
    transition: all 2s ease-in-out;
    transition: transform 5s;
}

#dungeonroll .panel {
    border-radius: 10px;
    width: 200px;
    height: 200px;
}

#dungeonroll .dot {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 20px;
    background-color: var(--green-yellow);
}

#dungeonroll .side {
    position: absolute;
    background-color: var(--cinnabar);
    border: 1px solid black;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    line-height: 200px;
}

#dungeonroll .one {
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotateX(-90deg) translateZ(100px);
    z-index: 1;
}

#dungeonroll .two {
    display: flex;
    justify-content: space-between;
    transform: rotateY(180deg) translateZ(100px);
    z-index: 2;
}

#dungeonroll .two .dot:nth-of-type(2) {
    align-self: flex-end;
}

#dungeonroll .three {
    display: flex;
    justify-content: space-between;
    transform: rotateY(90deg) translateZ(100px);
    z-index: 3;
}

#dungeonroll .three .dot:nth-of-type(2) {
    align-self: center;
}

#dungeonroll .three .dot:nth-of-type(3) {
    align-self: flex-end;
}

#dungeonroll .four {
    z-index: 4;
    transform: rotateY(0deg) translateZ(100px);
}

#dungeonroll .four,
#dungeonroll .six {
    display: flex;
    justify-content: space-between;
}

#dungeonroll .four .kolona,
#dungeonroll .six .kolona {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#dungeonroll .five {
    display: flex;
    justify-content: space-between;
    transform: rotateY(-90deg) translateZ(100px);
    z-index: 5;
}

#dungeonroll .five .kolona {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#dungeonroll .five .kolona:nth-of-type(2) {
    justify-content: center;
}

#dungeonroll .six {
    transform: rotateX(90deg) translateZ(100px);
    z-index: 6;
}

/* end dungeonroll */

/* manuals page */
/* fonts li */
#manuals li {
    font-family: aharoni;
}

#manuals .steps {
    margin-left: 40px;
    font-family: aharoni;
}

#manuals .text {
    padding: 20px;
}

#manuals .coinchasemanual {
    font-family: calibri;
    padding-left: 60px;
    padding-right: 60px;
}

#manuals #list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px;
    border-radius: 10px;
    width: 80%;
    transform: translate(calc(10% + 10px), 0px);
}

#manuals #list .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: var(--baby-blue);
    margin: 10px;
    border-radius: 15px;
}

#manuals .coinchaseheaders {
    text-align: left;
    font-family: casino;
    font-size: x-large;
    margin-left: 60px;
}

#manuals #list .item p {
    color: white;
}

#manuals #list .item .text {
    background-color: var(--baby-blue);
    align-items: center;
    text-align: left;
    margin: 0px;
    margin-top: -10px;
    border-radius: 10px;
    width: 80%
}

#manuals #list .item .text p {
    color: var(--space-cadet);
    font-family: 'calibri';
    font-size: 1.5em;
    text-align: left;
    margin: 10px;
}


/* end manuals page */

/* platformer css */

#highscoreNumber {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px;
    margin-left: 10%;
    border-radius: 10px;
    width: 80%;
    color: white;
    font-family: "Casino";
}

#gameviewer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 22%;
    width: 60%;
}

.manuallink {
    color: var(--black);
    text-decoration-line: none;
    font-size: 15px;
    font-family: "Casino";
    text-align: center;
}

.manuallinkflex {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

/* end platformer css */

/* coinchase */
@font-face {
    font-family: 'casino';
    src: url(CasinoRegular-Wyz4G.ttf);
}

#coinchase {
    max-height: 100vh;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}

#coinchase .gamecontainer {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.5fr;
    grid-template-rows: 0.5fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". refresh refresh refresh . titlecoin titlecoin titlecoin title . . . placeholder ."
        ". box box box box box box box box box box box box ."
        ". box box box box box box box box box box box box ."
        ". box box box box box box box box box box box box ."
        ". . ownname player1Highscore . start start start start bot player2Highscore resetscore resetscore .";
}

#coinchase .box {
    box-shadow: 7px 8px #E9E2ED;
    padding: 5px;
    grid-area: box;
    border: 0px solid transparent;
    border-radius: 20px;
    background-color: white;
    -webkit-user-drag: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
        "vakje1 vakje2 vakje3 vakje4 vakje5 vakje6 vakje7 vakje8 vakje9 vakje10 vakje11 vakje12 vakje13 vakje14"
        "vakje34 vakje35 vakje36 vakje37 vakje38 vakje39 vakje40 vakje41 vakje42 vakje43 vakje44 vakje45 vakje46 vakje15"
        "vakje33 vakje60 vakje61 vakje62 vakje63 vakje64 youwin youwin youwin youwin youwin youwin vakje47 vakje16"
        "vakje32 vakje59 vakje58 vakje57 vakje56 vakje55 vakje54 vakje53 vakje52 vakje51 vakje50 vakje49 vakje48 vakje17"
        "vakje31 vakje30 vakje29 vakje28 vakje27 vakje26 vakje25 vakje24 vakje23 vakje22 vakje21 vakje20 vakje19 vakje18"
}


#coinchase .box>div>img {
    width: 80px;
    border: 0 solid transparent;
    border-radius: 20px;
    box-shadow: 4px 6px #888;
    margin: 3px;
    user-select: none;
    position: relative;
    z-index: 0;
    -webkit-user-drag: none;
}

#coinchase div>.player1image {
    width: 35px;
    position: absolute;
    z-index: 0;
    margin: 5px;
    user-select: none;
}

/* youwin icons */
#coinchase div.youwin>div>img.player1image {
    margin-top: -30px;
    margin-left: -80px;
    z-index: -2;
}

#coinchase div.youwin>div>img.player2image {
    margin-top: -30px;
    margin-left: 350px;
    z-index: -2;
}

#coinchase div>.player2image {
    width: 35px;
    position: absolute;
    z-index: 0;
    margin-top: 48px;
    margin-left: 46px;
    user-select: none;
}

#coinchase .box>div>img:active {
    border: 0 solid transparent;
    border-radius: 20px;
    box-shadow: 2px 4px #555;
    transform: translateY(2px);
    transform: translateX(1px);
    transform: scale(0.97);
}

#coinchase .instruction {
    grid-area: instruction;
    display: flex;
    justify-content: center;
    align-items: center;
}

#coinchase .textinstruction {
    font-family: casino;
    font-size: 20px;
}


#coinchase .youwin {
    grid-area: youwin;
    text-align: center;
    font-family: casino;
    border: 0px solid transparent;
    border-radius: 20px;
    margin: 3px;
    height: 80px;
    font-size: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    background-color: #E9E2ED;
    box-shadow: 4px 6px #777;
}

#coinchase .youwin:active {
    border: 0 solid transparent;
    border-radius: 20px;
    box-shadow: 2px 4px #444;
    transform: translateY(2px);
    transform: translateX(1px);
}

#coinchase #placeholder {
    grid-area: placeholder;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0 solid transparent;
    border-radius: 20px;
    font-size: 50px;
    text-align: center;
    background-color: white;
    font-family: casino;
    user-select: none;
    cursor: pointer;
    margin: 18px;
    box-shadow: 4px 6px #E9E2ED;
    height: 60px;
}

#coinchase .titlecoin {
    grid-area: titlecoin;
    text-align: center;
    font-family: casino;
    border: 0px solid transparent;
    border-radius: 20px;
    margin: 18px;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    background-color: white;
    box-shadow: 4px 6px #E9E2ED;
    height: 60px;
}

#coinchase .arrowicon {
    width: 50px;
    user-select: none;
}

#coinchase .arrowiconright {
    width: 50px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}


#coinchase div.start>a {
    text-decoration: none;
    color: black;
}

#coinchase .refresh {
    grid-area: refresh;
    margin: 18px;
    padding: 10px;
    height: 60px;
    border-radius: 20px;
    border: 0px solid transparent;
    background-color: white;
    font-family: casino;
    font-size: x-large;
    box-shadow: 4px 6px #E9E2ED;
}

#coinchase .start {
    grid-area: start;
    text-align: center;
    font-family: casino;
    border: 0px solid transparent;
    border-radius: 20px;
    height: 40px;
    padding: 10px;
    margin: 20px;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    background-color: white;
    box-shadow: 4px 6px #E9E2ED;
    cursor: pointer;

}

#coinchase #player1Highscore {
    grid-area: player1Highscore;
    text-align: center;
    font-family: casino;
    border: 0px solid transparent;
    border-radius: 20px;
    padding: 10px;
    margin: 20px;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    user-select: none;
    background-color: white;
    box-shadow: 4px 6px #E9E2ED;
}

#coinchase #player2Highscore {
    grid-area: player2Highscore;
    text-align: center;
    font-family: casino;
    border: 0px solid transparent;
    border-radius: 20px;
    padding: 10px;
    margin: 20px;
    font-size: 50px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    background-color: white;
    box-shadow: 4px 6px #E9E2ED;

}

#coinchase #resetscore {
    grid-area: resetscore;
    height: 40px;
    width: 150px;
    border-radius: 20px;
    border: 0px solid transparent;
    background-color: white;
    box-shadow: 4px 6px #E9E2ED;
    font-family: casino;
    font-size: x-large;
    margin-top: 30px;
    margin-left: 50px;
    cursor: pointer;
    user-select: none;
}

#coinchase #resetscore:active {
    background-color: red;
}

#coinchase .bot {
    grid-area: bot;
    font-family: casino;
    margin-top: 40px;
    color: white;
    margin-left: 80px;
    float: right;
    font-size: x-large;
}


#coinchase #ownname {
    grid-area: ownname;
    color: white;
    font-family: casino;
    margin-top: 40px;
    margin-left: 80px;
    float: right;
    font-size: x-large;
}

#coinchase .vakje1 {
    grid-area: vakje1;
}

#coinchase .vakje2 {
    grid-area: vakje2;
}

#coinchase .vakje3 {
    grid-area: vakje3;
}

#coinchase .vakje4 {
    grid-area: vakje4;
}

#coinchase .vakje5 {
    grid-area: vakje5;
}

#coinchase .vakje6 {
    grid-area: vakje6;
}

#coinchase .vakje7 {
    grid-area: vakje7;
}

#coinchase .vakje8 {
    grid-area: vakje8;
}

#coinchase .vakje9 {
    grid-area: vakje9;
}

#coinchase .vakje10 {
    grid-area: vakje10;
}

#coinchase .vakje11 {
    grid-area: vakje11;
}

#coinchase .vakje12 {
    grid-area: vakje12;
}

#coinchase .vakje13 {
    grid-area: vakje13;
}

#coinchase .vakje14 {
    grid-area: vakje14;
}

#coinchase .vakje15 {
    grid-area: vakje15;
}

#coinchase .vakje16 {
    grid-area: vakje16;
}

#coinchase .vakje17 {
    grid-area: vakje17;
}

#coinchase .vakje18 {
    grid-area: vakje18;
}

#coinchase .vakje19 {
    grid-area: vakje19;
}

#coinchase .vakje20 {
    grid-area: vakje20;
}

#coinchase .vakje21 {
    grid-area: vakje21;
}

#coinchase .vakje22 {
    grid-area: vakje22;
}

#coinchase .vakje23 {
    grid-area: vakje23;
}

#coinchase .vakje24 {
    grid-area: vakje24;
}

#coinchase .vakje25 {
    grid-area: vakje25;
}

#coinchase .vakje26 {
    grid-area: vakje26;
}

#coinchase .vakje27 {
    grid-area: vakje27;
}

#coinchase .vakje28 {
    grid-area: vakje28;
}

#coinchase .vakje29 {
    grid-area: vakje29;
}

#coinchase .vakje30 {
    grid-area: vakje30;
}

#coinchase .vakje31 {
    grid-area: vakje31;
}

#coinchase .vakje32 {
    grid-area: vakje32;
}

#coinchase .vakje33 {
    grid-area: vakje33;
}

#coinchase .vakje34 {
    grid-area: vakje34;
}

#coinchase .vakje35 {
    grid-area: vakje35;
}

#coinchase .vakje36 {
    grid-area: vakje36;
}

#coinchase .vakje37 {
    grid-area: vakje37;
}

#coinchase .vakje38 {
    grid-area: vakje38;
}

#coinchase .vakje39 {
    grid-area: vakje39;
}

#coinchase .vakje40 {
    grid-area: vakje40;
}

#coinchase .vakje41 {
    grid-area: vakje41;
}

#coinchase .vakje42 {
    grid-area: vakje42;
}

#coinchase .vakje43 {
    grid-area: vakje43;
}

#coinchase .vakje44 {
    grid-area: vakje44;
}

#coinchase .vakje45 {
    grid-area: vakje45;
}

#coinchase .vakje46 {
    grid-area: vakje46;
}

#coinchase .vakje47 {
    grid-area: vakje47;
}

#coinchase .vakje48 {
    grid-area: vakje48;
}

#coinchase .vakje49 {
    grid-area: vakje49;
}

#coinchase .vakje50 {
    grid-area: vakje50;
}

#coinchase .vakje51 {
    grid-area: vakje51;
}

#coinchase .vakje52 {
    grid-area: vakje52;
}

#coinchase .vakje53 {
    grid-area: vakje53;
}

#coinchase .vakje54 {
    grid-area: vakje54;
}

#coinchase .vakje55 {
    grid-area: vakje55;
}

#coinchase .vakje56 {
    grid-area: vakje56;
}

#coinchase .vakje57 {
    grid-area: vakje57;
}

#coinchase .vakje58 {
    grid-area: vakje58;
}

#coinchase .vakje59 {
    grid-area: vakje59;
}

#coinchase .vakje60 {
    grid-area: vakje60;
}

#coinchase .vakje61 {
    grid-area: vakje61;
}

#coinchase .vakje62 {
    grid-area: vakje62;
}

#coinchase .vakje63 {
    grid-area: vakje63;
}

#coinchase .vakje64 {
    grid-area: vakje64;
}

#coinchase .flipphone {
    display: none;
}

#coinchase .main {
    box-shadow: none;
}

@media screen and (max-width:1000px) and (orientation: landscape) {
    #coinchase .box>div>img {
        width: 40px;
        border-radius: 10px;
    }

    #coinchase .container {
        display: grid;
        min-width: 100vw;
        min-height: 100vh;

        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 60px 50px 60px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "header header header header header header header header header header header header header"
            "header header header header header header header header header header header header header"
            "main main main main main main main main main main main main main"
            "main main main main main main main main main main main main main"
            "main main main main main main main main main main main main main"
            "main main main main main main main main main main main main main"
            "main main main main main main main main main main main main main"
            "main main main main main main main main main main main main main"
            "main main main main main main main main main main main main main"
            "main main main main main main main main main main main main main"
            "main main main main main main main main main main main main main"
            "main main main main main main main main main main main main main"
            "main main main main main main main main main main main main main"
            "main main main main main main main main main main main main main";

    }

    #coinchase .gamecontainer {
        display: grid;
        grid-template-columns: 0.5fr 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0, 5fr 0.5fr;
        grid-template-rows: 0.5fr 1fr 1fr 1fr 1fr;
        grid-auto-columns: 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        box-shadow: none;
        grid-template-areas:
            ". refresh refresh refresh . titlecoin titlecoin titlecoin title . resetscore resetscore placeholder ."
            ". . box box box box box box box box box box . ."
            ". . box box box box box box box box box box . ."
            ". . box box box box box box box box box box . ."
            ". . player1Highscore . start start start start start start bot player2Highscore . . .";
    }

    .button {
        font-size: 0.4em;
    }

    #coinchase div>.player1image {
        width: 20px;
        position: absolute;
        z-index: 0;
        margin: 5px;
        user-select: none;
    }

    #coinchase div>.player2image {
        width: 20px;
        position: absolute;
        z-index: 0;
        margin: 5px;
        user-select: none;
    }

    #coinchase .youwin {
        font-size: 30px;
        height: 40px;
        border-radius: 10px;
    }

    #coinchase #placeholder {
        width: 40px;
        font-size: 25px;
        height: 40px;
        margin-left: -50px;
    }

    #coinchase .titlecoin {
        font-size: 30px;
        height: 40px;
        border-radius: 10px;
        width: 200px;
    }

    #coinchase .refresh {
        font-size: 20px;
        height: 40px;
        border-radius: 10px;
    }

    #coinchase #player1Highscore {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        font-size: 25px;
        margin-top: 20px;
    }

    #coinchase #player2Highscore {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        font-size: 25px;
    }

    #coinchase .start {
        margin-top: 10px;
    }

    #coinchase .box {
        width: 90%;
        height: 95%;
        margin-left: 30px;
    }

    #coinchase .bot {
        margin-top: 30px;
    }

    #coinchase #ownname {
        margin-top: 30px;
    }

    #coinchase .header {
        box-shadow: none;
    }

    #coinchase .header .button {
        border-bottom: 5px solid var(--black);
    }

    #coinchase div .button.empty {
        border: none;
    }

    #coinchase .main {
        box-shadow: none;
    }

    #coinchase #resetscore {
        margin-top: -328px;
        margin-left: -200px;
    }
}

@media screen and (max-width: 500px) and (orientation: portrait) {
    #coinchase .gamecontainer {
        display: none;
    }

    #coinchase .container {
        display: none;
    }

    #coinchase .flipphone {
        display: block;
        width: 250px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 200px;
    }

    #coinchase {
        background-color: black;
    }
}

/* end coinchase */

/* about page */
#aboutpage .main {
    max-width: none;
    min-width: 100%;
}


#aboutpage .main .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 10px;

}

#aboutpage .main .text p {
    max-width: 70%;
    font-family: 'aharoni';
    font-size: 2em;
    text-align: left;
    margin: 10px;
    color: white;
}

#aboutpage .main h1 {
    font-family: 'Casino';
    font-size: 3em;
    text-align: center;
    margin: 10px;
    color: white;

}


/* end about page */

/* memorygame */
/* #memmoryGamePage .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 60px 60px 60px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "header header header header header header header header header header header header header"
        "header header header header header header header header header header header header header"
        "header header header header header header header header header header header header header"
        "sidebar-left sidebar-left main main main main main main main main main main main"
        "sidebar-left sidebar-left main main main main main main main main main main main"
        "sidebar-left sidebar-left main main main main main main main main main main main"
        "sidebar-left sidebar-left main main main main main main main main main main main"
        "sidebar-left sidebar-left main main main main main main main main main main main"
        "sidebar-left sidebar-left main main main main main main main main main main main"
        "sidebar-left sidebar-left main main main main main main main main main main main"
        "sidebar-left sidebar-left main main main main main main main main main main main"
        "sidebar-left sidebar-left main main main main main main main main main main main"
        "sidebar-left sidebar-left main main main main main main main main main main main"
        "sidebar-left sidebar-left main main main main main main main main main main main"
        "footer footer footer footer footer footer footer footer footer footer footer footer footer";

    min-height: 100vh;
} */
#memmoryGamePage .main {
    grid-area: main;
    box-sizing: border-box;
    height: fit-content;
    background-image: url(../assets/memory/backgrounds/background5.webp);
    background-size: cover;
    border-radius: 25px;
    border: 20px solid var(--space-cadet);
    box-shadow: 21px 20px 20px 5px rgba(0, 0, 0, 0.5);
    margin-top: 30px;
}

/* #memmoryGamePage .main {


    width: 1000px;
    

} */

::-webkit-scrollbar {
    display: none;
}

/* gameGraphics */
#memmoryGamePage #startmenu {
    height: 450px;
    width: 400px;
    background-color: var(--space-cadet-rgba);
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 35%;
    margin-top: 50px;
    border-radius: 25px;
    border: 20px solid black;
    box-shadow: 21px 20px 20px 5px rgba(0, 0, 0, 0.5);
}

#memmoryGamePage #startbutton {
    height: 100px;
    width: 300px;
    background-color: white;
    border-radius: 25px;
    border: 5px solid var(--space-cadet);
    margin-left: 50px;
    box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.5);
    justify-content: center;
}

#memmoryGamePage #tekstStart {
    font-family: 'Casino';
    font-size: 30px;
    text-align: center;
    margin-top: 25px;
}

#memmoryGamePage #logoGame {
    height: auto;
    width: 250px;
    align-self: center;
}


#memmoryGamePage #textbackTostart {
    font-family: 'Casino';
    font-size: 25px;
    text-align: center;
    margin-top: 10px;
    background-color: rgb(255, 255, 255);

}


#memmoryGamePage #backTostart {
    height: 60px;
    width: 210px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    border: 5px solid var(--space-cadet);
    justify-content: center;
    text-align: center;
    font-size: 30px;
    margin-right: 10px;
    margin-left: 10px;
}

/* cards */
#memmoryGamePage .memoryCard {
    /* height: 136px;
    width: 96px; */
    margin-top: 30px;
    margin-left: 14px;
    border-radius: 5px;
    height: 1%;
    width: 7%;

}

#memmoryGamePage .removeCard {
    background-color: var(--space-cadet);
    /* height: 136px;
    width: 96px; */
    height: 1%;
    width: 7%;
    margin-top: 30px;
    margin-left: 14px;
    border-radius: 5px;
}

/* cards */


/* score */

#memmoryGamePage #scoreboard {
    height: 50px;
    width: 200px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    border: 5px solid var(--space-cadet);
    margin-top: 0px;
    margin-right: 10px;
}

#memmoryGamePage #buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 10px;
    justify-content: center;

}

#memmoryGamePage .main .gameContainer #klikcounter {
    font-family: 'Casino';
    font-size: 30px;
    text-align: center;
    height: 50px;
    width: 200px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    border: 5px solid var(--space-cadet);
    margin-right: 10px;
    justify-content: center;
}

#memmoryGamePage .main .gameContainer #klikcounter #tekst-clicks-left {
    font-family: 'Casino';
    font-size: 30px;
    text-align: center;
    margin-top: 10px;
    background-color: rgb(255, 255, 255);
}

#memmoryGamePage .main .gameContainer #highScorebox {
    height: 50px;
    width: 200px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    border: 5px solid var(--space-cadet);
    justify-content: center;
    margin-right: 10px;

}

#memmoryGamePage .main .gameContainer #highScorebox #highScoreTekst {
    font-family: 'Casino';
    font-size: 30px;
    text-align: center;
    margin-top: 10px;
    background-color: rgb(255, 255, 255);
}

/* score */

#memmoryGamePage .main .gameContainer #scoreboard .tekstscore {
    font-family: 'Casino';
    font-size: 30px;
    text-align: right;
    margin-top: -45px;
    margin-right: 80px;

}

#memmoryGamePage #casinochip {
    height: 50px;
    width: auto;
    justify-content: left;
    margin-right: 148px;
}


#memmoryGamePage .main .title {
    color: var(--cinnabar);
}

#memmoryGamePage .main p {
    text-align: center;
    font-family: 'Casino';
    margin-top: 0px;
    font-size: 3em;
}

@media screen and ((max-width: 768px) and (max-height: 920px)) and ((orientation: landscape) or (orientation: portrait)) {
    #memmoryGamePage .main {
        grid-area: main;
        box-sizing: border-box;
        height: fit-content;
        width: fit-content;
        background-image: url(../assets/memory/backgrounds/background5.webp);
        background-size: cover;
        border-radius: 25px;
        border: 20px solid var(--space-cadet);
        box-shadow: 21px 20px 20px 5px rgba(0, 0, 0, 0.5);
        margin-top: 30px;
    }

    #memmoryGamePage .main .title {
        color: var(--cinnabar);
    }

    #memmoryGamePage .main p {
        text-align: center;
        font-family: 'Casino';
        margin-top: 0px;
        font-size: 3em;
    }

    #memmoryGamePage #startmenu {
        height: 350px;
        width: 200px;
        background-color: var(--space-cadet-rgba);
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 50px;
        margin-left: 10%;
        border-radius: 25px;
        border: 20px solid black;
        box-shadow: 21px 20px 20px 5px rgba(0, 0, 0, 0.5);
    }

    #memmoryGamePage #backTostart {
        height: 60px;
        width: 210px;
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        border: 5px solid var(--space-cadet);
        justify-content: center;
        text-align: center;
        font-size: 30px;
        margin-right: 10px;
        margin-left: 0px;
    }

    #memmoryGamePage #startbutton {
        height: 100px;
        width: 100px;
        background-color: white;
        border-radius: 25px;
        border: 5px solid var(--space-cadet);
        box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.5);
        justify-content: center;
    }

    #memmoryGamePage .main .gameContainer #klikcounter {
        font-family: 'Casino';
        font-size: 30px;
        text-align: center;
        height: 50px;
        width: 200px;
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        border: 5px solid var(--space-cadet);
        margin-right: 10px;
        justify-content: center;
    }

    #memmoryGamePage .main .gameContainer #klikcounter #tekst-clicks-left {
        font-family: 'Casino';
        font-size: 30px;
        text-align: center;
        margin-top: 10px;
        background-color: rgb(255, 255, 255);
    }

    #memmoryGamePage .main .gameContainer #highScorebox {
        height: 50px;
        width: 200px;
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        border: 5px solid var(--space-cadet);
        justify-content: center;
        margin-right: 10px;

    }

    #memmoryGamePage .main .gameContainer #highScorebox #highScoreTekst {
        font-family: 'Casino';
        font-size: 30px;
        text-align: center;
        margin: 0px;
    }
}

/* memory */