body {

   margin: 0;
   background-color: antiquewhite;
   font-family: "Times New Roman"

}
footer {
   text-align: center;
   padding: 1px;
   background-color: DarkSalmon;
   color: white;
   width: 100%;
   position: absolute;
 }

.dropbtn {
   background-color: #eff175;
   color: rgb(0, 0, 0);
   padding: 5px;
   font-size: 16px;
   border: none;
   
 }
 
 .dropdown {
   margin-right: 10px;
   position: relative;
   display:flex;
 }
 
 .dropdown-content {
   display: none;
   position:fixed;
   margin-top: 40px;
   background-color: #ffffff;
   min-width: 10px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 5;
   text-align:left;
 }
 
 .dropdown-content a {
   color: black;
   padding: 0px 0px;
   text-decoration: none;
   display: block;
 }
 
 .dropdown-content a:hover {background-color: #ffa0cd;}
 
 .dropdown:hover .dropdown-content {display: block;}
 
 .dropdown:hover .dropbtn {background-color: #df4d6c;}

.navmenu {
   margin: auto;
   margin-right: 20px;
   text-align:end;
   width: 100%;
   font-family: arial;
   background-color: #eff175;
   padding: 0px ;
   justify-content:end;
   list-style: none;
   position: fixed;
   display:flex;
   box-shadow: 1px 0 5px black;
   z-index: 9999;
} 
 .navmenu a {
   text-decoration:none;
   padding: 20px;
   color: #000000;
   display:flex;
      
 }
 .navmenu .logo {
   display:flex;
   align-items: center;
   justify-content: right;
   position: relative;
 }
 .navmenu .logo nav{
   justify-content: left;
   margin-right: 41rem;
   position: relative;
   display: flex;
 }
 .navmenu .logo a {
   margin-left: 1rem;
   font-weight: 700;
   color: #000000;
   font-size: 15px;
   font-family: arial;
   align-items: center;
   justify-content: center;
   text-decoration: none;
 }
 .navmenu .logo img {
   width: 3rem;
   height: 2rem;
   border-radius: 50%;
   margin-top: 10px;
   
 }

.sidebar {

   padding: 0;
   width: 0;
   background-color: #eff175;
   border-color: #000000;
   display: block;
   position:fixed;
   z-index: 1;
   top: 0;
   left: 0;
   overflow-x: hidden;
   transition: 0.5s;
   height: 100%;
   box-shadow: 1px 0 5px black;

}
.profileside {
   line-height:15px;
   margin-top: 200px;
   margin-left: 20px;
   text-align: left;
   height:600px;
   width: 100%;   
   transition: 0.3s;
}
.profileside a{
   font-family: 'Times New Roman', Times, serif;
   text-decoration: none;
   color: #000000;
}

.sidebar .closebtn {
   position: absolute;
   top: 0px;
   right: 30px;
   font-size: 30px;
   margin-left: 50px;
   color: #000000;
   background-color: #eff175;
   border: none;
 }
 
 .openbtn {
   font-size: 20px;
   cursor: pointer;
   background-color:#eff175;
   color: #000000;
   padding: 10px 15px;
   border: none;
 }
 
 .openbtn:hover {
   background-color: #eff175;
 }
 
 #main {
   transition: margin-left .5s;
   padding: 16px;
 }
 @media screen and (max-height: 450px) {
   .sidebar {padding-top: 15px;}
   .sidebar a {font-size: 18px;}
 }
 
.jam-digital {
   width: 100%;
   margin: 30% 10%;
   position:absolute;
   transition: 0.3s;
}

#jam span {
   float: left;
   text-align: left;
   font-size: 17px;
   margin: 0 10px;
   padding: 17px;
   width: 1%;
   border-radius: 10px;
   box-sizing:border-box;
   display: inline-table;

   
}
#jam span:nth-child(1) {
   background: #a70c0c;
   width: 0px;
   margin: 1px;
   
}
#jam span:nth-child(2) {
   background: #f6ab29;
   width: 0px;
   margin:1px;
   
}
#jam span:nth-child(3) {
   background: #298f19;
   width: 0px;
   margin: 1px;
   
}
#jam::after {
   content: "";
   display: block;
   clear: both;
}
#unit span {
   float: left;
   width: 10px;
   margin-top: 10px;
   text-align: left;
   font-size: 15px;
   text-shadow: 1px 1px 1px rgba(10, 10, 10, 0.7)
}
span.turn {
   animation: turn 0.7s ease;
}
@keyframes turn {
   0% {transform: rotateX(0deg)}
   100% {transform: rotateX(360deg)}
}
@media screen and (max-width: 15px){
   #jam span {
      float: left;
      text-align: left;
      font-size: 10px;
      margin: 0 1.5%;
      padding: 2px;
      width: 20%;
   }
  
   .jam-digital {
      width: 20%;
      margin: 30% 40%;
      transition: 0.3s;
   }
   #unit span {
      width: 10%;
   }
}

main.content {
   margin-top: 0px;
   margin-left: 15px;
   padding: 50px 16px;
   height: 1000px;
   text-align: justify;

}
main .container img{
   width: 60%;
   width: 360px;
   height: 200px;
   display: block;
   margin: 0 auto;
}
main .container .image img{ 
   width: 60%;
   width: 360px;
   height: 350px;
   display: block;
   margin: 0 auto;
}
.btn {

   padding: 14px 14px;
   background-color: #f880b2;
   border: none;
   border-radius: 8px;
   color: rgb(0, 0, 0);
   font-weight: bold;
   box-shadow: 0 2px black;

}

button.btn:hover {

   background-color:#eff175;

}

button.btn:active {

   margin-top: 3px;

   box-shadow: none;

}

@media screen and (max-width: 400px) {

   .sidebar {
      width: 100%;
      height: auto;
      position:relative;
   }

   .sidebar a {
      float: left;
      transition: 0.3s;
   }

   main.content {
      margin-left: 0;
   }

}

@media screen and (max-width: 400px) {

   .sidebar a {

      text-align: center;
      transition: 0.3s;
      float: none;

   }
}