@import url('https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

html,
body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.box-shadow-30 {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

nav.navbar {
    background-color: #10cc96;
}

nav.navbar .nav-link .bi-instagram {
    scale: 1.5;
    transition: .5s ease-in-out;
}

nav.navbar .nav-link .bi-instagram:hover {
    scale: 1.8;
    transition: .5s ease-in-out;
}

.summary .banner-desktop {
    width: 100%;
    height: auto
}

.summary .banner-mobile {
    display: none;
}

.register {
    background-color: #ebe711;
    text-align: center;
    padding: 15px 15px;
}

.register a {
    text-decoration: none;
    color: #1e376a;
}

.register a:hover {
    text-decoration: none;
    color: #2a58b4;
}

.staff {
    font-size: 1.2rem;
}

.staff .avatar {
    width: 300px;
    height: 300px;
}

.staff .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
}

section.comments {
    background-color: #a277d0;
}

section.contact {
    background-color: #3197d6;
}

table.table {
    font-size: 1.2rem;
}

.input-email {
    width: 300px;
    height: 50px;
    border-radius: 45px;
    border: 0;
    padding: 0 10px;
    text-align: center;
    margin-bottom: 10px;
}

.btn-submit {
    width: 300px;
    height: 50px;
    border-radius: 45px;
    border: 0;
    background-color: #0ad1e0;
    color: white;
    font-size: 1.2rem;
}

#message {
    display: none;
    color: #a277d0;
    font-size: 20px;
    position: fixed;
    top: 2%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 45px;
    padding: 10px 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.bi-instagram {
    scale: 2;
    transition: .5s ease-in-out;
}

.bi-instagram:hover {
    scale: 2.3;
    transition: .5s ease-in-out;
}

footer.footer {
    background-color: #0ad1e0;
}


/* FONTS */

.atma-light {
    font-family: "Atma", serif;
    font-weight: 300;
    font-style: normal;
}

.atma-regular {
    font-family: "Atma", serif;
    font-weight: 400;
    font-style: normal;
}

.atma-medium {
    font-family: "Atma", serif;
    font-weight: 500;
    font-style: normal;
}

.atma-semibold {
    font-family: "Atma", serif;
    font-weight: 600;
    font-style: normal;
}

.atma-bold {
    font-family: "Atma", serif;
    font-weight: 700;
    font-style: normal;
}

.luckiest-guy-regular {
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;
}


/* FONT COLOR */
.text-white {
    color: white;
}

.text-magenta {
    color: #ff0083;
}

.text-shadow {
    text-shadow: 4px 4px rgba(0, 0, 0, 0.1);
}

/* MEDIA QUERIES */

@media (max-width: 992px) {
    .summary .banner-desktop {
        display: none;
    }

    .summary .banner-mobile {
        width: 100%;
        height: auto;
        display: block;
    }

    .staff .staff-row {
        flex-direction: column !important;
        align-items: center;
    }

    .staff .card-title {
        text-align: center;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {

    .staff .avatar {
        width: 200px;
        height: 200px;
    }

    .staff p {
        font-size: 1rem;
    }

    table.table {
        font-size: .8rem;
    }
}