@font-face  {
    font-family: "Leelawadee UI";
    src: url(fonts/LeelawUi/LeelawUI.ttf);
}

@keyframes rotateR {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}
@keyframes rotateL {
    0% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(0deg);
    }
}
@keyframes blink {
    78% {
        filter: drop-shadow(0 0 20px var(--clr));
        color: var(--clr);
      }
      79%{
         color: #333;
      }
      80% {
        fill: none;
      }
      81% {
        filter: drop-shadow(0 0 20px var(--clr));
        color: var(--clr);
      }
      82% {
        color: #333;
        fill: none;
      }
      83% {
        filter: drop-shadow(0 0 20px var(--clr));
        color: var(--clr);
      }
      92% {
        color: #333;
        fill: none;
      }
      92.5% {
        filter: drop-shadow(0 0 20px var(--clr));
        color: var(--clr);
      }
}

* {
    margin: 0;
    padding: 0;
    letter-spacing: 1px;

    user-select: none;
    scroll-behavior: smooth;

    font-family: "Leelawadee UI";
}

body {
    /* background: rgb(91,89,89);
    background: radial-gradient(circle, rgba(91,89,89,1) 0%, rgba(38,38,38,1) 95%); */
    background: rgb(50,50,50);
    background: radial-gradient(circle, rgba(50,50,50,1) 0%, rgba(19,19,20,1) 97%);
}

.main {
    position: relative;
    height: 80vh;
}

.img_container{
    position: absolute;
    text-align: center;
    color: #F8F4E3;

    /* margin-bottom: 2vw; */
    
    right: 0;
    left: auto;
    top: auto;
    bottom: 0;

    z-index: 1;
}

.img_container img {
    height: auto;
    width: 20vw;
    min-width: 260px;
    max-width: 300px;

    /* filter: drop-shadow(7px 6px 12px #b42ee599); */
}

.img_container button:hover {
    background: #60992d;
    transition-duration: .2s;
}

.img_container button {
    border: medium none;
    text-align: center;
    
    
    font-size: calc(12px + 0.25vw);
    position: absolute;

    bottom: 0.5vw;
    left: 50%;
    transform: translate(-50%, -0%);
    color: #F8F4E3;

    padding-top: 4px;
    padding-bottom: 10px;

    /* padding-left: 25px;
    padding-right: 25px; */
    
    width: calc(162px + 1.4vw);

    outline: solid 2px #F8F4E3;
    background-color: #662C91;
    border-radius: 8px;
    box-shadow: 0 2px 8px -1px rgba(10, 22, 50, .65);

    transition-duration: .2s;
}

.selfie {
    position: relative;
    
    height: 20vw;
    width: 20vw;
    /* border-radius: 50%;
    background-color: #fdfdfc; */

    max-width: 20vw;
    max-height: 20vw;
    min-width: 260px;
    min-height: 260px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 20vh;
}

.selfie img {
    height: 100%;
    width: 100%;

    border-radius: 0% 0% 50% 50%;
}

.selfie_background {
    position: absolute;
    
    height: 100%;
    width: 100%;
    
    border-radius: 50%;
    background-color: #fdfdfc;
    outline: #60992d solid 6px;
    outline-offset: -3px;

    bottom: 0;
    z-index: -1;
}

.ring i {
    position: absolute;
    
    height: 100%;
    width: 100%;
    outline: #fdfdfc solid 2px;

    bottom: 0;

    transition-duration: .8s;
}

.ring:hover i {
    filter: drop-shadow(0 0 20px var(--clr));
    outline: var(--clr) solid 6px;
    
    transition-duration: .2s;
}

#r1 {
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    outline-offset: 46px;
    animation: rotateR 8s linear infinite;
}

#r2 {
    border-radius: 32% 81% 46% 39% / 36% 22% 61% 48%;
    outline-offset: 67px;
    animation: rotateL 6s linear infinite;
}

#r3 {
    border-radius: 41% 67% 53% 29% / 53% 38% 38% 38%;
    outline-offset: 52px;
    animation: rotateR 10s linear infinite;
}

.skills {
    width: 65vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px;

    font-size: calc(12px + 0.5vw);
    color: #fdfdfcCC;
}

.skills span {
    filter: drop-shadow(0 0 20px var(--clr));
    color: var(--clr);
}

.skills h3 span:nth-of-type(3){
    animation: blink linear infinite 3s;
}

@media screen and (max-width: 1260px) {
    .img_container img {
        opacity: 0;
    }
    .img_container{
        right: 0;
        left: 0;
        top: auto;
        bottom: 0;
    }
    .main {
        height: 80vh;
    }
    .selfie {
        margin-top: 10vh;
    }
}

/* TOP SECRET */
@keyframes glow {
    50% {
      /* box-shadow: 0 0 40px hsl(12, 100%, 60%); */
      filter: drop-shadow(0 0 20px hsl(0, 100%, 100%));
    }
}

canvas {
    display: table;
    margin-top: 5vh;
    margin-right: auto;
    margin-left: auto;
    background-color: #F8F4E399;
}

.gameSprite {
    position: absolute;
    opacity: 0;
    height: 0px;
    width: 0px;
    image-rendering: pixelated;
}

h1 {
    color: #F8F4E3;
    text-align: center;
    margin-top: 10vh;
    animation: glow 600ms infinite alternate;
    filter: drop-shadow(10px 6px 0px #000000);
}

/* #secretGame {
    opacity: 0;
    position: absolute;
    bottom: 100vh;
} */

.btns {
    text-align: center;
    height: 10px;
}
.btns span {
    display: inline-block;
    position: relative;
    background-color: blueviolet;
    color: #F8F4E3;
    font-weight: bold;
    font-size: 2.5em;
    text-decoration: none;
    padding: 4px;
    border-radius: 8px;
    margin: 40px 6px;
    width: 60px;
    text-align: center;
}
.unclicked {
    box-shadow: 0 9px 0 rgb(102, 18, 136),0px 9px 25px rgba(0, 0, 0, .7);
}
.clicked {
    box-shadow: 0 3px 0 rgb(102, 18, 136),0px 3px 6px rgba(0, 0, 0, .7);
    position: relative;
    top: 6px;
}
#space {
    width: 260px;
}