html{
  cursor: url("cursor.png"), auto;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'Istok Web', sans-serif;
  margin: 0;
  padding:0;
  height: 3000px;
}


.collapsible {
  background-color:transparent;
  cursor: pointer;
  color:rgb(255, 249, 241);
  padding:0%;
  margin:0%;
  font-size:1.4em;
  font-family: 'Istok Web', sans-serif;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  opacity:100%;
  /* animation: mymove5 4s infinite; */
}

.collapsible:hover{
  color:rgb(104, 107, 120);
    
}
  
  .content {

    display: none;
    overflow: hidden;

  }
.trail { /* className for the trail elements */
    position: absolute;
    height: 6px; width: 6px;
    border-radius: 3px;
    background: rgb(213, 213, 213);
    opacity: 100%;
    transition-duration: 0.3s;
  }

  .title{
    color:rgb(255, 249, 241);
    font-weight: 800;
    font-size: 1.2em;
    margin-left: 15%;
    margin-top: 15%;
}
.normal{
    color:rgb(255, 249, 241);
    font-size:1.4em;
    font-weight: 400;
    margin-left: 15%;
}

.typing-container{
    color:rgb(255, 249, 241);
    font-size:1.4em;
    font-weight: 400;
    margin-left: 15%;
}



.data{
    color:rgb(255, 249, 241);
    font-weight: 800;
    font-size:medium;
    opacity: 30%;
    animation: mymove 4s infinite;

  }
  .data2{
    color:rgb(255, 249, 241);
    font-weight: 800;
    font-size:medium;
    opacity: 30%;
    animation: mymove2 4s infinite;
  }
  .data3{
    color:rgb(255, 249, 241);
    font-weight: 800;
    font-size:medium;
    opacity: 30%;
    animation: mymove3 4s infinite;
  }
  .data4{
    color:rgb(255, 249, 241);
    font-weight: 800;
    font-size:medium;
    opacity: 30%;
    animation: mymove4 4s infinite;
  }
  .data5{
    color:rgb(255, 249, 241);
    font-weight: 800;
    font-size:medium;
    opacity: 30%;
    animation: mymove5 4s infinite;
  }      
.data:hover{
  opacity:100%;
}


.logs{
    color:rgb(255, 249, 241);
    font-weight: 400;
    font-style: italic;
    font-size:medium;
    opacity: 30%;
    animation: mymove 4s infinite;

}
.logs2{
  color:rgb(255, 249, 241);
  font-weight: 400;
  font-style: italic;
  font-size:medium;
  opacity: 30%;
  animation: mymove2 4s infinite;
}
.logs3{
  color:rgb(255, 249, 241);
  font-weight: 400;
  font-style: italic;
  font-size:medium;
  opacity: 30%;
  animation: mymove3 4s infinite;
}
.logs4{
  color:rgb(255, 249, 241);
  font-weight: 400;
  font-style: italic;
  font-size:medium;
  opacity: 30%;
  animation: mymove4 4s infinite;
}
.logs5{
  color:rgb(255, 249, 241);
  font-weight: 400;
  font-style: italic;
  font-size:medium;
  opacity: 30%;
  animation: mymove5 4s infinite;
}
.logs:hover{
  opacity:100%;
}


div , .circle{
  position: relative;
  height:max-content;
}
.circle {
      -webkit-border-radius: 250px;
      -moz-border-radius: 250px;
      position: absolute;
      margin-left: 10%;
      border-radius: 250px;
      opacity:50%;
      animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
    }
    @keyframes scaleIn {
  from {
    transform: scale(.5, .5);
    opacity: .5;
  }
  to {
    transform: scale(1., 1.);
    opacity: 0;
  }
    }
.time{
  position: relative;
}

.time , .content{
position: relative;
height:max-content;
}
    
.keyboard{
  padding: 0;
  margin: 2%;
  height: max-content;
  position: relative;
}

.keyboard-conclusion{
  padding: 0;
  margin: 6%;
  height: 30%;
  position: relative;
  display: block;
}

@keyframes mymove {
  0% {opacity: 0%;}
  20% {opacity: 100%;}
  100% {opacity: 0%;}
}
@keyframes mymove2 {
  0% {opacity: 100%;}
  50% {opacity: 0%;}
  100% {opacity: 100%;}
} 
@keyframes mymove3 {
  10% {opacity: 100%;}
  30% {opacity: 0%;}
  100% {opacity: 100%;}
}  
@keyframes mymove4 {
  20% {opacity: 100%;}
  60% {opacity: 0%;}
  100% {opacity: 100%;}
}   
@keyframes mymove5 {
  0% {opacity: 100%;}
  80% {opacity: 0%;}
  100% {opacity: 100%;}
} 
.jarallax {
  height: 15vh;
  width: 15vh;
}
*,
:after,
:before {
  box-sizing: border-box;
}