* {
    box-sizing: border-box; 
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color:black;
}

.menubar {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    height:5vh;
    width:100vw;
    color:red;
    font-family: Digital;
    font-size:20px;
    padding-top:10px;
    padding-bottom:10px;
    position:absolute;
    top:0;
}

.activatedbar {
    position:absolute;
    color:black;
    top:0;
    z-index:-1;
    width:100vw;
    /* background-color:yellow; */
    height:30px;
    left:0;
}

.aboutactivate {
    animation:abtload 2s forwards;
}

.meteractivate {
    animation:mtrload 2s forwards;
}

.calcactivate {
    animation:calcload 2s forwards;
}

.hexactivate {
    animation:hexload 2s forwards;
}

.peractivate {
    animation:perload 2s forwards;
}

.artactivate {
    animation:artload 2s forwards;
}

@keyframes abtload {
    0% {
        background-color:none;
        width:0vw;
        color:black;
    }

    100% {
        background-color:red;
        width:16vw;
        color:red;
    }
}

@keyframes mtrload {
    0% {
        background-color:none;
        width:0vw;
        color:black;
    }

    100% {
        background-color:red;
        width:28vw;
        color:red;
    }
}

@keyframes calcload {
    0% {
        background-color:none;
        width:0vw;
        color:black;
    }

    100% {
        background-color:red;
        width:43vw;
        color:red;
    }
}

@keyframes hexload {
    0% {
        background-color:none;
        width:0vw;
        color:black;
    }

    100% {
        background-color:red;
        width:55vw;
        color:red;
    }
}

@keyframes perload {
    0% {
        background-color:none;
        width:0vw;
        color:black;
    }

    100% {
        background-color:red;
        width:75vw;
        color:red;
    }
}

@keyframes artload {
    0% {
        background-color:none;
        width:0vw;
        color:black;
    }

    100% {
        background-color:red;
        width:95vw;
        color:red;
    }
}

.subpage:hover {
    color:white;
    cursor:pointer;
    transition:1s;
}

#soundBarContainer {
    display: flex;
    align-items: center;
}

#soundBar {
    width: 400px; /* Adjust the width as needed */
    height: 20px; /* Adjust the height as needed */
    background-color: #f0f0f096;
    align-items:center;
    border-radius: 10px;
    overflow: hidden;
}

#soundLevel {
    width: 0;
    height: 100%;
    background-color: red; /* Change the color as needed */
    transition: width 0.1s ease-in-out;
}

#decibelDisplay {
    font-size: 16px;
    margin-top: 10px;
    font-family: Digital ;
    color:white;
}

#hertzDisplay {
    font-size: 16px;
    margin-top: 10px;
    font-family: Digital ;
    color:white;
}

#buttonContainer {
    display: flex;
    justify-content: center;
    gap:10px;
}

button {
   background-color:red;
   color:white;
   border:none;
   width:100px;
   margin-top:15px;
   height:25px;
   transition:0.4s;
   font-family: Digital;
}

button:hover {
    background-color: rgba(255, 0, 0, 0.399);
    cursor:pointer;
}

.main-container {
    display:flex;
    flex-direction:column;
    height:250vh;
}


.top {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    margin-bottom:100px;
    align-content:center;
    /* background-color:orange; */
    font-size:50px;
    font-family: Digital;
    animation:blink 10s infinite linear;
    transition: 1s;
    margin-top:30vh;
}

@font-face {
    font-family: "Digital";
    src: url("fonts/digital-7\ \(mono\).ttf");
    src: url("fonts/digital-7\ \(mono\).ttf") format('truetype');
    font-weight:100px;
    font-style:normal;
}

@keyframes blink {
    0% {
        color:white;
    }

    10% {
        color:#008cff;
    }

    20% {
        color:#b8ad09;
    }

    30% {
        color:#00912a;
    }

    40% {
        color:#bfb306;
    }

    50% {
        color:#039990;
    }

    60% {
        color:#d9cc0f;
    }

    70% {
        color:#c7c202;
    }

    80% {
        color:#cca60d;
    }

    90% {
        color:#99bab8;
    }

    100% {
        color:white;
    }
}

.bottom {
    display:flex;
    flex-direction: row; 
    justify-content: space-evenly;
    margin-top:100px;
    font-family: Digital ; 
    font-size: 25px;
}

.three {
    /* background-color:orange;  */
    padding-left: 5px;
}

.three:hover {
    cursor:pointer;
}


/* this is where i stopped */

.container {
    width: 300px;
    margin: 0 auto;
    text-align: center;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
    font-family: Digital;
    color:white;
  }
  
  input {
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
  }

  #result {
    margin-top: 20px;
    font-family: Digital;
    color:white;
  }
  

  .three2{
    /* background-color:orange;  */
    padding-left: 5px;
}

.three2:hover {
    cursor:pointer;
}

.one {
    margin-right:100px;
}

.instruction {
    color:white;
    font-family: Digital;
    display:flex;
    flex-direction:row;
    justify-content:center;
    font-size:13px;
}

.insmid {
    margin-top:10px;
}