*{
    margin: 0px;
    padding: 0px;
}

* h1{
    color: black;
    letter-spacing: 0.25em;
}


#nav-bar{
    display: flex;
    align-items: center;
    background-color: rgb(82 80 80);
    width: 100%;
    position: fixed;
    z-index: 10000;
    top: 0;
    height: 10vh;
}

#nav-bar #app-text{
    
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0px 10px 1vw;
    /* background-color: white; */


}

#nav-bar #app-text a{
    border-right: 2px solid white;
    padding-right: 1.5vw;
    letter-spacing: 0.25em;
    font-size: 1.7vw;
    text-decoration: none;
    color: white;
}



#nav-bar #nav-section{
    display: flex;
    flex-direction: row-reverse;
    /* padding-left: 20%; */
    /* background-color: brown; */
    padding-right: 5vw;
    width: 80%;
}

#nav-bar #nav-section #nav-ul{
    /* background-color: black; */
    display: flex;
    list-style: none;
    align-items: center;
}

#nav-ul li{
    margin: 6px 1vw;
}

#nav-ul li a{
    padding: 3px 1.5vw 2px 1.5vw;
    font-size: 1.7vw;
    color: #e2e2e2;
    text-decoration: none;
    font-weight: bold;
}

#nav-ul li a:hover{
    color: white;
    text-decoration: underline;
}

#alarm-settings{
    padding: 12px 25px;
    border: none;
    font-size: 1.2vw;
    background-color: white ;
    color: black;
    letter-spacing: 0.25em;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    border: 0.5px solid rgb(8, 7, 7);
    box-shadow: 0px 0px 7px 0px white;
}

#alarm-settings:hover{
    filter: brightness(0.9);
}

.settings-box{
    
    position: absolute;
    
    background-color: rgb(144 142 142) ;
    height: 35vmin;
    width: 16vmax;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;
    padding: 5vh 2vw;
}

.closed-settings-box{
    top: 12vh;
    right: 5vw;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.1);
    transition: transform 0.4s, top 0.4s; 
}

.open-settings-box{
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.4s, top 0.4s; 
    top: 35vh;
    right: 0vw;
    left: 87vw;
}


#main-settings{
    /* border: 2px solid white; */
    width: 100%;
    height: 100%;
    padding: 2vmin 0.5vmax 0vmin 0.5vmax ;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    flex-direction: column;

}

#settings-done{
    height: 5vmin;
    /* padding: 10px 20px; */
    border: none;
    font-size: 1.2vmax;
    background-color: white ;
    color: rgb(81, 78, 78);
    letter-spacing: 0.25em;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid rgb(35, 35, 35);
    box-shadow: 0px 0px 12px 0px #e1dddd;
}

#settings-done:hover{
    filter: brightness(0.85);
}


.inputs2{
    padding: 2vmin 0px;
}
.inputs2 h5{
    /* display: flex; */
    font-size: 1.5vmax;
    color:#f5f3f3;
    margin: 4px 0px ;
}

.inputs2 select{
    border: none;
    padding: 4px;
    width: 100%;
    background: transparent;
    border-bottom: 2px solid white;
    font-size: 1.3vmax;
    color: rgb(45, 44, 44);

}

/* .inputs2 select option{
    font-size: vmax;
    height: 10vh;
    
} */



#main-body{
    /* position: relative;
    top: 9vh; */
    padding: 15vh 2vw 25vh 2vw;
    /* background-color: rgb(81, 78, 78) ; */
    background-color: rgb(37 34 34);
    height: max-content;
    min-height: 60vh;
    /* height: max(100vh, inherit ); */
    width: 100%;
}

#footer{
    position: fixed;
    z-index: 10000;
    height: 12vh;
    width: 100%;
    bottom: 0;
    background-color: rgb(82 80 80);
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    

}

#footer #add-alarm{
    padding: 5vh 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

#add-alarm-button{
    padding: 12px 25px;
    border: none;
    font-size: 1vw;
    background-color: rgb(81, 78, 78) ;
    color: white;
    letter-spacing: 0.25em;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid white;
    box-shadow: 0px 0px 7px 0px #ffffff;;
}

#add-alarm-button:hover{
    filter: brightness(0.89);
}

.no-alarm-box{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    width: 100vw;
}

.no-alarm-box h1{
    color:#cccfcf;
    font-size: 5vmax;
    letter-spacing: 0.15em;
}

.add-alarm-box{
    bottom: 20vh;
    position: absolute;
    left: 20vw;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.1);
    transition: transform 0.4s, top 0.4s; 
    background-color: rgb(160, 157, 157) ;
    height: 50vh;
    width: 60vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid rgb(255, 255, 255);
    box-shadow: 0px 0px 7px 0px #e1dddd;
    /* position: relative; */
    
}

#add-alarm-box #input-section{
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* background-color: green; */
    width: 100%;
    position: relative;
    
}

#input-section .inputs{
    padding: 10vh 2vw;
    border-radius: 20px;
    border: 1px solid #bfbfbf;
    background-color: rgb(81, 78, 78);
    border: 1px solid rgb(253, 252, 252);
    box-shadow: 0px 0px 10px 0px #e1dddd;
}

#input-section .inputs select{
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: none;
    font-size: 3vmax;
    color:white;
}

.ok-button{
    padding-top: 2vmin;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 50%;
}

.ok-button button{
    padding: 2vh 3vw;
    border-radius: 10px;
    border: 1px solid grey;
    background-color: white;
    font-size: 2vmax;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid rgb(106, 105, 105);
    box-shadow: 0px 0px 10px 0px #4d4d4d;

}

.ok-button button:hover{
    filter: brightness(0.9);
}

.open-add-alarm{
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    bottom: 0vh;
    /* right: 40vw; */
    left: 50vw;

}

.alarms{
    height: max-content;
    /* min-height: 15vh; */
    width: 90vw;
    padding: 5vh 2vw;
    border-bottom: 1px solid white;
    background-color: #676a6a;
    display: flex;
}

.alarms .alarmTime{
    padding: 10px 0px;
    width: 70%;
}

.activatedH1{
    font-size: 4vw;
    color:white;
}

.activatedH4{
    font-weight:400;
    font-size: 1.5vw;
    padding: 4px 0px;
    /* color: #bfbfbf; */
    color: white;

}

.ringingHeading{
    font-size: 3vw;
    color:white;
}

.ringingSubHeading{
    font-weight:400;
    font-size: 2vw;
    padding: 4px 0px;
    /* color: #bfbfbf; */
    color: white;
}

.alarmDeactivatedH1{
    /* padding: 10px 0px;
    width: 70%; */
    color: #e1e2e1;
    font-size: 4vw;
}

.alarmDeactivatedH4{
    /* padding: 10px 0px;
    width: 70%; */
    color: #bfbfbf;
    font-weight:400;
    font-size: 1.5vw;
    padding: 4px 0px;
}

.alarms .set-unset{
    padding: 3% 4% 2% 3%;
    width: 15%;
    
}

.set-unset .toggleButton{
    height: 1.4vmax;
    width: 5.3vmax;
    background-color: blue;
    border-radius: 25px;
    display: flex;
    flex-direction: row;
    padding: 0.7vmax 0.5vmax;
    cursor: pointer;
    display: flex;
    /* transition: flex-direction 2s; */
    transition-property: flex-direction;
    transition-duration: 2s; 
}

.set-unset .toggleButton:hover{
    background-color: rgb(19, 19, 165);
}

.circle{
    height: 1.5vmax;
    width: 1.5vmax;
    border-radius: 100%;
    background-color: white;
    position: relative;
}

.move-toggle{
    display: flex;
    padding: 0.7vmax 0.5vmax;
    cursor: pointer;
    border-radius: 25px;
    flex-direction: row-reverse;
    transition-property: flex-direction;
    transition-duration: 2s;
    background-color: rgb(46, 45, 45);
    height: 1.4vmax;
    width: 5.3vmax;
}

.alarms .deleteAlarm{
    padding: 3% 4% 2% 3%;
    width: 15%;
}

.stop-alarm, .snooze-alarm{
    padding: 3% 4% 2% 3%;
    width: 15%;
}

.stop-button, .snooze-button{
    padding: 0.9vmax 1vmax;
    border-radius: 1.5vmax;
    border: 1px solid grey;
    background-color: #e2e2e2;
    font-size: 3vmin;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid rgb(35, 35, 35);
    box-shadow: 0px 0px 12px 0px #2c2b2b;
    
}

.deleteAlarm button{
    padding: 0.9vmax 1vmax;
    border-radius: 1.5vmax;
    /* border: 1px solid grey; */
    background-color: white;
    font-size: 3vmin;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid rgb(35, 35, 35);
    box-shadow: 0px 0px 12px 0px #2c2b2b;
    
    
}

.deleteAlarm button, .stop-button, .snooze-button:hover{
    filter: brightness(0.89);
}