@keyframes header-animation {
    from {
        letter-spacing: -7px;
    }

    to {
        letter-spacing: 7px;
    }
}

@keyframes displayIntroduction {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes glowEffect {
    0% {
        box-shadow:
            0 0 60px 30px #fff,
            /* inner white */
            0 0 100px 60px #f0f,
            /* middle magenta */
            0 0 140px 90px #0ff;
        /* outer cyan */
    }

    50% {
        box-shadow:
            0 0 60px 30px #f0f,
            /* inner white */
            0 0 100px 60px #ff0,
            /* middle magenta */
            0 0 140px 90px #fff;
        /* outer cyan */
    }

    100% {
        box-shadow:
            0 0 60px 30px #fff,
            /* inner white */
            0 0 100px 60px #f0f,
            /* middle magenta */
            0 0 140px 90px #0ff;
        /* outer cyan */
    }

}

@font-face {
    font-family: "arcade";
    src: url("ARCADE_R.TTF");
}

@font-face {
    font-family: "Beam";
    src: url("Linebeam.ttf");
}

:root {
    --Primary: #030637;
    --Secondary: #3C0753;
    --Tertiary: #720455;
    --PColor: #33A;
    --arrow-icon: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Calibri;
}

[name=closeAd] {
    background: #030637;
    color: #FFF;
    padding: 5px;
    margin: 3px;
    display: block;
    width: 25%;
    border-radius: 18px;
    align-content: center;
    align-items: center;
    text-align: center;
}
[name="closeAd"]:after{
    content:"";
    display: block;
}
body {
    background: linear-gradient(var(--Body1), var(--Body2));
}


.pallier {
    color: #88A;
}

.container {
    display: grid;
    grid-template-areas:
        'header header'
        'mainContent ad'
        'footer footer';
    grid-template-rows: 20% auto 10%;
    width: 80vw;
    height: 100vh;
    background: var(--Primary);
    margin: 0 auto;
}

.adsence {
    grid-area: ad;
    position: absolute;
    width: 250px;
    height: 275px;
    right: 0px;
}

header {
    grid-area: header;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

header h2 {
    color: #FF0;
}

.btn {
    display: inline-block;
    height: 25px;
    width: 86px;
    border: 4px solid #33A;
    color: #FFF;
    text-align: center;
    border-radius: 20px;
    margin-top: 0;
    text-decoration: none;
    transition: .7s;
}

.btn:hover {
    background: #FF0;
    color: #F0F;
}

.timer {
    display: block;
    width: 100%;
    height: 10px;
    border: 2px solid #222;
    position: relative;
}

.timer span {
    display: block;
    width: 0%;
    background: #335;
    position: absolute;
    height: 100%;
    box-shadow: 0px 0px 10px #FF0;
}

.btn.used {
    background: #333;
    color: #222;
    cursor: not-allowed;
}

header h1 {
    font-family: "arcade";
    /*  color: var(--PColor);*/
    background: -webkit-linear-gradient(var(--PColor), #FF0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: header-animation 5s ease;
    /*    text-shadow: 3px 5px 10px #FF0;*/
    letter-spacing: 7px;
    font-size: 2.5em;
}

footer {
    border-top: 2px solid #300;
    grid-area: footer;
}

footer a {
    float: right;
    color: #FFF;
    text-decoration: none;
    transition: .7s;
}

footer a:hover {
    color: #00F;
}

.modal {
    display: flex;
    position: absolute;
    width: 450px;
    aspect-ratio: 16/9;
    background: #999;
    left: 35%;
    top: 25%;
    flex-direction: column;
    box-shadow: 10px 10px 7px #555;
}

.modal .compoment {
    align-self: flex-start;
    width: 100%;
}

.modal .compoment label {
    width: 50%;
}

.modal-header {
    height: 10%;
    font-size: 1.9em;
}

.colorView {
    display: block;
    width: 50px;
    aspect-ratio: 4/3;
    border: 3px solid #FFF;
}

.timer {
    width: 100%;
    height: 75px;
    border: 2px solid #33A;
}

.timer span {
    display: block;
    background: #FF3;
    height: 100%;
}

h2 {
    font-size: 1.8em;
    font-family: "arcade";
    color: var(--PColor);
}

main {
    grid-area: mainContent;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    /*! padding: ; */
}



ol {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    list-style: none;
    counter-reset: li
}



.presentation {
    width: 400px;
    text-align: justify;
    color: #FFF;
}

button {
    background: #88A;
    margin: 0.1rem;
    border: 1px solid #F8F;
    padding: .3em;
    color: #FFF;
    border-radius: 50%/10% 10% 5% 5%;
    cursor: pointer;
    transition: .7s;
}

button:hover {
    background: #33A;
    border: 1px solid #B8B;
    font-size: 1.2em;
}


.query {
    display: flex;
    justify-content: space-around;
}

.query button {
    width: 50%;
}



.overlay {
    width: 100vw;
    height: 100vh;
    background: #3338;
    position: fixed;
    z-index: 2;
}

.rule {
    width: 100%;
}

.rule p {
    margin: 1rem;
}

.rule ol,
.rule ul {
    display: block;
    margin-left: 25px;
}

.rule ol {
    list-style: decimal;
}

.rule ul {
    list-style: circle;
}

.overlay>div {
    position: absolute;
    z-index: 4;
    background: #AA3;
    width: 30%;
    height: 25%;
    left: 25%;
    top: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%/55% 12%;
}

#programation {
    position: absolute;
    width: 675px;
    aspect-ratio: 16/9;
    background: #333;
    z-index: 3;
    top: 25%;
    left: 26%;
    display: flex;
    flex-direction: column;
    animation: 3s displayIntroduction;
}

#programation p {
    padding: 5px;
    font-size: 1.3em;
}

#programation ul {
    margin-left: 25px;
}