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

:root {
    /* variables */
    /* colors */
    --brand-color: #EF5F4C;
    --bg-color: #FFFFFF;
    --surface-color: #F5F5F5;
    --skeleton-color: #D9D9D9;
    --shape-transparent: #ffffff56;
    --text-primary: #313131;
    --text-secondary: #6C6C6C;

    /* fonts */
    --heading: 2rem;
    --paragraph-md: .875rem;
    --paragraph-sm: .75rem;
    --hd-lh: 1.25;
    --pg-lh: 1.70;
    --fw-regular: 500;
    --fw-bold: 700;
}

body {
    font-family: "Poppins", sans-serif;
    color: var(--text-secondary);
    background-color: var(--surface-color);
}

h1 {
    font-size: var(--heading);
    line-height: var(--hd-lh);
    color: var(--text-primary);
}

a {
    text-decoration: none;
    color: inherit;

    &:hover {
        color: var(--brand-color);
        text-decoration: underline;
    }
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.gap-2 {
    gap: 2rem;
}

.gap-1\.5{
    gap: 1.5rem;
}

.gap-1 {
    gap: 1rem;
}

.gap-\.5 {
    gap: .5rem;
}

.item-center {
    align-items: center;
}

.break-mobile {
    display: none;
}

.mbl-sm {
    display: none;
}

.container {
    padding-inline: 2rem;
    margin-inline: auto;
    max-width: 80em;
}

.header-container {
    padding-block: 1.25rem;
    background-color: var(--surface-color);
}

header {
    justify-content: space-between;

    .img-logo {
        & a {
            margin: .25rem;
        }
    }
    
    & .explore-wrapper {
        padding-block: .5rem;

        & a {
            height: 2rem;
            padding: .25rem;
        }

        & #menu-icon {
            width: 1.5rem;
            height: 1.5rem;
        }

        #prof-pic {
            width: 2.5rem;
            height: 2.5rem;
        }
    }
}

.about-container {
    padding-block: 2rem;
    justify-content: space-between;
    background-color: var(--surface-color);

    & .about-bio {
        flex-direction: column;

        p {
            font-size: var(--paragraph-md);
            line-height: var(--pg-lh);
        }
    }

    & .travel-wrapper {
        width: 17.5rem;
        flex-direction: column;
        align-self: center;

        & div {
            height: 1.5rem;
        }

        & img {
            width: 1.5rem;
            height: 1.5rem;
        }

        p {
            font-size: var(--paragraph-md);
            line-height: var(--pg-lh);
        }
    }
}

.image-wrapper {
    flex-wrap: wrap;
    padding-block: 1.5rem;

    & img {
        cursor: pointer;
        width: 17.875rem;
        height: 17.875rem;

        &:hover {
            -webkit-animation: shadow-drop-2-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-2-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both, amplify 0.45s both ease-in-out;
        }     
    }
}

footer {
    justify-content: space-between;
    padding-block: 1.5rem;
    padding-inline: 2rem;
    margin-inline: auto;
    max-width: 80em;

    & a {
        padding: .25rem;
    }
}

/* Animations for the images of image-wrapper section */

@keyframes shadow-drop-2-center {
  100% {
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5 );
  }
}

@keyframes amplify {
    to {
        transform: scale(1.1);
        border-radius: .75rem;
    }
}

/* Responsivity for mobiles vertically */

@media (width <= 26.875em) {
    body {
        padding: unset;
    }

    h1 {
        font-size: 1.5rem;
    }

    .desktop-only {
        display: none;
    }

    .break-mobile {
        display: inherit;
    }

    .break-desktop {
        display: none;
    }

    .header-container {
        padding: 1rem;

        & header {
            padding: unset;
        }
    }
    

    .about-container {
        padding: unset;
        flex-wrap: wrap;

        .about-img {
            width: 7.5rem;
            height: 7.5rem;
            
            & img {
                width: 7.5rem;
                height: 7.5rem;
            }
        }

        & .about-info {
            flex-direction: column;
            padding: 2rem;
        }

        & .travel-wrapper {
            padding-inline: 2rem;
            margin-bottom: 2rem;
        }
    }

    .main-container {
        padding: 1rem;
    }

    .image-wrapper {
        padding: 0;
        gap: 1rem;

        & img {
            width: 24.875rem;
            height: 24.875rem;

            &:hover {
                    animation: unset;
            }
        }
    }

    footer {
        flex-direction: column;
        align-items: center;
        padding-inline: 1rem;
        gap: 1rem;
    }
}

@media (width <= 25.875em) {
    .image-wrapper {
        & img {
            width: 23.75em;
            height: 23.75em;
        }
    }
}

@media (width <= 24.5625em) {
    .image-wrapper {
        & img {
            width: 22.5rem;
            height: 22.5rem;
        }
    }
}

@media (width <= 23.4375em) {
    .image-wrapper {
        & img {
           width: 21.5rem;
            height: 21.5rem; 
        }
    }
}

@media (width <= 22.5em) {
    .image-wrapper {
        & img {
           width: 20.5rem;
            height: 20.5rem; 
        }
    }

    footer {
        font-size: var(--paragraph-sm);
    }
}

@media (width <= 21.5em) {
    .break-mobile {
        display: none;
    }

    .mbl-sm {
        display: unset;
    }


    
    .image-wrapper {
        & img {
           width: 19.5rem;
            height: 19.5rem; 
        }
    }
}

@media (width <= 20em) {
    .about-container {
        font-size: var(--paragraph-sm);

        & .about-info {
            padding: 1.25rem;
        }

        & .travel-wrapper {
            padding-inline: 1.25rem;
            margin-bottom: 1rem;
        }
    }
    
    .image-wrapper {
        & img {
           width: 18rem;
            height: 18rem; 
        }
    }
}