.hero-image{ 

    height:300px; 

    background-image:url("image/heroimage.jpg"); 

    background-size:cover; 

    background-position:center; 

    display:flex; 

    justify-content:center; 

    align-items:center; 
 
    color:rgb(221, 221, 221); 

} 

.main-layout{ 
    text-align: center;

    border:2px solid rgb(212, 204, 204); 
    
    display:flex; 
    
    flex-direction:row;

    justify-content:center; 

    align-items:center;

    gap:20px; 
    
} 

.navigation-layout{
    text-align: center;

    display:flex; 

    justify-content:center; 

    align-items:center;

    gap:20px; 

    
}


input[type="submit"]{ 

    background-color:#0b111f; 
    
    color:white; 
    
    padding:8px; 
    
    border:none; 
    
    border-radius:4px; 
    
    cursor:pointer; 
    
} 
    
    input[type="submit"]:hover{ 
    
    background-color:#878987; 
    
    color:black; 
    
} 

table{ 

    width:100%; 
    
    border-collapse:collapse; 
    
    background-color:white; 
    
 } 
    
    th{ 
    
    background-color:#3e4558; 
    
    color:white; 
    
} 
    
    th, 
    
    td{ 
    
    border:1px solid gray; 
    
    padding:10px; 
    
    text-align:left; 
    
} 

/*buttons */

.nav-btn {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 4px;
    text-decoration: none;
    border-radius: 15px;
    font-weight: bold;
    color: white; 
    transition: background-color 0.3s ease;
}

.btn-home {
    background-color: #2566a7; 
}

.btn-login {
    background-color: #2566a7;
}

.btn-signup {
    background-color: #2566a7; 
}

.btn-view, .btn-create, .btn-attendance {
    background-color: #2566a7; 
}

.btn-logout {
    background-color: #E53E3E;
}

.btn-submit {
    background-color: #2566a7;
}

.nav-btn:hover {
    opacity: 0.9;
    color: #FFFFFF;
}


input, 

select, 

textarea{ 

padding:4px; 

width: 80%; 

border:1px solid gray; 

border-radius:4px; 

} 

@media (max-width:900px){ 

    .main-layout{ 
    
    flex-direction:column; 
    
    } 
    
    .navigation-add{ 
    
    width:100%; 
    
    } 
    
    .content{ 
    
    width:100%; 
    
    } 
    
    .navigation-view{ 
    
    width:100%; 
    
    } 
    
    } 

footer {
    text-align: center;
    padding: 20px;
    background-color: #2566a7;
    margin-top: 20px;
}