@import url(https://db.onlinewebfonts.com/c/9527a4c4f55e8075eb6a60fe577d89c4?family=Px+Grotesk+Regular);
@font-face {
    font-family: "Px Grotesk Regular";
    src: url("https://db.onlinewebfonts.com/t/9527a4c4f55e8075eb6a60fe577d89c4.eot");
    src: url("https://db.onlinewebfonts.com/t/9527a4c4f55e8075eb6a60fe577d89c4.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/9527a4c4f55e8075eb6a60fe577d89c4.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/9527a4c4f55e8075eb6a60fe577d89c4.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/9527a4c4f55e8075eb6a60fe577d89c4.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/9527a4c4f55e8075eb6a60fe577d89c4.svg#Px Grotesk Regular")format("svg");
}
body {
    margin: 0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    
    overflow: hidden;
    font-family: "Px Grotesk Regular", sans-serif;
    font-size: 13px;
}

.container {
    position: fixed;
    top:0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: white;
}
a {
    text-decoration: none;
    color: inherit;
  
  }
a:hover {
    text-decoration: underline;
}
#timone {
    margin:0;
    position: fixed;
    width: 200vh;
    height:200vh;
}
#timone1 {
    margin:0;
    position: fixed;
   width: 60%;
            height:60%;

  animation: rotation 25s infinite steps(50);
 
  }
#timone2 {
    margin:0;
    position: fixed;
   width: 60%;
            height:60%;
  
  animation: rotation 25s infinite steps(50);
  rotate: 13deg;
  }
#timone3 {
    margin:0;
    position: fixed;
     width: 60%;
            height:60%;
   animation: rotation 25s infinite steps(50);
   rotate: 26deg;
  }
  #timone4 {
    margin:0;
    position: fixed;
   width: 60%;
            height:60%;
    animation: rotation 25s infinite steps(50);
  rotate: 39deg;
  }
  #timone5 {
    margin:0;
    position: fixed;
   width: 60%;
            height:60%;
 
  animation: rotation 25s infinite steps(50);
  rotate: 52deg;
  }


@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#timone3 {
    margin:0;
    
    position: fixed;
   width: 60%;
            height:60%;

    color-scheme: tomato;
    animation: rotation 25s infinite steps(50);
     rotate: 64deg;
  }

  #timone6 {
    margin:0;
    
    position: fixed;
   width: 60%;
            height:60%;
  
    color-scheme: tomato;
    animation: rotation 25s infinite steps(50);
    rotate: 77deg;
  }
    #timone7 {
    margin:0;
    
    position: fixed;
   width: 60%;
            height:60%;
   
    color-scheme: tomato;
    animation: rotation 25s infinite steps(50);
      rotate: 26deg;
  }

@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

video{
    position: fixed;
width:100%;
}
#canvas-container {
  display: none;
   width: 400px;
    height: 400px;
    position: relative;
    background: #fff;
    overflow: hidden;
}
#canvas-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
   
}


.text {
    width: fit-content;
    font-size: 13px;
    text-align: center;
    position: absolute;
    color: black;
}
p{
    text-align: center;
    font-size: 13px;
}
#work { top: 15vh;}
#personal { top: 50vh; right: 25%; }
#cv { bottom: 15vh;  }
#contact { top: 50vh; left: 25%; }
#work-preview {
    width: 60vh;
    height: 60vh;
    background: #fff;
    position: fixed;
    display: none;
    z-index: 3;
    overflow: hidden;
    padding: 0;
}
#work-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

#personal-preview {
    width: 60vh;
    height: 60vh;
    background: #fff;
    position: fixed;

  
    display: none;
    z-index: 3;
    overflow: hidden;
    padding: 0;
}
#personal-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.container img {
    z-index: 5;
}

.container .text {
    z-index: 7;
}