/* Common Styling */
body{
    font-family: 'monospace', courier new;
    background-image: url(./wallpaper.jpg);
    background-size:cover;
}



/* Navbar Styling */
.navbar{
    position: absolute;
    width: 100%;
    display: flex;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    justify-content: space-between;
}
#timeElement{
    margin-right: 16px;
}
#title{
    margin-left: 16px;
}



/* Welcome Screen Styling */
#Welcome_screen{
    width:400px;
    padding:10px;
    position: absolute;
    top: calc(56.5%);
    left: calc(89.5% - 100px);
    transform: translate(-50%, -90%);
    background-color: rgba(255, 255, 255, 0.7);
    cursor: grab;
}
#hide_show_welcome{
    position: absolute;
    top: 60px; left: calc(97% - 100px);
    width:9%;
    font-family: 'monospace', courier new;
    padding: 5px;
    color: white;
    background-color: gray;
    border: none;
}
#hide_show_welcome:hover{
    opacity: 70%
}
#hide_show_welcome:active{
    opacity: 90%
}

#AI{
    position: absolute;
    top: 83px; left: calc(20% - 100px);
    width:9%;
    font-family: 'monospace', courier new;
    padding: 5px;
    color: white;
    border: none;

}

/* Apps Window Styling */
#calcclose, #todoclose, #welcomeclose, #notesclose, #quizclose, #mathclose, #scienceclose, #elaclose, #spanishclose, #ssclose, #settingsclose, #AIclose{
    cursor: pointer;
    color: black;
    font-family: 'monospace', courier new;
    width: 20px;
    height: 20px;
    background-color: #cc403d;
    border-radius: 24px;
    border: rgba(0, 0, 0, 0.25);
    margin-left: 6px;
}
.window {
  display: flex;
  flex-direction: column;
  position: absolute;
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.7);
}
.windowheader {
  width: 100%;
  display: flex;
  align-items: center;
  cursor: grab;
  justify-content: space-between;
  margin-top: 4px;
}
.headertext {
  margin: 1px;
  color: white;
  font-weight: 500;
  font-family: 'monospace', courier new;
}
#calc_func, #todo_func, #notes_func, #quiz_func, #math_func, #science_func, #ela_func, #spanish_func, #ss_func, #settings_func{
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    width: 520px;
    height: 500px;
    padding: 16px;
}


/* Calculator Styling */
#buttons{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:8px;
    padding:6px;
}
#buttons button {
    background-color: #e7e7e7;
    color: black;
    font-size: 20px;
    text-align: center;
    font-family: 'monospace', courier new;
    width: 50px;
    height: 50px;
    border: none;

}
#display{
    background-color: #555555;
    color: black;
    border: 13px;
    text-align: right;
    font-family: 'monospace', courier new;
    font-size: 70px;
    border: none;
    outline: none;
    width: 92%
}
#buttons button:hover {
    opacity: 70%
}
#buttons button:active {
    opacity: 90%
}
#calc_func{
    background-color: #008CBA;
    width: 300px;
    max-width: 300px;
    height: 490px;

}

/* Apps Icon Styling */

/* TodoList App */
.todoIco{
    padding: 16px;
    filter: drop-shadow(0 0 8px black);
    width: fit-content;
    color: #fff;
}
.todoIco.active{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 70%;
}
.todoIco:hover{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 70%;
}
.todoIco:active{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 90%;
}


/* Calculator App */
.calcIco{
    padding: 16px;
    filter: drop-shadow(0 0 8px black);
    width: fit-content;
}
.calcIco.active{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 70%;
}
.calcIco:hover{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 70%;
}
.calcIco:active{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 90%;
}


/* Notes App */
.notesIco{
    padding: 16px;
    filter: drop-shadow(0 0 8px black);
    width: fit-content;
}
.notesIco.active{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 70%;
}
.notesIco:hover{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 70%;
}
.notesIco:active{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 90%;
}


/* Quiz App */
.quizIco{
    padding: 16px;
    filter: drop-shadow(0 0 8px black);
    width: fit-content;
}
.quizIco.active{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 70%;
}
.quizIco:hover{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 70%;
}
.quizIco:active{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 90%;
}

/* Settings App */
.settingsIco{
    padding: 16px;
    filter: drop-shadow(0 0 8px black);
    width: fit-content;
}
.settingsIco.active{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 70%;
}
.settingsIco:hover{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 70%;
}
.settingsIco:active{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 90%;
}

/* Ask AI App */
.AIIco{
    padding: 16px;
    filter: drop-shadow(0 0 8px black);
    width: fit-content;
}
.AIIco.active{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 70%;
}
.AIIco:hover{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 70%;
}
.AIIco:active{
    padding: 16px;
    filter: drop-shadow(10 10 28px black);
    width: fit-content;
    opacity: 90%;
}





/* Notes and Todo_app Styling */
#Todo_box{
    font-family: 'monospace', courier new;
    font-size: 20px;
    width: 100%;
}
#Notes_box{
    font-family: 'monospace', courier new;
    font-size: 20px;
    width: 100%;
    height: 90%;
    resize: none;
}
#clear_tasks{
    background-color: red;
    font-family: 'monospace', courier new;
    border: none;
    font-size: 20px;
    width:20%;
    color: white;
}
#clear_notes{
    background-color: red;
    font-family: 'monospace', courier new;
    border: none;
    font-size: 20px;
    width: 100%;
    color: white;
 }
#delete_task{
    background-color: orange;
    font-family: 'monospace', courier new;
    border: none;
    font-size: 20px;
    width: 45%;
    color: white;
    button-align: right;
}
#add_task{
    background-color: green;
    font-family: 'monospace', courier new;
    border: none;
    font-size: 20px;
    width: 30%;
    color: white;
    button-align: right;
}
#clear_tasks:hover{
    opacity: 70%;
}
#clear_tasks:active{
    opacity: 90%;
}


#add_task:hover{
    opacity: 70%;
}
#add_task:active{
    opacity: 90%;
}


#delete_task:hover{
    opacity: 70%;
}
#delete_task:active{
    opacity: 90%;
}


#clear_notes:hover, #new_note:hover{
    opacity: 70%;
}
#clear_notes:active, #new_note:active{
    opacity: 90%;
}
/* Quiz App Styling */
#quiz_func{
    height: 100px;
    width: 450px;
}
.quiz_buttons{
    font-family: 'monospace', courier new;
    border: none;
    padding: 15px 20px;
    color: white;
    font-weight: 500;
}
/* Styling for each button in quiz_buttons */
#math{
    background-color: blue;
}
#math.active{
    background-color: blue;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#math:hover{
    background-color: blue;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#math:active{
    background-color: blue;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#science{
    background-color: green;
}
#science.active{
    background-color: green;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#science:hover{
    background-color: green;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#science:active{
    background-color: green;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#ela{
    background-color: yellow;
    color: black;
}
#ela.active{
    background-color: yellow;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#ela:hover{
    background-color: yellow;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#ela:active{
    background-color: yellow;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#ss{
    background-color: purple;
}
#ss.active{
    background-color: purple;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#ss:hover{
    background-color: purple;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#ss:active{
    background-color: purple;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#spanish{
    background-color: red;
}
#spanish.active{
    background-color: red;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#spanish:hover{
    background-color: red;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}
#spanish:active{
    background-color: red;
    filter: drop-shadow(10 10 28px black);
    opacity: 70%
}


/* Quiz Style */
.quiz_style{
    padding: 15px;
}
.quiz_style h2{
    border-bottom: 1px solid black;
    padding-bottom: 30px
}
.btn{
    font-family: 'monospace', courier new;
    font-weight: 500;
    width: 100%;
    text-align: left;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
}
#next-btn1, #next-btn2, #next-btn3, #next-btn4, #next-btn5{
    background: #001e4d;
    color: #fff;
    font-weight: 500;
    padding: 10px;
    margin: 20px auto 0;
    width: 102%;
    font-family: 'monospace', courier new;
    cursor: pointer;
    display: none;

}
.correct{
    background: #9aeabc;
}
.incorrect{
    background: #ff9393;
}

/* Settings Style */
#settings_func{
    height: 50%;
}
#bgDropdown{
  width: 100%;
  padding: 12px 40px 12px 16px;
  font-size: 16px;
  font-family: 'monospace', courier new;
  color: #333;
  border: 2px solid #e0e0e0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}