@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400&display=swap');

html {
    height: 100%;
    #cursor: none;
}

body {
    height:  100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, rgba(255,255,255,1) 10%, rgba(255,255,255,0.8) 20%, rgba(255,255,255,.6) 30%, rgba(255,255,255,.4) 40%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 60%);
    background-color: #009eff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 50%;
    animation: pageColorAppear 5s ease both, pageColorCycle 10s 5s infinite linear;
    font: 300 1.6em 'Fredoka', sans-serif;
    color: #444;
    perspective: 500px;
}

#hover-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(circle, rgba(255,255,255,1) 10%, rgba(255,255,255,0.8) 20%, rgba(255,255,255,.6) 30%, rgba(255,255,255,.4) 40%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 60%);
  #background-color:black;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
  background-size: 400% 400%;
  z-index: -1;
}

#content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: appear 2s 1s ease backwards, rotate1 3s 7s ease-in-out, rotate2 25s 10s infinite linear;
    pointer-events: none;
}

#content:hover {
  animation-play-state: paused;
}

#my-card {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
    transform: perspective(500px) translateZ(-100px);
}

.my-photo {
    border-radius: 50%;
    width: 6em;
    height: 6em;
    transition: opacity 0.5s ease;
    position: absolute;
}

.my-photo-bg
{
    border-radius: 50%;
    box-shadow: 2px 2px 0px 0px;
    background-color: #009eff;
    animation: photoColor 10s 5s infinite linear both;
    width: 6em;
    height: 6em;
    transition: opacity 0.5s ease;
}

#my-photo-bg-hover {
  position: absolute;
  opacity: 0;
  animation: none;
  transition: background-color 0.5s ease, opacity 0.5s ease;
}


#my-text {
    margin: 0 0 0 20px;
    white-space: nowrap;
    line-height: 1.1em;
}

.name {
    font-size: 2em;
    font-weight: 400;
}

.phd {
    margin-left: 2px;
    font-size: 1.4em;
}

.subjects {
    font-size: .78em;
    color: #888;
}

#links {
    text-align: center;
}

.link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 1em .6em 0 .6em;
    text-decoration: none;
    font-size: .8em;
    #color: #009eff;
    transition: filter .5s ease-out, transform .5s ease-out;
    pointer-events: auto;
    filter: saturate(60%) contrast(60%) brightness(130%);
}

.link:hover {
    transform: scale(1.05,1.05) translateY(-.3em) perspective(10em) rotateX(20deg) translateZ(.5em);
    filter: none !important;
}

#links:hover .link {
    filter: saturate(0%) contrast(60%) brightness(130%) blur(2px);
}

.link:hover .icon-img{    
    box-shadow: 0px 15px 15px -10px;
}

.link:hover .link-text{    
    filter: none;
}

.icon-img {
    height: 3.5em;
    width: 3.5em;
    margin-bottom: 0.3em;
    border-radius: 50%;
    border: .3em solid white;
    background-color: white;
    transition: box-shadow 0.5s ease-out;
}

.link-text {
    filter: saturate(0) brightness(0.5);
    transition: filter 0.5s;
}

.glitch {
  position: absolute;
  opacity: 0;
  animation: glitchEffect 20s infinite linear;
}


@media only screen and (max-device-width: 700px) {

    body {
        font-weight: 400;
    }

    #content {
        animation: appear 2s .5s ease-out both;
    }

}

@media only screen and (max-device-width: 700px) and (orientation:portrait) {

    body {
        font-size:  3em;
        perspective: 1000px;
    }

    #my-card {
        flex-direction:  column;
        margin-bottom: 2em;
        text-align: center;
    }

    .my-photo, .my-photo-bg {
        width: 8em;
        height: 8em;
    }

    #my-text {
        margin: 3vh 0 0 0;
    }

}

@media only screen and (max-device-width: 700px) and (orientation:landscape) {

    body {
        font-size:  1.7em;
    }

}

@media (any-hover: none) {
/*    .glitch {
      animation: glitchEffect 20s infinite linear both;
  } */
  .link {
    filter: saturate(70%) contrast(70%) brightness(120%);
}

}

@keyframes appear {
    0% {
        filter: blur(20px);
        opacity: 0;
        transform: scale(.8,.8) rotateX(-20deg) rotateY(0deg);
    }
    100% {
        filter: blur(0px);
        opacity: 1;
        transform: none;
    }
}

@keyframes rotate1 {
    100% {
        transform: rotateX(7deg) rotateY(5deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotateX(7deg) rotateY(5deg);
    }
    12.5% {
        transform: rotateX(0deg) rotateY(7deg);
    }
    25% {
        transform: rotateX(-7deg) rotateY(5deg);
    }
    37.5% {
        transform: rotateX(-12deg) rotateY(0deg);
    }
    50% {
        transform: rotateX(-7deg) rotateY(-5deg);
    }
    62.5% {
        transform: rotateX(0deg) rotateY(-7deg);
    }
    75% {
        transform: rotateX(7deg) rotateY(-5deg);
    }
    87.5% {
        transform: rotateX(12deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(7deg) rotateY(5deg);
    }
}


@keyframes pageColorAppear {
    0% {
    background-size: 100% 100%;
    }
    100% {
    background-size: 400% 400%;
    }
}


@keyframes pageColorCycle {
    0% {
        background-color: #009eff;
    }
    20% {
        background-color: #6ed31b;
    }
    40% {
        background-color: #ffcf00;
    }
    60% {
        background-color: #fd5757;
    }
    80% {
        background-color: #c526ff;
    }
}

@keyframes photoColor {
    0% {
        background-color: #009eff;
        color: #009eff;
    }
    20% {
        background-color: #6ed31b;
        color: #6ed31b;
    }
    40% {
        background-color: #ffcf00;
        color: #ffcf00;
    }
    60% {
        background-color: #fd5757;
        color: #fd5757;
    }
    80% {
        background-color: #c526ff;
        color: #c526ff;
    }
    100% {
        background-color: #009eff;
        color: #009eff;
    }
}

@keyframes shadowColor {
    0% {
        box-shadow: #009eff;
    }
    20% {
        box-shadow: #6ed31b;
    }
    40% {
        box-shadow: #ffcf00;
    }
    60% {
        box-shadow: #fd5757;
    }
    80% {
        box-shadow: #c526ff;
    }
    100% {
        box-shadow: #009eff;
    }
}

@keyframes textColor {
    0% {
        color: #009eff;
        }
    20% {
        color: #629f1a;
        }
    40% {
        color: #d79a1d;
        }
    60% {
        color: #fd5757;
        }
    80% {
        color: #da75ff;
        }
}

@keyframes glitchEffect {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  30.5% {
    opacity: 1;
  }
  31% {
    opacity: 0;
  }
  61% {
    opacity: 0;
  }
  63% {
    opacity: 1;
  }
  67% {
    opacity: 1;
}
  69% {
    opacity: 0;
  }
  96% {
    opacity: 0;
  }
  97% {
    opacity: 1;
  }
  98% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}