body {
    padding: 0;
    margin: 0;
}

main {
    background-image: url('../../img/home-bg.jpg');
    background-position: top;
    background-size:cover;
    background-repeat: no-repeat;
    min-height: 100vh;
}

.logo {
    position: relative;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.btn_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    max-width: 600px;
    margin: auto;
    padding: 10px;
}

.btn {
    text-decoration: none;
    padding: 10px;
    text-align: center;
    color: #ffffff;
    box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.5);
    border: none;
    border-bottom: 2px solid transparent;
    transition: all .5s ease-in-out;
    height: 80px;
    line-height: 60px;
    text-transform: uppercase;
}

.admin {
    background-image: radial-gradient(circle 815px at 23.4% -21.8%, rgba(9, 29, 85, 1) 0.2%, rgba(0, 0, 0, 0.9) 100.2%);
}

.teacher {
    background-image: linear-gradient(86.3deg, rgba(0, 119, 182, 1) 3.6%, rgba(8, 24, 68, .9) 87.6%);
}

.parent {
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(237, 3, 32, 0.87) 20.8%, rgba(242, 121, 1, 0.9) 74.4%);
}

.application {
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(14, 174, 87, 1) 0%, rgba(12, 116, 117, 0.9) 90%);
}

.btn:hover {
    border-color: red;
    transform: translateY(-2px);
    transition: .5s;
}

.logo img {
    width: 160px;
    box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
}
.logo h1{
    color: rgb(255, 255, 255) !important;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    text-align: center;
}
.notice{
    background-image:linear-gradient(to bottom, #ffffff, transparent); 
    color: darkblue;
}


@media screen and (max-width: 576px) {
    .btn_container {
        grid-template-columns: 1fr;
    }

    .logo {
        padding: 15px;
    }

    .logo img {
        width: 80px
    }
    .logo h1{
        font-size: 28px;
    }
}


footer{
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
}

footer {
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
}
footer p{
    margin-bottom: 0px;
}