*{
   padding: 0;
   margin: 0;
}
body{ 
/*    background-color: #f4f4f4; */
   height: 100vh;
   /* width: 50px; */

}

.header{
   box-shadow: 1px 1px 4px rgb(142, 129 , 129);
   background-color: #fff;
}
.navbar{
   display: flex;
   justify-content:space-around;
   align-items: center;
   padding: 12px;
}
.logo{
   font-weight: bolder;
   font-size: 25px;
   color: rgb(43, 86, 90);
   font-family: 'Cinzel', serif;
   text-shadow: 1px 1px black;
   position: relative;
}

.linkscontainer{
   display: flex;

}
.link{
   padding: 10px;
   list-style-type: none;
   transition: all 0.3s;
}
.link a{
   text-decoration: none;
   color: rgb(101, 96,96);
   font-size: larger;
   font-weight: bold;
   padding: 10px;
   font-family: 'Cinzel', serif;
}

.link:hover{
   transform: scale(1.2);
}
.link a:hover{
   color: blue;
}

/* hamburger menu*/
.hamburgerlines{
   display: none;
   width:35px;
   height: 30px;
   margin: 10px 10px;
   position: relative;
   cursor: pointer;
}

.line{
   background-color: rgb(69,65,65);
   position: absolute;
   border-radius: 2px;
   width: 100%;
   height: 4px;
   transition-duration: 500ms;
}

.line1{
   top: 0px;
   left: 0px;
}

.line2{
   top: 13px;
   left: 0px;
   opacity: 1;
}
.line3{
   bottom: 0px;
   left: 0px;
}

.hamburgerlines.open.line1{
   transform:rotate(45deg);
   top: 13px;
}
.hamburgerlines.open.line2{
   opacity: 0;
}
.hamburgerlines.open.line3{
   transform: rotate(-45deg);
   top: 13px;
}
@media (max-width:768px){
   .hamburgerlines{
       display: inline-block;  
   }
   .linkscontainer{
      position: absolute;
      z-index: 1;
       display: none;
   }
   .logo{
       font-size: 25px;
   }
   .linkscontainer{
       position: absolute;
       top: 70px;
       background-color: rgb(80, 83, 83);
        width:70%; 
       height: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       left: -100%;
       transition: 0.6s ease-in-out;
   }
.link{
   margin: 20px;
}

.link a{
   color: white;
   font-size: 30px;
   font-family: 'Cinzel', serif;
}
.hamburgerlines.open + .linkscontainer{
   left: 0%;
}
}

    
body{
   margin: 0;
   padding: 0;

    display: flex; 
/*     justify-content: center; */
   flex-direction: column;
   /* align-items: center; */
    /* justify-content: center;  */
   /* background-image: repeating-linear-gradient(100deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b,#6fba82); */
background-image:linear-gradient(45deg, yellow, black, violet); 
}


.store{
    background-color: yellow;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:100%;
    align-self: center;
    margin-top: 30px;
}

.container{
   position: relative;
    border: 6px solid black;
    width:fit-content;
    align-self: center;
    background-color:yellow;
    margin-top: 100px;
    overflow: hidden;
    
}

#stopwatch{
    font-size: 100px;
    box-shadow: 0px 0px 10px black;
    padding: 7px;
    color: red;
    border-radius: 7px;
}



button:hover{
    cursor: pointer;
}


h1{
   font-family: 'Cinzel', serif;  
   font-size: 40px;
   letter-spacing: 6px;
/* font-family: 'Creepster', cursive;  */
 /* font-family: 'Tilt Warp', cursive; */
 text-align: center;
}



/* h2{ 
   
font-family: 'Tangerine', cursive;
font-size: 60px;
letter-spacing: 6px;
} */



h1 span{
   
       background-image:repeating-linear-gradient(45deg,blue 0%, aqua 30%, yellow 67%,red 100%);
        background-size: auto; 
       background-clip: border-box;
       background-size: 200% auto;
       color: white;
       background-clip: text;
       text-fill-color:transparent;
       -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; 
        animation: anim 2s linear infinite;
   
   
   
   }
   @keyframes anim{
       to{
           background-position: 150% center;
       }
}






.contain{
   position: relative;
   -webkit-box-reflect: below -20px linear-gradient(transparent,rgba(0,0,0,.2));
   /* align-self: center; */

}

.contain span{
   position:relative;
   display: inline-block;
   font-size: 60px;
   top: 20px;
   letter-spacing: 10px;
font-family: 'Creepster', cursive; 
color:RED;

   animation: jump 1s infinite;
   animation-delay: calc(.1s * var(--i));
}

@keyframes jump{
   0%,40%,100%{
       transform: translateY(0)
   }

20%{
   transform: translateY(-20px)
}
}
button{
   padding: 15px;
   border: none;
   border-radius: 7px;
   color: yellow;
   box-shadow: 5px 5px 1px rgba(56,51,51,0.5);
   transition: all 0.5s;
   font-size: larger;
   margin: 17px;
   font-family: 'Cinzel', serif;  
   width: 85px;
}

#start{
   background-color: blue;
}

#reset{
   background-color: red;
}
#stop{
   background-color:mediumturquoise;
}



@media (max-width:768px){
   #stopwatch{
      font-size: 60px;
      padding: 4px;
   }
   button{
      padding: 10px;
      font-size:small;
      margin: 10px;
      width: 53px;
   }
   .logo{
      font-size: 19px;
   }
   h1{
      margin-top: 12px;
      font-size: 27px;
      letter-spacing: 1px;
   }
   .contain span{
      font-size: 40px;
      letter-spacing: 6px;  }