html{
    scroll-behavior: smooth;
}
h1,h3 {
    color: rgb(0, 0, 79); 
    text-align: center; 
    font-size: 1.5em; 
    text-shadow: 2px 2px 5px gray;
}
#hContent {        
    display:flex; 
    flex-direction: column; 
    margin-top: 50px;
}
#schoolLogo { 
    display: block; 
    width:auto; 
    height: auto;  
    margin:20px auto 0 auto; 
    z-index: 1; 
    clip-path: circle(50%);
    max-height: 100px;
}
#schoolName {
    font-size: 1.5em; 
    color:#9c7d5c; 
    text-shadow: 2px 2px 2px #dbbc8c;
}
#roomList { 
    list-style: none; 
    padding: 0; 
}
label {
    font-size: 16px; 
    font-weight: bold; 
    padding-bottom: 5px; 
    text-shadow: 2px 2px 5px gray;
}
.listroom {
    padding: 20px; 
    background-image: linear-gradient(to right, #91A6FF, #FFFFFF); 
    margin-bottom: 8px;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-radius: 8px; 
}
#listroom-name {
    font-size: 20px; 
    font-weight: bold; 
    text-shadow: 2px 2px 3px #fff;
}
#schoolSetting {
    width:600px;
    justify-self: center;
    border-radius: 20px; 
    background-image: linear-gradient(to bottom right, #eceff1,#cfd8dc,#b0bec5); 
    padding: 10px 20px 20px 20px; 
    box-shadow: 3px 3px 20px; 
}
#firstlogin {
    width: 600px;
    justify-self: center;
    border-radius: 20px; 
    background-image: linear-gradient(to bottom right, #eceff1,#cfd8dc,#b0bec5); 
    padding:10px 20px 20px 20px; 
    box-shadow: 3px 3px 20px;
}
#firstlogin form{
    display:flex; 
    flex-direction: column; 
    gap:5px;
}
#loginSection {
    width: 600px;
    justify-self: center;
    border-radius: 20px; 
    background-image: linear-gradient(to bottom right, #eceff1,#cfd8dc,#b0bec5); 
    padding:10px 20px 20px 20px; 
    box-shadow: 3px 3px 20px; 
}
#loginSection form {
    display:flex; 
    flex-direction: column; 
    gap:10px;
}
#loginSection button{
    background: darkcyan; 
    font-weight: bold;
}
#testRoomSection {
    width: 600px;
    justify-self: center;
    border-radius: 20px; 
    background-image: linear-gradient(to bottom right, #eceff1,#cfd8dc,#b0bec5); 
    padding: 10px 20px 20px 20px;
    box-shadow: 3px 3px 20px;
}
#testSubjectsSection {
    border-radius: 20px; 
    background-image: linear-gradient(to bottom right, #eceff1,#cfd8dc,#b0bec5); 
    padding: 10px 20px 20px 20px; 
    box-shadow: 3px 3px 20px;
}
#testSubjectsSection .sub-content{
    display: grid;
    grid: 100% / 40% auto;
    gap:30px;
}
#testSubjectsSection form {
    display: flex; 
    flex-direction: column;
    gap:5px;
}
#testSubjectsSection form select {
    border-radius: 10px; 
    border: 1px solid #ccc; 
    text-align: center; 
    padding: 8px; 
    font-size: 16px;
}
button { 
    background: #e74c3c;
    border: none; 
    color: white; 
    padding: 6px 10px; 
    border-radius: 6px; 
    cursor: pointer; }
button.editsub {
    background: rgba(255, 255, 0, 0.877)
}
input { 
    padding: 8px; 
    font-size: 16px; 
    border-radius: 10px; 
    border: 1px solid #ccc; 
    text-align: center; 
}
#addRoomForm, #schoolForm { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    margin-bottom: 10px; 
}
#addRoomForm button, #schoolForm button {
    font-size: large; 
    background: #2ecc71; 
    margin-top: 10px;
}
div.settingschoolbutton {
    display: flex; 
    flex-direction: column;
}
#navbar ul { 
    position: fixed;
    top:0;
    left:0;
    width: 100%; 
    margin: 0; 
    padding: 0; 
    list-style-type: none;
    overflow: hidden; 
    background-image:linear-gradient(#37D5D6,#36096D); 
    z-index: 10;
}
#navbar li {
    float: left;
}
#navbar li.right {
    float: right;
}
#navbar li a{
    display:block;
    color:antiquewhite; 
    padding: 14px 16px; 
    text-align: center; 
    text-decoration: none;
}
#navbar li a:hover {
    background: #36096D;
}
#navbar span{
    color:antiquewhite; 
    float:left; 
    padding:14px 16px;
}
@media screen and (max-width:600px) {
    #navbar li.right, #navbar li, #navbar span{
        float: none;
    }
}
.checkbox-group { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px;
}
.checkbox-group label { 
    background: #f1f1f1; 
    padding: 8px 12px; 
    border-radius: 6px; 
    cursor: pointer; 
}
table {
    width: 100%; 
    border-collapse: collapse; 
}
th, td {
    padding: 10px; 
    border: 1px solid #ddd; 
    text-align: center; 
}
th {
    background-color: #2980b9; 
    color: white; 
}
.select-theme{
    padding: 10px 0;
}
.select-theme span{
    font-size: 1.1em;
    font-weight: bold; 
    text-shadow: 2px 2px 5px gray;   
}
.select-theme input{
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}
.select-theme input:checked ~.checkmark{
    background-color: #2980b9;
}