@font-face {
    font-family: 'Game Over';
    src: url('fonts/Game-Over.eot');
    src: url('fonts/Game-Over.eot?#iefix') format('embedded-opentype'),
        url('fonts/Game-Over.woff2') format('woff2'),
        url('fonts/Game-Over.woff') format('woff'),
        url('fonts/Game-Over.ttf') format('truetype'),
        url('fonts/Game-Over.svg#Game-Over') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gameplay';
    src: url('fonts/Gameplay.eot');
    src: url('fonts/Gameplay.eot?#iefix') format('embedded-opentype'),
        url('fonts/Gameplay.woff2') format('woff2'),
        url('fonts/Gameplay.woff') format('woff'),
        url('fonts/Gameplay.ttf') format('truetype'),
        url('fonts/Gameplay.svg#Gameplay') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MUSICNET';
    src: url('fonts/MUSICNET.eot');
    src: url('fonts/MUSICNET.eot?#iefix') format('embedded-opentype'),
        url('fonts/MUSICNET.woff2') format('woff2'),
        url('fonts/MUSICNET.woff') format('woff'),
        url('fonts/MUSICNET.ttf') format('truetype'),
        url('fonts/MUSICNET.svg#MUSICNET') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Games';
    src: url('fonts/Games-Italic.eot');
    src: url('fonts/Games-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Games-Italic.woff2') format('woff2'),
        url('fonts/Games-Italic.woff') format('woff'),
        url('fonts/Games-Italic.ttf') format('truetype'),
        url('fonts/Games-Italic.svg#Games-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Games';
    src: url('fonts/Games-Regular.eot');
    src: url('fonts/Games-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Games-Regular.woff2') format('woff2'),
        url('fonts/Games-Regular.woff') format('woff'),
        url('fonts/Games-Regular.ttf') format('truetype'),
        url('fonts/Games-Regular.svg#Games-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gamer Station';
    src: url('fonts/GamerStation-Regular.eot');
    src: url('fonts/GamerStation-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/GamerStation-Regular.woff2') format('woff2'),
        url('fonts/GamerStation-Regular.woff') format('woff'),
        url('fonts/GamerStation-Regular.ttf') format('truetype'),
        url('fonts/GamerStation-Regular.svg#GamerStation-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Extrude';
    src: url('fonts/GamerStation-Extrude.eot');
    src: url('fonts/GamerStation-Extrude.eot?#iefix') format('embedded-opentype'),
        url('fonts/GamerStation-Extrude.woff2') format('woff2'),
        url('fonts/GamerStation-Extrude.woff') format('woff'),
        url('fonts/GamerStation-Extrude.ttf') format('truetype'),
        url('fonts/GamerStation-Extrude.svg#GamerStation-Extrude') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Game Over';
    src: url('fonts/GameOverRegular.eot');
    src: url('fonts/GameOverRegular.eot?#iefix') format('embedded-opentype'),
        url('fonts/GameOverRegular.woff2') format('woff2'),
        url('fonts/GameOverRegular.woff') format('woff'),
        url('fonts/GameOverRegular.ttf') format('truetype'),
        url('fonts/GameOverRegular.svg#GameOverRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created';
    src: url('fonts/KGTeacherCreated.eot');
    src: url('fonts/KGTeacherCreated.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreated.woff2') format('woff2'),
        url('fonts/KGTeacherCreated.woff') format('woff'),
        url('fonts/KGTeacherCreated.ttf') format('truetype'),
        url('fonts/KGTeacherCreated.svg#KGTeacherCreated') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Dot 4Lined';
    src: url('fonts/KGTeacherCreatedDot4Lined.eot');
    src: url('fonts/KGTeacherCreatedDot4Lined.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedDot4Lined.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedDot4Lined.woff') format('woff'),
        url('fonts/KGTeacherCreatedDot4Lined.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedDot4Lined.svg#KGTeacherCreatedDot4Lined') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Boxes';
    src: url('fonts/KGTeacherCreatedBoxes.eot');
    src: url('fonts/KGTeacherCreatedBoxes.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedBoxes.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedBoxes.woff') format('woff'),
        url('fonts/KGTeacherCreatedBoxes.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedBoxes.svg#KGTeacherCreatedBoxes') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Dotted';
    src: url('fonts/KGTeacherCreatedDotted.eot');
    src: url('fonts/KGTeacherCreatedDotted.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedDotted.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedDotted.woff') format('woff'),
        url('fonts/KGTeacherCreatedDotted.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedDotted.svg#KGTeacherCreatedDotted') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Arrows Lined';
    src: url('fonts/KGTeacherCreatedArrowsLined.eot');
    src: url('fonts/KGTeacherCreatedArrowsLined.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedArrowsLined.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedArrowsLined.woff') format('woff'),
        url('fonts/KGTeacherCreatedArrowsLined.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedArrowsLined.svg#KGTeacherCreatedArrowsLined') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Star Dotted';
    src: url('fonts/KGTeacherCreatedStarDotted.eot');
    src: url('fonts/KGTeacherCreatedStarDotted.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedStarDotted.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedStarDotted.woff') format('woff'),
        url('fonts/KGTeacherCreatedStarDotted.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedStarDotted.svg#KGTeacherCreatedStarDotted') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Outline Dot';
    src: url('fonts/KGTeacherCreatedOutlineDot.eot');
    src: url('fonts/KGTeacherCreatedOutlineDot.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedOutlineDot.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedOutlineDot.woff') format('woff'),
        url('fonts/KGTeacherCreatedOutlineDot.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedOutlineDot.svg#KGTeacherCreatedOutlineDot') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Outline';
    src: url('fonts/KGTeacherCreatedOutline.eot');
    src: url('fonts/KGTeacherCreatedOutline.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedOutline.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedOutline.woff') format('woff'),
        url('fonts/KGTeacherCreatedOutline.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedOutline.svg#KGTeacherCreatedOutline') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Arrows';
    src: url('fonts/KGTeacherCreatedArrows.eot');
    src: url('fonts/KGTeacherCreatedArrows.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedArrows.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedArrows.woff') format('woff'),
        url('fonts/KGTeacherCreatedArrows.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedArrows.svg#KGTeacherCreatedArrows') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Star Arrows';
    src: url('fonts/KGTeacherCreatedStarArrows.eot');
    src: url('fonts/KGTeacherCreatedStarArrows.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedStarArrows.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedStarArrows.woff') format('woff'),
        url('fonts/KGTeacherCreatedStarArrows.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedStarArrows.svg#KGTeacherCreatedStarArrows') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Outline 3';
    src: url('fonts/KGTeacherCreatedOutline3.eot');
    src: url('fonts/KGTeacherCreatedOutline3.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedOutline3.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedOutline3.woff') format('woff'),
        url('fonts/KGTeacherCreatedOutline3.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedOutline3.svg#KGTeacherCreatedOutline3') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Chunky';
    src: url('fonts/KGTeacherCreatedChunky.eot');
    src: url('fonts/KGTeacherCreatedChunky.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedChunky.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedChunky.woff') format('woff'),
        url('fonts/KGTeacherCreatedChunky.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedChunky.svg#KGTeacherCreatedChunky') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Lined';
    src: url('fonts/KGTeacherCreatedLined.eot');
    src: url('fonts/KGTeacherCreatedLined.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedLined.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedLined.woff') format('woff'),
        url('fonts/KGTeacherCreatedLined.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedLined.svg#KGTeacherCreatedLined') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Lines';
    src: url('fonts/KGTeacherCreatedLines.eot');
    src: url('fonts/KGTeacherCreatedLines.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedLines.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedLines.woff') format('woff'),
        url('fonts/KGTeacherCreatedLines.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedLines.svg#KGTeacherCreatedLines') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Boxed';
    src: url('fonts/KGTeacherCreatedBoxed.eot');
    src: url('fonts/KGTeacherCreatedBoxed.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedBoxed.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedBoxed.woff') format('woff'),
        url('fonts/KGTeacherCreatedBoxed.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedBoxed.svg#KGTeacherCreatedBoxed') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Dot Lined';
    src: url('fonts/KGTeacherCreatedDotLined.eot');
    src: url('fonts/KGTeacherCreatedDotLined.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedDotLined.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedDotLined.woff') format('woff'),
        url('fonts/KGTeacherCreatedDotLined.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedDotLined.svg#KGTeacherCreatedDotLined') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created BubbleDot';
    src: url('fonts/KGTeacherCreatedBubbleDot.eot');
    src: url('fonts/KGTeacherCreatedBubbleDot.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedBubbleDot.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedBubbleDot.woff') format('woff'),
        url('fonts/KGTeacherCreatedBubbleDot.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedBubbleDot.svg#KGTeacherCreatedBubbleDot') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Polkadot';
    src: url('fonts/KGTeacherCreatedPolkadot.eot');
    src: url('fonts/KGTeacherCreatedPolkadot.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedPolkadot.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedPolkadot.woff') format('woff'),
        url('fonts/KGTeacherCreatedPolkadot.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedPolkadot.svg#KGTeacherCreatedPolkadot') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Outlined';
    src: url('fonts/KGTeacherCreatedOutlined.eot');
    src: url('fonts/KGTeacherCreatedOutlined.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedOutlined.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedOutlined.woff') format('woff'),
        url('fonts/KGTeacherCreatedOutlined.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedOutlined.svg#KGTeacherCreatedOutlined') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Dashed';
    src: url('fonts/KGTeacherCreatedDashed.eot');
    src: url('fonts/KGTeacherCreatedDashed.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedDashed.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedDashed.woff') format('woff'),
        url('fonts/KGTeacherCreatedDashed.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedDashed.svg#KGTeacherCreatedDashed') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Dash Lined';
    src: url('fonts/KGTeacherCreatedDashLined.eot');
    src: url('fonts/KGTeacherCreatedDashLined.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedDashLined.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedDashLined.woff') format('woff'),
        url('fonts/KGTeacherCreatedDashLined.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedDashLined.svg#KGTeacherCreatedDashLined') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Star Lined';
    src: url('fonts/KGTeacherCreatedStarLined.eot');
    src: url('fonts/KGTeacherCreatedStarLined.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedStarLined.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedStarLined.woff') format('woff'),
        url('fonts/KGTeacherCreatedStarLined.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedStarLined.svg#KGTeacherCreatedStarLined') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Outline 2';
    src: url('fonts/KGTeacherCreatedOutline2.eot');
    src: url('fonts/KGTeacherCreatedOutline2.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedOutline2.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedOutline2.woff') format('woff'),
        url('fonts/KGTeacherCreatedOutline2.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedOutline2.svg#KGTeacherCreatedOutline2') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Thinner';
    src: url('fonts/KGTeacherCreatedThinner.eot');
    src: url('fonts/KGTeacherCreatedThinner.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedThinner.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedThinner.woff') format('woff'),
        url('fonts/KGTeacherCreatedThinner.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedThinner.svg#KGTeacherCreatedThinner') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Thin Lined';
    src: url('fonts/KGTeacherCreatedThinLined.eot');
    src: url('fonts/KGTeacherCreatedThinLined.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedThinLined.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedThinLined.woff') format('woff'),
        url('fonts/KGTeacherCreatedThinLined.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedThinLined.svg#KGTeacherCreatedThinLined') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created';
    src: url('fonts/KGTeacherCreatedThin.eot');
    src: url('fonts/KGTeacherCreatedThin.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedThin.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedThin.woff') format('woff'),
        url('fonts/KGTeacherCreatedThin.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedThin.svg#KGTeacherCreatedThin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Thin 2Lined';
    src: url('fonts/KGTeacherCreatedThin2Lined.eot');
    src: url('fonts/KGTeacherCreatedThin2Lined.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedThin2Lined.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedThin2Lined.woff') format('woff'),
        url('fonts/KGTeacherCreatedThin2Lined.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedThin2Lined.svg#KGTeacherCreatedThin2Lined') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KG Teacher Created Star Lined 2';
    src: url('fonts/KGTeacherCreatedStarLined2.eot');
    src: url('fonts/KGTeacherCreatedStarLined2.eot?#iefix') format('embedded-opentype'),
        url('fonts/KGTeacherCreatedStarLined2.woff2') format('woff2'),
        url('fonts/KGTeacherCreatedStarLined2.woff') format('woff'),
        url('fonts/KGTeacherCreatedStarLined2.ttf') format('truetype'),
        url('fonts/KGTeacherCreatedStarLined2.svg#KGTeacherCreatedStarLined2') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Super Meatball';
    src: url('fonts/SuperMeatball.eot');
    src: url('fonts/SuperMeatball.eot?#iefix') format('embedded-opentype'),
        url('fonts/SuperMeatball.woff2') format('woff2'),
        url('fonts/SuperMeatball.woff') format('woff'),
        url('fonts/SuperMeatball.ttf') format('truetype'),
        url('fonts/SuperMeatball.svg#SuperMeatball') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Megina';
    src: url('fonts/MeginaRegular.eot');
    src: url('fonts/MeginaRegular.eot?#iefix') format('embedded-opentype'),
        url('fonts/MeginaRegular.woff2') format('woff2'),
        url('fonts/MeginaRegular.woff') format('woff'),
        url('fonts/MeginaRegular.ttf') format('truetype'),
        url('fonts/MeginaRegular.svg#MeginaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Andera Ninefold DEMO VERSION';
    src: url('fonts/AnderaNinefoldDEMOVERSION.eot');
    src: url('fonts/AnderaNinefoldDEMOVERSION.eot?#iefix') format('embedded-opentype'),
        url('fonts/AnderaNinefoldDEMOVERSION.woff2') format('woff2'),
        url('fonts/AnderaNinefoldDEMOVERSION.woff') format('woff'),
        url('fonts/AnderaNinefoldDEMOVERSION.ttf') format('truetype'),
        url('fonts/AnderaNinefoldDEMOVERSION.svg#AnderaNinefoldDEMOVERSION') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Andera Ninefold DEMO VERSION';
    src: url('fonts/AnderaNinefoldDEMOVERSION_1.eot');
    src: url('fonts/AnderaNinefoldDEMOVERSION_1.eot?#iefix') format('embedded-opentype'),
        url('fonts/AnderaNinefoldDEMOVERSION_1.woff2') format('woff2'),
        url('fonts/AnderaNinefoldDEMOVERSION_1.woff') format('woff'),
        url('fonts/AnderaNinefoldDEMOVERSION_1.ttf') format('truetype'),
        url('fonts/AnderaNinefoldDEMOVERSION_1.svg#AnderaNinefoldDEMOVERSION') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'PHONIXEA';
    src: url('fonts/PHONIXEARegular.eot');
    src: url('fonts/PHONIXEARegular.eot?#iefix') format('embedded-opentype'),
        url('fonts/PHONIXEARegular.woff2') format('woff2'),
        url('fonts/PHONIXEARegular.woff') format('woff'),
        url('fonts/PHONIXEARegular.ttf') format('truetype'),
        url('fonts/PHONIXEARegular.svg#PHONIXEARegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Indie Film Festival';
    src: url('fonts/IndieFilmFestival.eot');
    src: url('fonts/IndieFilmFestival.eot?#iefix') format('embedded-opentype'),
        url('fonts/IndieFilmFestival.woff2') format('woff2'),
        url('fonts/IndieFilmFestival.woff') format('woff'),
        url('fonts/IndieFilmFestival.ttf') format('truetype'),
        url('fonts/IndieFilmFestival.svg#IndieFilmFestival') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Super Popstar';
    src: url('fonts/SuperPopstar-Regular.eot');
    src: url('fonts/SuperPopstar-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/SuperPopstar-Regular.woff2') format('woff2'),
        url('fonts/SuperPopstar-Regular.woff') format('woff'),
        url('fonts/SuperPopstar-Regular.ttf') format('truetype'),
        url('fonts/SuperPopstar-Regular.svg#SuperPopstar-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Showpop';
    src: url('fonts/Showpop.eot');
    src: url('fonts/Showpop.eot?#iefix') format('embedded-opentype'),
        url('fonts/Showpop.woff2') format('woff2'),
        url('fonts/Showpop.woff') format('woff'),
        url('fonts/Showpop.ttf') format('truetype'),
        url('fonts/Showpop.svg#Showpop') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'La Marmelade aux Fruits';
    src: url('fonts/LaMarmeladeauxFruits.eot');
    src: url('fonts/LaMarmeladeauxFruits.eot?#iefix') format('embedded-opentype'),
        url('fonts/LaMarmeladeauxFruits.woff2') format('woff2'),
        url('fonts/LaMarmeladeauxFruits.woff') format('woff'),
        url('fonts/LaMarmeladeauxFruits.ttf') format('truetype'),
        url('fonts/LaMarmeladeauxFruits.svg#LaMarmeladeauxFruits') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sabocan';
    src: url('fonts/Sabocan.eot');
    src: url('fonts/Sabocan.eot?#iefix') format('embedded-opentype'),
        url('fonts/Sabocan.woff2') format('woff2'),
        url('fonts/Sabocan.woff') format('woff'),
        url('fonts/Sabocan.ttf') format('truetype'),
        url('fonts/Sabocan.svg#Sabocan') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cheese Durian';
    src: url('fonts/CheeseDurian.eot');
    src: url('fonts/CheeseDurian.eot?#iefix') format('embedded-opentype'),
        url('fonts/CheeseDurian.woff2') format('woff2'),
        url('fonts/CheeseDurian.woff') format('woff'),
        url('fonts/CheeseDurian.ttf') format('truetype'),
        url('fonts/CheeseDurian.svg#CheeseDurian') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cloud Sketch';
    src: url('fonts/CloudSketch.eot');
    src: url('fonts/CloudSketch.eot?#iefix') format('embedded-opentype'),
        url('fonts/CloudSketch.woff2') format('woff2'),
        url('fonts/CloudSketch.woff') format('woff'),
        url('fonts/CloudSketch.ttf') format('truetype'),
        url('fonts/CloudSketch.svg#CloudSketch') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Midnight Angel';
    src: url('fonts/MidnightAngel.eot');
    src: url('fonts/MidnightAngel.eot?#iefix') format('embedded-opentype'),
        url('fonts/MidnightAngel.woff2') format('woff2'),
        url('fonts/MidnightAngel.woff') format('woff'),
        url('fonts/MidnightAngel.ttf') format('truetype'),
        url('fonts/MidnightAngel.svg#MidnightAngel') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Super Midnight';
    src: url('fonts/SuperMidnight.eot');
    src: url('fonts/SuperMidnight.eot?#iefix') format('embedded-opentype'),
        url('fonts/SuperMidnight.woff2') format('woff2'),
        url('fonts/SuperMidnight.woff') format('woff'),
        url('fonts/SuperMidnight.ttf') format('truetype'),
        url('fonts/SuperMidnight.svg#SuperMidnight') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rush Driver';
    src: url('fonts/RushDriver-Italic.eot');
    src: url('fonts/RushDriver-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/RushDriver-Italic.woff2') format('woff2'),
        url('fonts/RushDriver-Italic.woff') format('woff'),
        url('fonts/RushDriver-Italic.ttf') format('truetype'),
        url('fonts/RushDriver-Italic.svg#RushDriver-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Super Mellow';
    src: url('fonts/SuperMellow-Regular.eot');
    src: url('fonts/SuperMellow-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/SuperMellow-Regular.woff2') format('woff2'),
        url('fonts/SuperMellow-Regular.woff') format('woff'),
        url('fonts/SuperMellow-Regular.ttf') format('truetype'),
        url('fonts/SuperMellow-Regular.svg#SuperMellow-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Loving Angel Personal Use';
    src: url('fonts/LovingAngelPersonalUse.eot');
    src: url('fonts/LovingAngelPersonalUse.eot?#iefix') format('embedded-opentype'),
        url('fonts/LovingAngelPersonalUse.woff2') format('woff2'),
        url('fonts/LovingAngelPersonalUse.woff') format('woff'),
        url('fonts/LovingAngelPersonalUse.ttf') format('truetype'),
        url('fonts/LovingAngelPersonalUse.svg#LovingAngelPersonalUse') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Retro Heart You';
    src: url('fonts/RetroHeartYouRegular.eot');
    src: url('fonts/RetroHeartYouRegular.eot?#iefix') format('embedded-opentype'),
        url('fonts/RetroHeartYouRegular.woff2') format('woff2'),
        url('fonts/RetroHeartYouRegular.woff') format('woff'),
        url('fonts/RetroHeartYouRegular.ttf') format('truetype'),
        url('fonts/RetroHeartYouRegular.svg#RetroHeartYouRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Punk Militia Spain';
    src: url('fonts/PunkMilitiaSpain.eot');
    src: url('fonts/PunkMilitiaSpain.eot?#iefix') format('embedded-opentype'),
        url('fonts/PunkMilitiaSpain.woff2') format('woff2'),
        url('fonts/PunkMilitiaSpain.woff') format('woff'),
        url('fonts/PunkMilitiaSpain.ttf') format('truetype'),
        url('fonts/PunkMilitiaSpain.svg#PunkMilitiaSpain') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ice Cold LH Solid';
    src: url('fonts/IceColdLHSolid.eot');
    src: url('fonts/IceColdLHSolid.eot?#iefix') format('embedded-opentype'),
        url('fonts/IceColdLHSolid.woff2') format('woff2'),
        url('fonts/IceColdLHSolid.woff') format('woff'),
        url('fonts/IceColdLHSolid.ttf') format('truetype'),
        url('fonts/IceColdLHSolid.svg#IceColdLHSolid') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ghost Bois Friendly';
    src: url('fonts/GhostBoisFriendly.eot');
    src: url('fonts/GhostBoisFriendly.eot?#iefix') format('embedded-opentype'),
        url('fonts/GhostBoisFriendly.woff2') format('woff2'),
        url('fonts/GhostBoisFriendly.woff') format('woff'),
        url('fonts/GhostBoisFriendly.ttf') format('truetype'),
        url('fonts/GhostBoisFriendly.svg#GhostBoisFriendly') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ghost Bois Spooky';
    src: url('fonts/GhostBoisSpooky.eot');
    src: url('fonts/GhostBoisSpooky.eot?#iefix') format('embedded-opentype'),
        url('fonts/GhostBoisSpooky.woff2') format('woff2'),
        url('fonts/GhostBoisSpooky.woff') format('woff'),
        url('fonts/GhostBoisSpooky.ttf') format('truetype'),
        url('fonts/GhostBoisSpooky.svg#GhostBoisSpooky') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ghost Bois Friendly Solid';
    src: url('fonts/GhostBoisFriendlySolid.eot');
    src: url('fonts/GhostBoisFriendlySolid.eot?#iefix') format('embedded-opentype'),
        url('fonts/GhostBoisFriendlySolid.woff2') format('woff2'),
        url('fonts/GhostBoisFriendlySolid.woff') format('woff'),
        url('fonts/GhostBoisFriendlySolid.ttf') format('truetype'),
        url('fonts/GhostBoisFriendlySolid.svg#GhostBoisFriendlySolid') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ghost Bois Spooky Solid';
    src: url('fonts/GhostBoisSpookySolid.eot');
    src: url('fonts/GhostBoisSpookySolid.eot?#iefix') format('embedded-opentype'),
        url('fonts/GhostBoisSpookySolid.woff2') format('woff2'),
        url('fonts/GhostBoisSpookySolid.woff') format('woff'),
        url('fonts/GhostBoisSpookySolid.ttf') format('truetype'),
        url('fonts/GhostBoisSpookySolid.svg#GhostBoisSpookySolid') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FROZENLAND';
    src: url('fonts/FROZENLAND-Regular.eot');
    src: url('fonts/FROZENLAND-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/FROZENLAND-Regular.woff2') format('woff2'),
        url('fonts/FROZENLAND-Regular.woff') format('woff'),
        url('fonts/FROZENLAND-Regular.ttf') format('truetype'),
        url('fonts/FROZENLAND-Regular.svg#FROZENLAND-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BIG Slant Black UltExp';
    src: url('fonts/BIGSlant-UltraWideSlanted.eot');
    src: url('fonts/BIGSlant-UltraWideSlanted.eot?#iefix') format('embedded-opentype'),
        url('fonts/BIGSlant-UltraWideSlanted.woff2') format('woff2'),
        url('fonts/BIGSlant-UltraWideSlanted.woff') format('woff'),
        url('fonts/BIGSlant-UltraWideSlanted.ttf') format('truetype'),
        url('fonts/BIGSlant-UltraWideSlanted.svg#BIGSlant-UltraWideSlanted') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Baleron';
    src: url('fonts/Baleron.eot');
    src: url('fonts/Baleron.eot?#iefix') format('embedded-opentype'),
        url('fonts/Baleron.woff2') format('woff2'),
        url('fonts/Baleron.woff') format('woff'),
        url('fonts/Baleron.ttf') format('truetype'),
        url('fonts/Baleron.svg#Baleron') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arcade Raiders';
    src: url('fonts/ArcadeRaiders.eot');
    src: url('fonts/ArcadeRaiders.eot?#iefix') format('embedded-opentype'),
        url('fonts/ArcadeRaiders.woff2') format('woff2'),
        url('fonts/ArcadeRaiders.woff') format('woff'),
        url('fonts/ArcadeRaiders.ttf') format('truetype'),
        url('fonts/ArcadeRaiders.svg#ArcadeRaiders') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Wild Love';
    src: url('fonts/WildLoveRegular.eot');
    src: url('fonts/WildLoveRegular.eot?#iefix') format('embedded-opentype'),
        url('fonts/WildLoveRegular.woff2') format('woff2'),
        url('fonts/WildLoveRegular.woff') format('woff'),
        url('fonts/WildLoveRegular.ttf') format('truetype'),
        url('fonts/WildLoveRegular.svg#WildLoveRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Beach House';
    src: url('fonts/BeachHouseRegular.eot');
    src: url('fonts/BeachHouseRegular.eot?#iefix') format('embedded-opentype'),
        url('fonts/BeachHouseRegular.woff2') format('woff2'),
        url('fonts/BeachHouseRegular.woff') format('woff'),
        url('fonts/BeachHouseRegular.ttf') format('truetype'),
        url('fonts/BeachHouseRegular.svg#BeachHouseRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Litte Salty';
    src: url('fonts/LitteSalty.eot');
    src: url('fonts/LitteSalty.eot?#iefix') format('embedded-opentype'),
        url('fonts/LitteSalty.woff2') format('woff2'),
        url('fonts/LitteSalty.woff') format('woff'),
        url('fonts/LitteSalty.ttf') format('truetype'),
        url('fonts/LitteSalty.svg#LitteSalty') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Callume';
    src: url('fonts/Callume-Regular.eot');
    src: url('fonts/Callume-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Callume-Regular.woff2') format('woff2'),
        url('fonts/Callume-Regular.woff') format('woff'),
        url('fonts/Callume-Regular.ttf') format('truetype'),
        url('fonts/Callume-Regular.svg#Callume-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rocen';
    src: url('fonts/Rocen-Regular.eot');
    src: url('fonts/Rocen-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Rocen-Regular.woff2') format('woff2'),
        url('fonts/Rocen-Regular.woff') format('woff'),
        url('fonts/Rocen-Regular.ttf') format('truetype'),
        url('fonts/Rocen-Regular.svg#Rocen-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Motague DEMO VERSION';
    src: url('fonts/MotagueDEMOVERSION.eot');
    src: url('fonts/MotagueDEMOVERSION.eot?#iefix') format('embedded-opentype'),
        url('fonts/MotagueDEMOVERSION.woff2') format('woff2'),
        url('fonts/MotagueDEMOVERSION.woff') format('woff'),
        url('fonts/MotagueDEMOVERSION.ttf') format('truetype'),
        url('fonts/MotagueDEMOVERSION.svg#MotagueDEMOVERSION') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Motague DEMO VERSION';
    src: url('fonts/MotagueDEMOVERSION_1.eot');
    src: url('fonts/MotagueDEMOVERSION_1.eot?#iefix') format('embedded-opentype'),
        url('fonts/MotagueDEMOVERSION_1.woff2') format('woff2'),
        url('fonts/MotagueDEMOVERSION_1.woff') format('woff'),
        url('fonts/MotagueDEMOVERSION_1.ttf') format('truetype'),
        url('fonts/MotagueDEMOVERSION_1.svg#MotagueDEMOVERSION') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Amodhev DEMO VERSION';
    src: url('fonts/AmodhevDEMOVERSION.eot');
    src: url('fonts/AmodhevDEMOVERSION.eot?#iefix') format('embedded-opentype'),
        url('fonts/AmodhevDEMOVERSION.woff2') format('woff2'),
        url('fonts/AmodhevDEMOVERSION.woff') format('woff'),
        url('fonts/AmodhevDEMOVERSION.ttf') format('truetype'),
        url('fonts/AmodhevDEMOVERSION.svg#AmodhevDEMOVERSION') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Amodhev DEMO VERSION';
    src: url('fonts/AmodhevDEMOVERSION_1.eot');
    src: url('fonts/AmodhevDEMOVERSION_1.eot?#iefix') format('embedded-opentype'),
        url('fonts/AmodhevDEMOVERSION_1.woff2') format('woff2'),
        url('fonts/AmodhevDEMOVERSION_1.woff') format('woff'),
        url('fonts/AmodhevDEMOVERSION_1.ttf') format('truetype'),
        url('fonts/AmodhevDEMOVERSION_1.svg#AmodhevDEMOVERSION') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Moskice';
    src: url('fonts/Moskice.eot');
    src: url('fonts/Moskice.eot?#iefix') format('embedded-opentype'),
        url('fonts/Moskice.woff2') format('woff2'),
        url('fonts/Moskice.woff') format('woff'),
        url('fonts/Moskice.ttf') format('truetype'),
        url('fonts/Moskice.svg#Moskice') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bosting';
    src: url('fonts/BostingRegular.eot');
    src: url('fonts/BostingRegular.eot?#iefix') format('embedded-opentype'),
        url('fonts/BostingRegular.woff2') format('woff2'),
        url('fonts/BostingRegular.woff') format('woff'),
        url('fonts/BostingRegular.ttf') format('truetype'),
        url('fonts/BostingRegular.svg#BostingRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'you idiot';
    src: url('fonts/youidiot.eot');
    src: url('fonts/youidiot.eot?#iefix') format('embedded-opentype'),
        url('fonts/youidiot.woff2') format('woff2'),
        url('fonts/youidiot.woff') format('woff'),
        url('fonts/youidiot.ttf') format('truetype'),
        url('fonts/youidiot.svg#youidiot') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spooky Bat';
    src: url('fonts/SpookyBat.eot');
    src: url('fonts/SpookyBat.eot?#iefix') format('embedded-opentype'),
        url('fonts/SpookyBat.woff2') format('woff2'),
        url('fonts/SpookyBat.woff') format('woff'),
        url('fonts/SpookyBat.ttf') format('truetype'),
        url('fonts/SpookyBat.svg#SpookyBat') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spooky Midnight';
    src: url('fonts/SpookyMidnight.eot');
    src: url('fonts/SpookyMidnight.eot?#iefix') format('embedded-opentype'),
        url('fonts/SpookyMidnight.woff2') format('woff2'),
        url('fonts/SpookyMidnight.woff') format('woff'),
        url('fonts/SpookyMidnight.ttf') format('truetype'),
        url('fonts/SpookyMidnight.svg#SpookyMidnight') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spooky Girls';
    src: url('fonts/SpookyGirls.eot');
    src: url('fonts/SpookyGirls.eot?#iefix') format('embedded-opentype'),
        url('fonts/SpookyGirls.woff2') format('woff2'),
        url('fonts/SpookyGirls.woff') format('woff'),
        url('fonts/SpookyGirls.ttf') format('truetype'),
        url('fonts/SpookyGirls.svg#SpookyGirls') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Haunted Sunday';
    src: url('fonts/HauntedSunday.eot');
    src: url('fonts/HauntedSunday.eot?#iefix') format('embedded-opentype'),
        url('fonts/HauntedSunday.woff2') format('woff2'),
        url('fonts/HauntedSunday.woff') format('woff'),
        url('fonts/HauntedSunday.ttf') format('truetype'),
        url('fonts/HauntedSunday.svg#HauntedSunday') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spooky Haunted';
    src: url('fonts/SpookyHaunted.eot');
    src: url('fonts/SpookyHaunted.eot?#iefix') format('embedded-opentype'),
        url('fonts/SpookyHaunted.woff2') format('woff2'),
        url('fonts/SpookyHaunted.woff') format('woff'),
        url('fonts/SpookyHaunted.ttf') format('truetype'),
        url('fonts/SpookyHaunted.svg#SpookyHaunted') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* @font-face {
font-family: 'Modric';
src: url('fonts/Modric.eot');
src: url('fonts/Modric.otf') format('truetype'),
     url('fonts/Modric.woff') format('woff'),
     url('fonts/Modric.woff2') format('woff2'),
     url('fonts/Modric.svg#Modric') format('svg');
}

@font-face {
  font-family: 'Royal Acidbath';
  src: url('fonts/RoyalAcidbath.eot');
  src: url('fonts/RoyalAcidbath.eot?#iefix') format('embedded-opentype'),
      url('fonts/RoyalAcidbath.woff2') format('woff2'),
      url('fonts/RoyalAcidbath.woff') format('woff'),
      url('fonts/RoyalAcidbath.svg#RoyalAcidbath') format('svg');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Royal Acid';
  src: url('fonts/RoyalAcid.eot');
  src: url('fonts/RoyalAcid.eot?#iefix') format('embedded-opentype'),
      url('fonts/RoyalAcid.woff2') format('woff2'),
      url('fonts/RoyalAcid.woff') format('woff'),
      url('fonts/RoyalAcid.svg#RoyalAcid') format('svg');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
} */

@font-face {
  font-family: 'Running';
  src: url('fonts/Running-Regular.eot');
  src: url('fonts/Running-Regular.eot?#iefix') format('embedded-opentype'),
      url('fonts/Running-Regular.woff2') format('woff2'),
      url('fonts/Running-Regular.woff') format('woff'),
      url('fonts/Running-Regular.svg#Running-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Running Italic';
  src: url('fonts/Running-Italic.eot');
  src: url('fonts/Running-Italic.eot?#iefix') format('embedded-opentype'),
      url('fonts/Running-Italic.woff2') format('woff2'),
      url('fonts/Running-Italic.woff') format('woff'),
      url('fonts/Running-Italic.svg#Running-Italic') format('svg');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Heavy Heap Rg';
  src: url('fonts/HeavyHeapRg-Regular.eot');
  src: url('fonts/HeavyHeapRg-Regular.eot?#iefix') format('embedded-opentype'),
      url('fonts/HeavyHeapRg-Regular.woff2') format('woff2'),
      url('fonts/HeavyHeapRg-Regular.woff') format('woff'),
      url('fonts/HeavyHeapRg-Regular.ttf') format('truetype'),
      url('fonts/HeavyHeapRg-Regular.svg#HeavyHeapRg-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* @font-face {
  font-family: 'Guyon Gazebo';
  src: url('fonts/GuyonGazebo-Regular.eot');
  src: url('fonts/GuyonGazebo-Regular.eot?#iefix') format('embedded-opentype'),
      url('fonts/GuyonGazebo-Regular.woff2') format('woff2'),
      url('fonts/GuyonGazebo-Regular.woff') format('woff'),
      url('fonts/GuyonGazebo-Regular.ttf') format('truetype'),
      url('fonts/GuyonGazebo-Regular.svg#GuyonGazebo-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mount Hills';
  src: url('fonts/MountHills.eot');
  src: url('fonts/MountHills.eot?#iefix') format('embedded-opentype'),
      url('fonts/MountHills.woff2') format('woff2'),
      url('fonts/MountHills.woff') format('woff'),
      url('fonts/MountHills.ttf') format('truetype'),
      url('fonts/MountHills.svg#MountHills') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
} */

@font-face {
  font-family: 'NeonDisco';
  src: url('fonts/NeonDisco.eot');
  src: url('fonts/NeonDisco.eot?#iefix') format('embedded-opentype'),
      url('fonts/NeonDisco.woff2') format('woff2'),
      url('fonts/NeonDisco.woff') format('woff'),
      url('fonts/NeonDisco.ttf') format('truetype'),
      url('fonts/NeonDisco.svg#NeonDisco') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Powerpuff Girls';
  src: url('fonts/PowerpuffGirls.eot');
  src: url('fonts/PowerpuffGirls.eot?#iefix') format('embedded-opentype'),
      url('fonts/PowerpuffGirls.woff2') format('woff2'),
      url('fonts/PowerpuffGirls.woff') format('woff'),
      url('fonts/PowerpuffGirls.ttf') format('truetype'),
      url('fonts/PowerpuffGirls.svg#PowerpuffGirls') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fifties Movies';
  src: url('fonts/FiftiesMovies.eot');
  src: url('fonts/FiftiesMovies.eot?#iefix') format('embedded-opentype'),
      url('fonts/FiftiesMovies.woff2') format('woff2'),
      url('fonts/FiftiesMovies.woff') format('woff'),
      url('fonts/FiftiesMovies.ttf') format('truetype'),
      url('fonts/FiftiesMovies.svg#FiftiesMovies') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reglisse Back';
  src: url('fonts/Reglisse-Back.eot');
  src: url('fonts/Reglisse-Back.eot?#iefix') format('embedded-opentype'),
      url('fonts/Reglisse-Back.woff2') format('woff2'),
      url('fonts/Reglisse-Back.woff') format('woff'),
      url('fonts/Reglisse-Back.ttf') format('truetype'),
      url('fonts/Reglisse-Back.svg#Reglisse-Back') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reglisse Fill';
  src: url('fonts/Reglisse-Fill.eot');
  src: url('fonts/Reglisse-Fill.eot?#iefix') format('embedded-opentype'),
      url('fonts/Reglisse-Fill.woff2') format('woff2'),
      url('fonts/Reglisse-Fill.woff') format('woff'),
      url('fonts/Reglisse-Fill.ttf') format('truetype'),
      url('fonts/Reglisse-Fill.svg#Reglisse-Fill') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reglisse';
  src: url('fonts/Reglisse.eot');
  src: url('fonts/Reglisse.eot?#iefix') format('embedded-opentype'),
      url('fonts/Reglisse.woff2') format('woff2'),
      url('fonts/Reglisse.woff') format('woff'),
      url('fonts/Reglisse.ttf') format('truetype'),
      url('fonts/Reglisse.svg#Reglisse') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* @font-face {
  font-family: 'Flowers Kingdom';
  src: url('fonts/FlowersKingdom.eot');
  src: url('fonts/FlowersKingdom.eot?#iefix') format('embedded-opentype'),
      url('fonts/FlowersKingdom.woff2') format('woff2'),
      url('fonts/FlowersKingdom.woff') format('woff'),
      url('fonts/FlowersKingdom.ttf') format('truetype'),
      url('fonts/FlowersKingdom.svg#FlowersKingdom') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
font-family: 'Gravity Ultra Light Italic';
src: url('fonts/Modric.eot');
src: url('fonts/Gravity-UltraLightItalic.otf') format('truetype'),
     url('fonts/Gravity-UltraLightItalic.woff') format('woff'),
     url('fonts/Gravity-UltraLightItalic.woff2') format('woff2'),
     url('fonts/Gravity-UltraLightItalic.svg#Gravity-UltraLightItalic') format('svg');
}

@font-face {
font-family: 'Gravity Ultra Light';
src: url('fonts/Gravity-UltraLight.eot');
src: url('fonts/Gravity-UltraLight.otf') format('truetype'),
     url('fonts/Gravity-UltraLight.woff') format('woff'),
     url('fonts/Gravity-UltraLight.woff2') format('woff2'),
     url('fonts/Gravity-UltraLight.svg#Gravity-UltraLight') format('svg');
}

@font-face {
font-family: 'Gravity Light Italic';
src: url('fonts/Gravity-LightItalic.eot');
src: url('fonts/Gravity-LightItalic.otf') format('truetype'),
     url('fonts/Gravity-LightItalic.woff') format('woff'),
     url('fonts/Gravity-LightItalic.woff2') format('woff2'),
     url('fonts/Gravity-LightItalic.svg#Gravity-LightItalic') format('svg');
}

@font-face {
font-family: 'Gravity Light';
src: url('fonts/Gravity-Light.eot');
src: url('fonts/Gravity-Light.otf') format('truetype'),
     url('fonts/Gravity-Light.woff') format('woff'),
     url('fonts/Gravity-Light.woff2') format('woff2'),
     url('fonts/Gravity-Light.svg#Gravity-Light') format('svg');
}

@font-face {
font-family: 'Gravity Book Italic';
src: url('fonts/Gravity-BookItalic.eot');
src: url('fonts/Gravity-BookItalic.otf') format('truetype'),
     url('fonts/Gravity-BookItalic.woff') format('woff'),
     url('fonts/Gravity-BookItalic.woff2') format('woff2'),
     url('fonts/Gravity-BookItalic.svg#Gravity-BookItalic') format('svg');
} */


@font-face {
font-family: 'Blue Highway';
src: url('fonts/BlueHighway-Regular.eot');
src: url('fonts/BlueHighway-Regular.otf') format('truetype'),
     url('fonts/BlueHighway-Regular.woff') format('woff'),
     url('fonts/BlueHighway-Regular.woff2') format('woff2'),
     url('fonts/BlueHighway-Regular.svg#BlueHighway-Regular') format('svg');
}

:root{
  --reglisse-board-size: calc(100vw - 4em);
  --title-font-size: 4.2em;
  --medium-title-font-size: 3em;
  --small-title-font-size: 2em;
  --x-small-title-font-size: 1.7em;
}

.home-body{
  height: max-content;
  overflow-y: auto;
  overflow-x: hidden;
  width: auto;
}
.home-body:has(dialog.opened){
  position: fixed;
  overflow-y: hidden;
}

a{
  color:inherit !important;
  text-decoration: none;
}

h1,
h5,
.tabs label,
.powerpuff-girls{
   font-family: "Powerpuff Girls";
 }

.presection{
  display: grid;
  margin: 58.67px 0 0 0;
  width: auto;
  padding: 48px 56px;
  background: url('images/IMG_2171.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:top;
}

form section{
  padding: 4em 2em;
  text-align: justify;
  width: calc(100% - 4em);
}

body{
  background: #ffe500;
  font-family: 'Blue Highway';
  /* font-family: "Fifties Movies"; */
}

#tech{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
}

.presection h1{
  color: black;
  background: #ffe500;
  height: max-content;
  min-height: 68px;
  width: fit-content;
}
.text-align-c{
  text-align: center;
}
.grid{
  display: grid;
}
.grid.auto-row{
  grid-auto-flow: row;
}
.grid.auto-col{
  grid-auto-flow: column;
}
.grid.auto-row.row-mx{
  grid-auto-rows: max-content;
}
.grid.auto-col.col-mn{
  grid-auto-rows: min-content;
}
.grid.col-2.col-1fr{
  grid-template-columns: 1fr 1fr;
}
.just-ct-sb{
  justify-content: space-between;
}
.just-ct-c{
  justify-content: center;
}
.just-sf-c{
  justify-self: center;
}
.bold{
  font-weight: 700;
}
.track figcaption{
  margin-bottom: 0.7rem;
}
audio::-webkit-media-controls-enclosure {
  max-width: none;
}
audio::-webkit-media-controls-panel {
  background-color: white;
}

iframe[title="deezer-widget"]{
  width: 100%;
  height: 400px;
}
h1{
  font-size: var(--medium-title-font-size);
}

@keyframes usa-scroll {
	0% { 
    transform: translateX(0);
  }
	100% { 
    transform: translateX(calc(-220px * 9));
  }
}

@keyframes sweden-scroll {
	0% { 
    transform: translateX(0);
  }
	100% { 
    transform: translateX(calc(220px * 9));
  }
}

@keyframes blink {
	25% { 
    opacity: 0.5;
  }
	50% { 
    opacity: 0;
  }
	75% { 
    opacity: 0.5;
  }
}
#adventures .description{
  margin-bottom: 12px;
}

#carousel-usa,
#carousel-sweden {
  width: calc(100% - 4em);
  overflow-y: auto;
	position: relative;
  justify-self: center;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
  margin-bottom: 24px;
}
#carousel-usa::after,
#carousel-sweden::before {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
#carousel-usa::before,
#carousel-sweden::after  {
  left: 0;
  top: 0;
}
#carousel-sweden .carousel-container {
  position: relative;
  left: calc(-220px * 9);
}
#carousel-usa::-webkit-scrollbar,
#carousel-sweden::-webkit-scrollbar  { 
  display: none;  /* Older Safari and Chromium */
  width: 0;  /* Remove scrollbar space */
  background: transparent;  /* Optional: just make scrollbar invisible */
}

#carousel-usa .carousel-container {
  animation: usa-scroll 30s linear infinite;
}
#carousel-sweden .carousel-container {
  animation: sweden-scroll 30s linear infinite;
}
.carousel-container {
  display: flex;
  width: calc(220px * 18);
}
.carousel-container img {
  width: 220px;
  height: auto;
  margin: 0;
  padding: 0;
}
section h1,
.card-contact h1,
.presection h1{
  text-align: center;
}
section:last-child{
  display: grid;
}
.title{
  font-family: "Heavy Heap Rg";
}

.tabs {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr max-content;
  grid-template-columns: repeat(4, 1fr);
}

input[type=radio] {
  display: none;
}
input[type=radio] + label{
  position: relative;
  grid-row: 1/2;
  margin: 0;
  padding: 12px;
  cursor: pointer;
}
input[type=radio] + label span{
  position: relative;
  top: -5px;
}
.tabs > label:nth-of-type(1) {
  background-color: #d90b14;
}
.tabs > label:nth-of-type(2) {
  background-color: #09d11b;
}
.tabs > label:nth-of-type(3) {
  background-color: #ffe500;
}
.tabs > label:nth-of-type(4) {
  background-color: #80d6ff;
}
.content {
  grid-row: 2/3;
  display: flex;
  opacity: 0;
  position: absolute;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
  transform: translateX(-100%);
}
input[type=radio]:checked + label + .content {
  opacity: 1;
  position: relative;
  grid-column: 1/5;
  transform: translateX(0%);
  transition: transform 0.4s ease 0.4s;
}

.content:nth-of-type(1) {
  background-color: #d90b14;
}
.content:nth-of-type(2) {
  background-color: #09d11b;
}
.content:nth-of-type(3) {
  background-color: #ffe500;
}
.content:nth-of-type(4) {
  background-color: #80d6ff;
}

.tab-title {
  font-size: 5vw;
  font-weight: bold;
  color: #fff;
}
#malt-div{
  display: grid;
  grid-template-columns: max-content auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.logo{
  width: 56px;
  height: 56px;
}
#communities{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.5em;
}

#stackoverflow img{
  width: 208px; 
  height: 58px;
}

#stackoverflow a{
  margin-top: 1.67em;
  margin-bottom: 1.67em;
}

/* Mastermind */
#mastermind{
  justify-content: center;
}
#mastermind h1{
  font-size: var(--medium-title-font-size);
}
#play-easy{
  background: #ffe500;
}
#play-medium{
  background: #ff5e00;
}
#play-hard{
  background: #d90b14;
}
#play-extreme{
  background: #8a05fa;
}
.table, .tbody {
  display: grid;
}
.line {
  display: grid; 
  grid-auto-columns: max-content; 
  grid-auto-flow: column;
}
#color-selector .line{
  justify-content: center;
}
#color-selector .line .pion{
  height: 64px;
  width: 64px;
}
.table .cell {
  padding:6px; 
  text-align:center;
}
.table .line.selected .cell {
  background: #953700;
}
.table .line.selected .cell.selected {
  background:#ffa81d;
}
.table .line.selected .cell.selected:not(:has(.pion)) {
  animation: blink 1s linear infinite;
}
.table .line .cell.valid {
  display:none; 
  font-size: 28px;
}
.table .line.selected .cell.valid {
  display:grid; 
  cursor: pointer;
}
.game {
  background: black;
}
.cell {
  display: grid; 
  align-content: center;
  justify-content: center;
}
.turn-pin {
  border-top: solid 1px #ffe500;
}
.turn-pin:empty {
  margin: 6px; 
  padding: 0; 
  width: 46px !important; 
  height: 46px !important; 
  border-radius: 50%; 
  background: black; 
  border: solid 1px #ffe500;
}

.pion {
  display:inline-block; 
  width:46px; 
  height:46px; 
  border-radius:50%; 
  border:solid 1px #ffe500;
}

.correct {
  display:inline-block; 
  width: 24px; 
  height: 24px; 
  border-radius:50%; 
  border:solid 1px #ffe500; 
  background:black;
}
.misplaced {
  display:inline-block; 
  width: 24px; 
  height: 24px; 
  border-radius:50%; 
  background: white; 
  border:solid 1px #ffe500;
}

.table .line.win .cell {
  background:rgb(0 152 26);
}
#mastermind .options {
  position: relative;
}
.result {
  position: absolute; 
  display: grid; 
  text-align:center; 
  color: #ffe500; 
  font-size: var(--small-title-font-size);
  top: -1.9em;
  padding: 16px 0; 
  margin-left: -28px; 
  width: 294px; 
  transform: rotate(5deg); 
  font-family: "Heavy Heap Rg";
}
.dashboard{
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 16px;
  justify-self: center;
}
.result-pin{
  border: none; 
  background: unset;
}
.menus .menu {
  padding: 10px 25px; 
  margin: 8px;
  color: black;
  border: solid 8px black;
  font-size: 44px; 
  font-family: "Heavy Heap Rg"; 
  cursor:pointer; 
  width:200px;
}
.solution{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-gap: 4px;
    justify-self: center;
}
.solution .solution-pin {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: solid 1px #ffe500;
    background: #000;
}

#rules{
  display: grid;
  background: #b24e15;
  padding: 1em 1em 2.3em;
  gap: 16px;
}
#rules h2,
#rules .example-result-pin{
  font-family: 'Fifties Movies';
}
#rules .example-result-pin{
  display: grid;
  grid-template-columns: max-content auto;
  row-gap: 16px;
  column-gap: 8px;
}
#rules .example-result-pin .result-pin{
  height: 26px;
  width: 26px;
  border-radius: 50%;
}
#example-correct-pin{
  background: black;
}
#example-misplaced-pin{
  background: white;
}
#cautionary-statement div:first-child{
  display: grid;
  grid-template-columns: max-content auto;
  gap: 14px;
  align-items: center;
}
#cautionary-statement div:first-child h3{
  line-height: 1;
}
#rules .powerpuff-girls{
  font-size: var(--medium-title-font-size);
}

/* Reglisse Game */
#reglisse h1,
#reglisse-modal h1{
  font-size: var(--title-font-size);
  font-family: 'Reglisse';
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 0.83em;
  text-align: center;
}

 @keyframes changeDimensionStar1 {
  from {
    font-size: 0px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    opacity: 0.2;
  }

  to {
    font-size: 30px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    opacity: 1;
  }
}
@keyframes changeDimensionStar2 {
  from {
    font-size: 0px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    opacity: 0.2;
  }

  to {
    font-size: 45px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    opacity: 1;
  }
}
@keyframes changeDimensionStar3 {
  from {
    font-size: 0px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    opacity: 0.2;
  }

  to {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    opacity: 1;
  }
}
@keyframes changeDimensionStar4 {
  from {
    font-size: 0px;
    width: 8px;
    height: 8px;
    line-height: 8px;
    opacity: 0.2;
  }

  to {
    font-size: 8px;
    width: 8px;
    height: 8px;
    line-height: 8px;
    opacity: 1;
  }
}
@keyframes changeDimensionStar5 {
  from {
    font-size: 0px;
    width: 12px;
    height: 12px;
    line-height: 12px;
    opacity: 0.2;
  }

  to {
    font-size: 12px;
    width: 12px;
    height: 12px;
    line-height: 12px;
    opacity: 1;
  }
}

.star:nth-child(2n+1) {
  top: 33px;
  right: -9px;
  animation-duration: 1s;
  animation-name: changeDimensionStar1;
}

.star:nth-child(2n) {
  top: -9px;
  right: -2px;
  animation-duration: 0.6s;
  animation-name: changeDimensionStar2;
}

.star:nth-child(3n) {
  top: 23px;
  right: 33px;
  animation-duration: 1.1s;
  animation-name: changeDimensionStar3;
}

.star:nth-child(4n) {
  top: 0px;
  right: -4px;
  animation-duration: 0.8s;
  animation-name: changeDimensionStar4;
}

.star:nth-child(5n) {
  top: -1px;
  right: 45px;
  animation-duration: 0.9s;
  animation-name: changeDimensionStar5;
}

.star:nth-child(6n) {
  top: unset;
  right: unset;
  bottom: -20px;
  left: 10px;
}

.star:nth-child(7n) {
  top: unset;
  right: unset;
  bottom: 7px;
  left: 0px;
}

.star:nth-child(8n) {
  top: unset;
  right: unset;
  bottom: 2px;
  left: -15px;
}

.star:nth-child(9n) {
  top: unset;
  right: unset;
  bottom: 6px;
  left: 30px;
}

.star:nth-child(10n) {
  top: unset;
  right: unset;
  bottom: 40px;
  left: 0px;
}

#reglisse-modal button,
#taptap-modal button,
#perfect-match-modal button,
button#play-reglisse,
button#play-taptap,
button#play-perfect-match{
  cursor: pointer;
}

#perfect-match-modal button#close-perfect-match-game{
  padding-top: 0.89em;
  padding-bottom: 0.71em;
}

button#play-reglisse,
button#play-perfect-match,
button#play-taptap,
#perfect-match-modal button.replay{
  align-self: center;
  position: relative;
  font-size: calc(var(--title-font-size) - 25px);
  border-radius: 20px;
  font-weight: 200;
  padding: 0.75em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

@keyframes taptap-button-background-change {
  0% {
    background-position: left top;
  }
  25% {
    background-position: 114px 30px;
  }
  50% {
    background-position: right 64px;
  }
  75% {
    background-position: 114px bottom;
  }
  100% {
    background-position: left top;
  }
}

#taptap-modal button,
button#play-taptap{
  border: none;
  font-family: 'Running';
  color: black;
  background: radial-gradient(farthest-corner at center, #d7c1c4 0%, #cf7be9 56%) top right/200% 200%;
}
section#taptap > h1,
#taptap-modal button,
button#play-taptap{
  animation: taptap-button-background-change 2s linear infinite;
}

section#taptap > h1{
  background: radial-gradient(farthest-corner at center, #4cdef7 0%, #000 56%) top right/200% 200%; /* 57ee00 */
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.3;
}


#reglisse-modal button,
button#play-reglisse{
  border: 2px solid black;
  font-family: 'Reglisse Fill';
  background: #eb5771;
  color: black;
}

#perfect-match-modal button,
button#play-perfect-match{
  padding-top: 0.35em;
  border: none;
  font-family: 'Wild Love';
  color: #fcccdd;
  background: #ff0041;
}

button#play-taptap{
  display: grid;
  align-items: center;
  justify-items: center;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  grid-gap: 16px;
  padding: 0.05em;
  padding-left: 2.15em;
  padding-right: 2.15em;
  border: 1px solid #696969;
}

button#play-taptap span.icon{
  font-size: 36px;
}
    
button#play-taptap .star:nth-child(2n+1){
  color: #9ce670;
}

button#play-taptap .star:nth-child(2n){
  color: #fa9900;
}

button#play-taptap .star:nth-child(3n){
  color: #4cdef7;
}

button#play-perfect-match .star{
  color: #ff779c;
}

#perfect-match-modal button.replay{
  width: 100%;
  top: unset;
  right: unset;
  padding: 0.5em;
}

.star {
  position: absolute;
  z-index: 2;
  color: rgba(255, 255, 255, 0.95);
  font-family: Georgia, serif;
  user-select: none;
  will-change: width, height, font-size, opacity;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#reglisse,
#taptap,
#perfect-match{
  position: relative;
  display: grid;
  justify-items: center;
}

dialog#reglisse-modal.opened,
dialog#taptap-modal.opened,
dialog#perfect-match-modal.opened{
  position: fixed;
  display: grid;
  justify-items: center;
  align-items: center;
  background: #ffe500;
  z-index: 10;
}

dialog#perfect-match-modal.opened{
  overflow-y: auto;
}

dialog#reglisse-modal.opened,
dialog#taptap-modal.opened{
  overflow: hidden;
}

dialog#reglisse-modal.closed,
dialog#taptap-modal.closed,
dialog#perfect-match-modal.closed{
  display: none;
}

#reglisse-modal button,
#taptap-modal button,
#perfect-match-modal button{
  position: absolute;
  border-radius: 50%;
}

#reglisse-game-board div[id^="reglisse-cell-"]{
  position: absolute;
  z-index: 1;
}

#reglisse-game-board img {
  height: 148px;
  width: 148px;
}

#reglisse-modal button,
#taptap-modal button,
#perfect-match-modal button{
  top: 32px;
  right: 32px;
  padding: 0.8em;
  width: 2.273em;
  line-height: 0.6em;
  font-size: 1.9em;
}

#taptap-modal button{
  width: max-content;
  border-radius: 50px;
  border: 1px solid #696969;
}

#taptap-modal button span,
button#play-taptap span:not(.icon){
  display: block;
  line-height: 1;
  margin-top: 11px;
}

#taptap-modal button{
  padding-top: 0.05em;
  padding-bottom: 0.05em;
}

div[id^="reglisse-cell-"]{
  cursor: grab;
}

div[id^="reglisse-cell-"].dragged{
  cursor: grabbing !important;
  opacity: 0.2;
  scale: 1.2;
}

#reglisse-game-board:has(.dragged){
  cursor: grabbing !important;
}

#reglisse-counter-section{
  background: #eb5771;
  padding: 1em;
  font-size: 1.2em;
}

#reglisse-points{
  font-weight: 600;
}

/* TapTap Game */
#taptap h1,
#taptap-modal h1{
  font-size: var(--title-font-size);
  font-family: 'MUSICNET';
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 0.83em;
  text-align: center;
}

/* Perfect Match Game */
#perfect-match h1,
#perfect-match-modal h1,
#perfect-match-modal h2{
  font-size: var(--title-font-size);
  font-family: 'Wild Love';
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 0.83em;
  text-align: center;
}

#perfect-match-modal h2{
  color: #ff0041;
  font-size: calc(var(--title-font-size) - 10px);
}

#perfect-match-modal #cards{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-content: center;
  justify-content: center;
}

#perfect-match-modal .card {
  opacity: 1;
  width: 200px;
  height: 267px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s, opacity 1s, display 1s;
}

#perfect-match-modal .card .face {
  position: absolute;
  display: grid;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  color: white;
  width: 200px;
  height: 267px;
  line-height: 100%;
  border-radius: 30px;
}
#perfect-match-modal .card .face img{
  align-self: center;
  justify-self: center;
  max-width: 200px;
  max-height: 267px;
  border-radius: 30px;
  object-fit: cover;
}
#perfect-match-modal .card .face img[src*="Wand"]{
  border-radius: 0;
}
#perfect-match-modal .card .face.back {
  z-index: 2;
  /* background: repeating-radial-gradient(circle at center, #f63c3c, #f63c3c 16px, #f8cedc 16px, #f8cedc 32px); */
  background: url('images/heart-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#perfect-match-modal .card .face.front {
  transform: rotateY(180deg);
  background: radial-gradient(#f63cbe, #fad064);
  background: radial-gradient(#fad064, #f63cbe);
  background: radial-gradient(#f1d7eb, #fa4b4f);
}
#perfect-match-modal input:checked + label .card{
  transform: rotateY(180deg);
}
#perfect-match-modal input.matches:checked label .card{
  transform: scale(1.2);
  opacity: 0;
}
#perfect-match-modal label {
  perspective: 1024px;
}

/* Small devices */
@media screen and (max-device-width:500px){
  :root{
    --h1-margin-bottom: 3em;
    --presection-height: 240px;
  }
  body{
    margin: 0;
    padding: 0;
    color: #000000;
    font-size: 1.8rem;
  }

  .presection{
    height: var(--presection-height);
  }

  .presection h1{
    font-size: var(--x-small-title-font-size);
    line-height: var(--x-small-title-font-size);
  }

  .card-contact h1{
    color: #ffe500;
    font-size: var(--medium-title-font-size);
  }

  .card-contact{
    display: grid;
    background: black;
    grid-auto-flow: row;
    grid-auto-rows: 1fr;
    grid-gap: 16px;
    color: #ffe500;
    padding: 32px;
    justify-items: center;
  }

  .card-contact span,
  .card-contact h5{
    font-size: 0.75em;
    text-align: center;
  }

  .title{
    font-size: var(--medium-title-font-size);
  }
}

/* Small devices (between 500px and 780px) */
@media screen and (min-device-width:500px){
  :root{
    --h1-margin-bottom: 3em;
    --presection-height: 240px;
  }
  body{
    margin: 0;
    padding: 0;
    color: #000000;
    font-size: 1.8rem;
  }

  .presection{
    height: var(--presection-height);
  }

  .presection h1{
    font-size: 3rem;
    line-height: 3rem;
  }

  .card-contact h1{
    color: #ffe500;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 1;
    font-size: var(--medium-title-font-size);
  }

  .title{
    font-size: var(--medium-title-font-size);
  }
  
  .card-contact{
    display: grid;
    background: black;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 16px;
    grid-template-rows: auto auto;
    color: #ffe500;
    padding: 32px;
    align-items: baseline;
  }
}

/* Small devices (between 780px and 801px) */
@media screen and (min-device-width:780px) {

  :root{
    --presection-height: 276px;
  }

  body{
    margin: 0;
    padding: 0;
    color: #000000;
    min-width: 735px;
    font-size: 120%;
  }
  
  .presection{
    height: var(--presection-height);
    max-width: 900px;
  }

  section h1{
    font-size: var(--title-font-size);
    line-height: 3rem;
    margin: 0 0 3.5rem 0;
    color: #000000;
  }

  .card-contact h1{
    color: #ffe500;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row: 1;
  }

  .card-contact{
    display: grid;
    background: black;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 16px;
    grid-template-rows: auto auto auto;
    color: #ffe500;
    padding: 64px 32px;
    justify-items: center;
    align-items: baseline;
  }
}

/* Small laptop */
@media screen and (min-device-width:801px) {
  :root{
    --h1-margin-bottom: 0.83em;
    --reglisse-board-size: 342px;
    --presection-height: 200px;
  }
  .presection{
    height: var(--presection-height);
  }
  .presection h1{
    font-size: var(--small-title-font-size);
  }
  #cautionary-statement div:first-child{
    gap: 12px;
  }
  #cautionary-statement div:first-child h3{
    position: relative;
    line-height: normal;
    top: -10px;
  }
  #rules {
    padding: 1em 2.5em 4em;
    max-width: 330px;
  }
  #rules .powerpuff-girls{
    font-size: 4em;
  }
  #reglisse-game-board img{
    width: 72px;
    height: 72px;
  }
  #reglisse-counter-section{
    justify-self: center;
    width: var(--reglisse-board-size);
  }
  #reglisse-modal button{
    top: 12px;
    right: 12px;
    padding: 1em;
    width: 2.7737em;
    line-height: 0.6em;
    font-size: 1.2em;
  }
}

/* Small devices orientation portrait */
@media screen and (max-device-width:780px) and (orientation: portrait){
  iframe[title="deezer-widget"]{
    width: 100%;
    aspect-ratio: 5 / 3;
    height: auto;
  }
}

/* Small devices orientation landscape */
@media screen and (max-device-width:780px) and (orientation: landscape){
  iframe[title="deezer-widget"]{
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

:root{
  --reglisse-board-top-offset: calc(4em + var(--title-font-size) + var(--h1-margin-bottom));
  --reglisse-board-left-offset: calc((100% - var(--reglisse-board-size)) / 2);
  --reglisse-cell-size: calc((var(--reglisse-board-size) - (4 * 4px)) / 5);
}

#reglisse-game-board{
  position: relative;
  height: calc((5 * var(--reglisse-cell-size)) + (4 * 4px));
  width: calc((5 * var(--reglisse-cell-size)) + (4 * 4px));
  margin-bottom: 2em;
}

#reglisse-cell-0,
#reglisse-cell-5,
#reglisse-cell-10,
#reglisse-cell-15,
#reglisse-cell-20{
  left: var(--reglisse-board-left-offset);
}

#reglisse-cell-1,
#reglisse-cell-6,
#reglisse-cell-11,
#reglisse-cell-16,
#reglisse-cell-21{
  left: calc(var(--reglisse-board-left-offset) + var(--reglisse-cell-size) + 4px);
}

#reglisse-cell-2,
#reglisse-cell-7,
#reglisse-cell-12,
#reglisse-cell-17,
#reglisse-cell-22{
  left: calc(var(--reglisse-board-left-offset) + ((var(--reglisse-cell-size) + 4px) * 2));
}

#reglisse-cell-3,
#reglisse-cell-8,
#reglisse-cell-13,
#reglisse-cell-18,
#reglisse-cell-23{
  left: calc(var(--reglisse-board-left-offset) + ((var(--reglisse-cell-size) + 4px) * 3));
}

#reglisse-cell-4,
#reglisse-cell-9,
#reglisse-cell-14,
#reglisse-cell-19,
#reglisse-cell-24{
  left: calc(var(--reglisse-board-left-offset) + ((var(--reglisse-cell-size) + 4px) * 4));
}
#reglisse-cell-0,
#reglisse-cell-1,
#reglisse-cell-2,
#reglisse-cell-3,
#reglisse-cell-4{
  top: 0px;
}

#reglisse-cell-5,
#reglisse-cell-6,
#reglisse-cell-7,
#reglisse-cell-8,
#reglisse-cell-9{
  top: calc(var(--reglisse-cell-size) + 4px);
}

#reglisse-cell-10,
#reglisse-cell-11,
#reglisse-cell-12,
#reglisse-cell-13,
#reglisse-cell-14{
  top: calc((var(--reglisse-cell-size) + 4px) * 2);
}

#reglisse-cell-15,
#reglisse-cell-16,
#reglisse-cell-17,
#reglisse-cell-18,
#reglisse-cell-19{
  top: calc((var(--reglisse-cell-size) + 4px) * 3);
}

#reglisse-cell-20,
#reglisse-cell-21,
#reglisse-cell-22,
#reglisse-cell-23,
#reglisse-cell-24{
  top: calc((var(--reglisse-cell-size) + 4px) * 4);
}

dialog#reglisse-modal,
dialog#taptap-modal,
dialog#perfect-match-modal{
  /* top: calc(0px - var(--presection-height) - 32px - 58.67px - (2 * 12px) - (2 * 48px)); 32px font-size of labels */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
}