@font-face {
  font-family: "Zector";
  src:
    local("Zector"),
    url("fonts/Zector.ttf") format("TrueType");
}



:root{
    --commun: #ec4a4a;
    --rare: #00ff99;
    --epic: #00eaff;
    --mythique: #ff33cc;
    --legendaire: #ffaa33;
}


html,body{
    margin:0
    
}


body{
    background-color: black;
    color: #00ff99;

    font-family:'Zector';
    text-transform: uppercase;
    letter-spacing: 12px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

header{
    text-align: center;
    align-items: center;
}

h1{
    font-size: 48px;
}


main{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
}

#center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}


#center>div{
    display: flex;
    gap: 12px;
    flex-direction: row;
}

#center>div>div{
    height: 120px;
    width: 120px;
    border: 2px solid #00ff99;
    box-shadow: 0 0 10px#00ff99;
    transition: all 0.2s;
}

#center>div>div:nth-child(even):hover:not(.spinner){
    transform: scale(1.1) rotate(12deg);
    margin: 0 36px;
}

#center>div>div:nth-child(odd):hover:not(.spinner){
    transform: scale(1.1) rotate(-12deg);
    margin: 0 36px;
}

#center button {
    font-family:'Zector';
    font-weight: bold;
    background-color:black;
    color: #00ff99;
    box-shadow: 0 0 10px#00ff99;
    border: 2px solid #00ff99;
    padding: 8px 16px;
    margin: 5px 0;
    font-size: 16px;
    letter-spacing: 6px;
    transition: all 0.2s;
    text-decoration: none;
    perspective: 1000px;
    width:150px;
}

#center button:hover {
    color:black;
    background-color: #00ff99;
    
    transform: scale(1.1) skewY(-8deg);
}

#center button:hover:active {
    background-color:black;
    color: #00ff99;
    
    transform: scale(1.2) skewY(-12deg);
}

.spinner{
    animation: spin 0.75s linear infinite running;
    margin: 0 48px;
}

.splash{
    animation: splash 0.2s ease-out running;
}

@keyframes spin {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes splash {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}

.letitride {
    animation: letitride 0.5s ease-out running;
}



@keyframes letitride {
    0%{
        transform: scale(1) rotate(0deg);
    }
    30%{
        transform: scale(1.8) rotate(20deg);
    }
    100%{
        transform: scale(1) rotate(0deg);
    }
}

.face{ 
    fill: #ffffff00; stroke: #00ff99; stroke-width: 3;
    box-shadow: 0 0 20px var(#00ff99);
}
.eye { 
    fill: #00ff99;
}
.trait{ 
    fill: none; 
    stroke: #00ff99;
    stroke-width: 4; 
    stroke-linecap: round;
}

.blind{ 
    fill: #ffffff; 
}