style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    height: 10vh;
    background-color: #00B0FF;
}

.banner {
    height: 90vh;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: center;
    gap: 20px 20px;
    background-color: whitesmoke;
    background-image: url(src/join.svg);
    background-repeat: no-repeat;
    background-size: 50% 70vh;
    background-position: right bottom;
    animation-name: bg;
    animation-duration: 2s;
    transition: 2s;
    border: 1px solid transparent;
}

.course {
    width: 6%;
    height: 12.5vh;
    background-color: rgba(0, 0, 0, 0.50);
    margin-left: 5%;
    border: 5px white solid;
    box-shadow: 1px 1px 1px black;
    transition: 1s;

}

.course:hover {
    transform: scaleX(1);
    border-radius: 20px;
    border: 5px #00BFA6 solid;
    box-shadow: inset -1px -1px 1px black;
}

.title {
    width: 100%;
    padding: 2% 0%;
    font-size: 4rem;
    color: #2782AA;
    text-shadow: 1px 1px 1px black;
    margin-left: 5%;
    position: fixed;
    top: 20vh;

}



@keyframes bg {
    0% {
        background-color: whitesmoke;

    }

    25% {
        background-color: white;
    }

    50% {
        background-color: whitesmoke;
    }

    75% {
        background-color: white;
    }

    100% {
        background-color: whitesmoke;
    }
}