html, body {
    height: 100%;
    background: rgb(176, 179, 183);
}


#wrapper {
    width:60%;
    margin:0 auto;
}

#content {
    width:100%;
    background-color: none;
    animation:fade-in ease 3s;
}


h1 {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 4.5vw;
    text-align:center;
    color:rgb(63, 73, 84);
    padding:100px 0 0 0;
    animation:tilt ease 16s;
    animation-fill-mode: forwards;
}

h2 {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 2.5vw;
    color:rgb(118, 128, 146);
    text-align: center;
    padding:25px 0 0 0;
}

h2:hover {
    animation:tilt ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

p {
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
    font-size: 22px;
    color:#40404b;
    text-align: justify;
    padding:70px 0 0 0;
}

p2 {
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
    font-size: 18px;
    font-weight:bold;
    color:#40404b;
    text-align: justify;
    padding:70px 0 0 0;
}

p:hover{
    animation: shaking 0.5s;
    animation-iteration-count: infinite;
}

p2:hover {
    animation:tilt ease 3s;
    animation-iteration-count: 4;
}

.img1 {
    width: 30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    animation: shaking 4s;
    animation-iteration-count: infinite;
}

.img2 {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

a {
    font-weight: bold;
    color:rgba(84, 7, 7, 0.795);
}

.azure {
    color: #007fff;
}

.viridian {
    color:#40826D;
}

.violet {
    color:#8F00FF;
}

.faded {
    color:#40404b58;
}


a:link, a:visited {
    text-decoration:none;
}

a:active, a:hover {
    text-decoration: none;
    animation:pulse ease 1.5s;
    animation-iteration-count: infinite;
}

.name {
    animation: flicker 1.4s;
    animation-iteration-count:infinite;
}

.hidden {
    display: none;
  }

#situp {
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
    font-size: 22px;
    color:#40404b;
    text-align: justify;
    padding:70px 0 0 0;
    animation:slide-up 4s forwards;
    margin-top: 100%;
    height: 0;
    overflow: hidden;
}

#backButton {
    position: relative;
    display: inline-block;
    background-color:rgba(207, 206, 206, 0.986);
    border-radius: 16px;
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
  }

#backButton:hover {
    position: relative;
    display: inline-block;
    background-color:rgba(207, 206, 206, 0.534);
    border-radius: 16px;
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
}

/* styling for dropdown menu */
.dropbtn {
    position: relative;
    display: inline-block;
    background-color: #f9f9f9;
    border-radius: 16px;
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
  }
  
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
  }
  
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
  }
  
.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: rgba(63, 73, 84, 0.644);
}


/*styling for roll btn*/
.rollbtn {
    position: relative;
    display: inline-block;
    background-color:rgba(207, 206, 206, 0.644);
    border-radius: 16px;
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
  }
.rollbtn:hover {
    position: relative;
    display: inline-block;
    background-color:rgba(207, 206, 206, 0.123);
    border-radius: 16px;
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
}

/*styling for counter button*/
#addentry {
    position:relative;
    display: inline-block;
    background-color: #f9f9f9;
    border-radius: 16px;
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
  }

#addentry:hover {
    background-color: #f1f1f1;
}

#result {
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
    font-size: 14px;
    font-weight:bold;
    color:#40404b;
    text-align: justify;
}

#notif {
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
    font-size: 15px;
    font-weight:bold;
    animation: float-chgclr 1.35s;
    animation-iteration-count: 5;
}

/*animations*/ 
@keyframes fade-in {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@keyframes flicker {
    0% { 
        opacity: 0; 
      } 
    50% { 
        opacity: 0.7; 
      } 
    100% { 
        opacity: 0; 
      } 
}

@keyframes pulse {
    100% {
        opacity:1;
    }
    30% {
        opacity:0.3;
    }
}

@keyframes shaking {
    0% {
        transform: translateX(0)
    }
    25% {
        transform: translateX(5px)
    }
    50% {
        transform: translateX(-5px)
    }
    75% {
        transform: translateX(5px)
    }
    100% {
        transform: translateX(0)
    }
   }

@keyframes tilt {
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(5deg);
    }
  }

@keyframes float-chgclr {
    0%, 100% {
        bottom:0;
        color:rgb(95, 49, 49);
    }
    50% {
         bottom:60px;
         color:rgba(138, 69, 69, 0.39);
    }
}

@keyframes slide-up {
  to {
    margin-top: 0%;
    height: 100%;
  }
}