@font-face {
    font-family:'raleway';
    src: url('raleway.ttf');
}
body,html{
  margin:0px;
  width:100%;height:100%;
  font-family: raleway;
  overflow: hidden;
}

#intro{
  z-index:1;
  background-color:#f6f5d9;
  height:100vh;
  width:100%;
}
#line{
  z-index:2;
  transform: rotateZ(-45deg);
  position:absolute;
  border-style:solid;
  border-color:black;
  width:300px;
  border-width:0.5px;
  transition:all 2s ease-in-out;
}
#line2{
  z-index:2;
  transform: rotateZ(45deg);
  position:absolute;
  border-style:solid;
  border-color:black;
  width:300px;
  border-width:0.5px;
  transition:all 2s ease-in-out;
}
#circle{
  z-index:2;
  position:absolute;
  width:200px;
  height:200px;
  border:1px solid black;
  border-radius:50%;
}
#purpbox{
  z-index:3;
  background:#ff3333;
  position:absolute;
  width:170px;
  height:170px;
  border-radius:20%;
}
#wcircle{
  z-index:4;
  position:absolute;
  width:150px;
  height:150px;
  background: whitesmoke;
  border-radius:50%;
  transition: transform 1s ease-in-out ,height 1s ease-in-out , width 1s ease-in-out;
}
#title{
  font-size:100px;
  position:absolute;
  z-index:5;
  opacity:0;
  transition: all 3s ease-in-out;
}
#one{
  top:-100vh;
  width:100%;
  height: 100vh;
  background-color:#111;
  display:block;
  position:fixed;
  transition:all 2s;
  z-index: 10;
}
#circletimer1{
  z-index:11;
  position:absolute;
  width:200px;
  height:200px;
  border:1px solid white;
  border-radius:50%;
  background:rgba(255,255,255,0);
  transition:all 0.2s;
}
#circletimer2{
  z-index:11;
  background:rgba(255,255,255,0);
  position:absolute;
  width:200px;
  height:200px;
  border:1px solid white;
  border-radius:50%;
  transition:all 0.2s;
}
#circletimer3{
  z-index:11;
  position:absolute;
  width:200px;
  background:rgba(255,255,255,0);
  height:200px;
  border:1px solid white;
  border-radius:50%;
  transition:all 0.2s;
}
#circletimer4{
  z-index:11;
  position:absolute;
  width:200px;
  background:rgba(255,255,255,0);
  height:200px;
  border:1px solid white;
  border-radius:50%;
  transition:all 0.2s;
}
#circletimer5{
  z-index:11;
  position:absolute;
  width:200px;
  background:rgba(255,255,255,0);
  height:200px;
  color:black;
  font-size:50px;
  letter-spacing: 3px;
  border:1px solid white;
  border-radius:50%;
  line-height:200px;
  vertical-align:middle;
  text-align: center;
  transition:all 0.2s;
}
#time{
  top:10px;
  left:10px;
  position:fixed;
  z-index:999;
  color:white;
  opacity:0;
  transition:all 1s ease-in-out;
}
.swiper-container {
       width: 100%;
       height: 100%;
   }
   .swiper-slide {
       text-align: center;
       font-size: 18px;
       background: #fff;
       /* Center slide text vertically */
       display: -webkit-box;
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;
       -webkit-box-pack: center;
       -ms-flex-pack: center;
       -webkit-justify-content: center;
       justify-content: center;
       -webkit-box-align: center;
       -ms-flex-align: center;
       -webkit-align-items: center;
       align-items: center;
   }
   #nature{
     z-index:15;
background: linear-gradient(to bottom right, #FFC371, #FF5F6D);

   }
#ocean{
  background: linear-gradient(to right, #00CDAC, #02AAB0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
#sky{
background: linear-gradient(to top right, #C4E0E5, #4CA1AF);

}
#streak{
  background: #111;
}
#tim,#tim1,#tim2{
  width:100%;
  font-size:30px;
  text-align:center;
  display: block;
  padding-top:45px;
}
#lap,#lap1,#lap2{
  width:100%;
  font-size:50px;
  text-align:center;
  display:block;
}
#credit{
  display:inline-block;
  font-size:20px;
  transform: rotate(90deg);
  position:fixed;
  left:-140px;
  top:190px;
  z-index:1;
  color:white;
}
#credit span{
  font-size:15px;
  display:block;
  color:white;
}
#intim,#inlap{
  display: block;
  position:absolute;
  background:rgba(255,255,255,0.3);
  height:30px;
  font-size:25px;
  vertical-align: middle;
  text-align: center;
  color:inherit;
  border: none;
  width:60px;
  bottom:0px;
  font-family:'raleway';
  width:50%;
}
#streakcycle{
  font-weight: bolder;
  font-size:20px;
  color:#6495ED;
}
#headingforstreak{
  color:white;
  font-size:30px;
  letter-spacing: 8px;
  padding:10px;
  display: block;
  text-align:center;
  vertical-align: middle;
}
#progress{background-color:white;
border-radius:4px;
padding:20px;
margin:30px;
display: block;
text-align:center;
font-size: 60%;
letter-spacing:5px;
color:#111;
}
#intim{
  left:0px;
  background:rgba(255,55,55,0.3);
}
#inlap{
  right:0px;
}
table{
  border-collapse: collapse;
  padding:10px;
}
table tr{
  width:40px;height:50px;
}
table tr:nth-child(even) {
  background-color: #eee;
}
table tr:nth-child(odd) {
 background-color: #fff;
}
table th {
  border-bottom: solid #111 4px;
}
#stopbut{
  position:fixed;
  z-index:999;
  display :block;
  width:100vw;
  bottom:50px;
  text-align:center;
}
#symbol{
  opacity:0;
  display:inline-block;
  border-radius:150px;
  padding:15px 15px;
  background-color: rgba(255, 255, 255, 0.5);
  transition:all 0.5s ease-in-out;
}
#boxshaped{
  margin:none;
  display:inline-block;
  margin-bottom:-3px;
  width:25px;
  height:25px;
  background-color: white;
}