body {
    align-items: center;
    color: navy;
    background-color: #F2EEB8;
    max-width: 90%;
    margin: auto;
    font-size: 12px;
    text-align: center;
    height: 100%;
  }


/* background: url("duo1.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  */

.header{
  margin-top: 60px;
  text-align: center;
  margin-bottom: 100px;
}

h1 {
  font-size: 40px;
  margin-bottom: 50px;
  font: cursive;
}

h2 {
  font-size: 25px;
}

h3 {
font-family: courier new;
color: red;
}

p {
  font-size: 20px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.details1 {
font-family: courier new;
font-size: 25px;
margin: 0px;
color: indianred;
}

.dropdown {
z-index: 10;
position: absolute;
left: 50%;
transform: translateX(-50%);
padding-top: 100px;
padding-bottom: 50px;
}

.simple-highlight{
  background-color:#F2EEB8;
  padding:0.1em 0.2em;
  font-family: courier new;
font-size: 25px;
color: indianred;
}

.button-parent{
  padding: 5px 0px;
  cursor: pointer;
  border: 1px solid black;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: auto;
  width: 50%;

}

.button-child{
  top: 0px;
  left: 0px;
  height: 100%;
  background-color: #3CE1FF;
  position: absolute;
  z-index: -1;
  background-color: #3CE1FF;
}


.fire-animation{
    animation: fire 8s linear infinite; 
}

@keyframes fire {
    0%{
        width: 0%; background: #F2EEB8;
    }
    25%{
        width: 50%;
    }
    50%{
        width: 100%; background: #3CE1FF;
    }
    75%{
        width: 50%;
    }
    100%{
        width: 0%; background: #F2EEB8;
    }
}

.animation1 {
  position: absolute;
  text-align: center;
  width: 75px;
  height: 75px;
  line-height: 75px;
  margin-top: -90px;
  border-radius: 50%;
  
  animation: mymove 10s infinite;
}

@keyframes mymove {
  0% {left: 0%; background: limegreen;}
  50% {left: calc(100% - 75px); background: skyblue;}
  100% {left: 0%; background: limegreen;}

}

.bloodpulsing {
  position: absolute;
  text-align: center;
  width: 75px;
  height: 75px;
  line-height: 75px;
  border-radius: 50%;
  top: calc(100% - 75px);
  animation: mymove2 10s infinite;

}

@keyframes mymove2 {
  0% {left: calc(100% - 75px); background: yellowgreen;}
  50% {left: 0%; background: orangered;}
  100% {left: calc(100% - 75px); background: yellowgreen;}
}

.border1 {
  position: absolute;
  animation: mymove3 20s infinite;
  text-align: center;
  width: 75px;
  height: 75px;
  line-height: 75px;
  border-radius: 50%;

}

@keyframes mymove3 {
  0%   {background: orangered; left: 0%; top: 0%;}
  25%  {background: lightgoldenrodyellow; left: calc(100% - 75px); top: 0%;}
  50%  {background: skyblue; left: calc(100% - 75px); top: calc(100% - 75px);}
  75%  {background: limegreen; left: 0%; top: calc(100% - 75px);}
  100% {background: orangered; left: 0%; top: 0%;}
}

.border2 {
  position: absolute;
  animation: mymove3 20s infinite;
  text-align: center;
  width: 75px;
  height: 75px;
  line-height: 75px;
  border-radius: 50%;
  margin-top: 720px;

}

@keyframes mymove3 {
  0%   {background: orangered; left: 0%; top: 0%;}
  25%  {background: lightgoldenrodyellow; left: calc(100% - 75px); top: 0%;}
  50%  {background: skyblue; left: calc(100% - 75px); top: calc(100% - 75px);}
  75%  {background: limegreen; left: 0%; top: calc(100% - 75px);}
  100% {background: orangered; left: 0%; top: 0%;}
}

.border3 {
  position: absolute;
  animation: mymove3 20s infinite;
  text-align: center;
  width: 75px;
  height: 75px;
  line-height: 75px;
  border-radius: 50%;
  margin-top: 1520px;

}

@keyframes mymove3 {
  0%   {background: orangered; left: 0%; top: 0%;}
  25%  {background: lightgoldenrodyellow; left: calc(100% - 75px); top: 0%;}
  50%  {background: skyblue; left: calc(100% - 75px); top: calc(100% - 75px);}
  75%  {background: limegreen; left: 0%; top: calc(100% - 75px);}
  100% {background: orangered; left: 0%; top: 0%;}
}

.bloodpulsing2 {
  position: absolute;
  text-align: center;
  width: 75px;
  height: 75px;
  line-height: 75px;
  border-radius: 50%;
  top: calc(100% - 75px);
  animation: mymove2 10s infinite;
  margin-top: 800px;

}

@keyframes mymove2 {
  0% {left: calc(100% - 75px); background: yellowgreen;}
  50% {left: 0%; background: orangered;}
  100% {left: calc(100% - 75px); background: yellowgreen;}
}

.bloodpulsing3 {
  position: absolute;
  text-align: center;
  width: 75px;
  height: 75px;
  line-height: 75px;
  border-radius: 50%;
  top: calc(100% - 75px);
  animation: mymove2 10s infinite;
  margin-top: 1600px;

}

@keyframes mymove2 {
  0% {left: calc(100% - 75px); background: limegreen;}
  50% {left: 0%; background: skyblue;}
  100% {left: calc(100% - 75px); background: limegreen;}
}



.audio {
position:relative;
margin-top: 180px;
padding-bottom: 100px;
}


.submission {
  position: relative;
 margin: center;
 width: 100%;
 padding-bottom: 100px;
 padding-top: 150px;
}


.img1 {
  position: absolute;
  padding-top: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.img2 {
  position: absolute;
  padding-top: 1720px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.img3 {
  overflow: hidden;
  position: absolute;
  padding-top: 3200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}


table {
  width: 100%;
}

td, th {
  text-align: left;
  font-size: 30px;
  font-weight: normal;
}

mark {
  background: yellow;
}

summary {
  list-style-type: '🌝';
} 

details[open] > summary {
  list-style-type: '🌚';
}

summary::marker {
  font-size: 3.5em;
}

.text1 {
  position: relative;
  margin-top: 250px;
  margin-bottom: 100px;
}


.right-align{
  text-align: right;
  font-size: 30px;
  margin: 0px;
}
 
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #39FF14;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.button1 {
  border: 5px groove #ffff00;
  background-color: #ffff00;
  width: 120px;
  height: 45px;
  color: orangered;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 40px;
  cursor: pointer;
  

}

.button-left {
position: absolute;
left: 8%;
  align-items: left;
}

.button-right {
  position: absolute;
left: 80%;
  align-items: right;
  top: 950px;

}

.button-fidgit {
    position: absolute;
left: 20%;
  align-items: right;
  top: 1600px;
}

.button-disassociate {
      position: absolute;
left: 85%;
  align-items: right;
  top: 1900px;
}

.button-memory {
      position: absolute;
left: 15%;
  align-items: right;
  top: 2100px;
}

.button2 {
  border: 5px groove #ffff00;
  background-color: #ffff00;
  width: 120px;
  height: 45px;
  color: orangered;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 100px;
  cursor: pointer;

.bottom {
  position: absolute;
  font-size: 30px;
}

.footer {
  position: fixed;
  bottom: 0;
  height: 75px;
}

.details {
  position: absolute;
}

.audio2 {
position: relative;
margin-top: 2500px;
padding-bottom: 200px;
}