style.css

@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap');

body{
    position: relative;
}

img{
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}


/*NAV*/
.banner_img {
    width: 25px;
    height: 25px;
    align-items: center;
    padding-bottom: 3px;
}

/*HOME*/


.section-title {
    font-family: 'Allerta Stencil', sans-serif;
}

/*========== SCROLL UP ==========*/
.scrollup {
    position: fixed;
    right: 1rem;
    bottom: -20%;
    background-color: rgb(135, 135, 135);
    padding: .5rem;
    display: flex;
    opacity: .9;
    z-index: var(--z-tooltip);
    transition: .4s;
}

.scrollup:hover {
    background-color: rgb(205, 205, 205);
    opacity: 1;
}

.scrollup__icon {
    font-size: 5rem;
}

/* Show scroll */
.show-scroll {
    bottom: 5rem;
}

/*ABOUT*/

#img_menu_circle{
    height: 250px;
    width: 250px;
}


/*CARD*/
.card{
    position: relative;
    overflow: hidden;
}

.card:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 320%;
    background-color: rgba(0, 0, 0, 0.5);
    top: -50%;
    left: -100%;
    z-index: 1;
    transform: rotate(25deg);
    transform-origin: center top 0;
    transition: .5s;
}

.card:hover:before{
    left: 50%;
    width: 400%;
}

.card img{
    width: 100%;
    height: auto;
}

.card-text{
    width: 100%;
    padding: 0 20px;
    position: absolute;
    top: -100%;
    color: rgb(255, 255, 255);
    left: 0;
    z-index: 2;
    transition: .51s;
}
.card:hover .card-text{
    top: 20px;
}