body {
    color: #40514E;
    text-align: center;
    font-family: 'EB Garamond', serif;
}

/* Content Section */

h1.intro-title {
    margin-top: 50px;
    font-size: 5.625rem;
    font-family: 'Cinzel', serif;
}

h2 {
    color: #232320;
    display: block;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.info h1, .info h2 {
    font-size: 35px;
    color: #232320;
    line-height: 150%
}

.info-row p {
    text-align: justify;
}

p {
    font-family: 'Merriweather', serif;
    font-size: 1.25rem;
    line-height: 2;
}

.intro {
    width: 30%;
    margin: auto;
}

.info-top {
    padding: 8em 0 3rem;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    display: block;
    align-content: center;
    position: relative;
}

.info-avatar {
    overflow: hidden;
    border-radius: 1.25rem;
    box-shadow: 0 52px 74px rgb(0 21 64 / 14%);
    max-width: 36.25rem;
    max-height: 36.25rem;
    margin: 0 auto 4em;
    display: inline-block;
}

.info-avatar img {
    width: 100%;
    margin: 0;
}

/* Tiles */

.skill-tiles {
    position: relative;
    z-index: 1000;
    margin: 4em auto 0;
    max-width: 90%;
    display: -ms-grid;
    display: grid;
    gap: 4em;
}

.skill-tile {
    width: 100%;
    border-radius: 20px;
    position: relative;
    display: block;
    transition: all .4s ease-in-out;
    padding: 1em 3em 0;
}

a {
    background-color: transparent;
    box-sizing: border-box;
    color: #3197d6;
    cursor: pointer;
    text-decoration: none;
    transition: none;
}

h1.sub-titles {
    color: #232320;
    font-size: 4rem;
    margin-top: 2rem;
    padding-bottom: 0;
    text-align: center;
    font-family: 'Cinzel', serif;
}

.carousel {
    width: 100%;
    padding: 2rem 0;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    scrollbar-width: none;
    overflow-x: auto;
    max-inline-size: 75.5vw;
}

.carousel-container {
    white-space: nowrap;
    margin: 4rem auto 4rem;
}

.carousel-item {
    width: 200px;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    margin-right: 10px;
    display: inline-block;
    cursor: pointer;
    -webkit-transition: 1000ms all;
    transition: 1000ms all;
    -webkit-transform-origin: center left;
    transform-origin: center left;
    position: relative;
}

.carousel-item-img {
    width: 200px;
    height: 300px;
    -o-object-fit: cover;
    object-fit: cover;
}

/* For Chrome, Safari, and Edge: hide scrollbar */
.carousel-container::-webkit-scrollbar, .carousel::-webkit-scrollbar {
    display: none;
}

.carousel-item:hover~.carousel-item {
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
}

.carousel-container:hover .carousel-item {
    opacity: 0.3;
}

.carousel-container:hover .carousel-item:hover {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 1;
}

.skill-tiles a:hover h2, .movie-tile:hover h2 {
    color: white;
}

.skill-tile:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px);
}

.skill-tile:hover .tile-img {
    transform: scale(1.05);
}

a:hover {
    text-decoration: none;
}

.code-tile {
    background: linear-gradient(338.83deg, #f8c6ff -3.41%, rgba(255, 196, 255, 0) 52.31%), #ffeec4;
    }

.chess-tile {
    background: linear-gradient(6.03deg, #dacdff .5%, rgba(218, 205, 255, 0) 46.89%), #ffeaee;
    }

.dance-tile {
    background: linear-gradient(314.25deg, rgba(10, 185, 149, .7) 1.09%, rgba(10, 185, 149, 0) 43.26%), #dacdff;
    }

.movie-tile {
    background: linear-gradient(120deg, rgba(255, 115, 115, 0.7) 0%, rgba(72, 52, 212, 0.5) 40%, rgba(72, 52, 212, 0) 70%), #ffdac1;
    }

.music-tile {
    background: linear-gradient(0deg, rgba(247, 247, 247, 1) 23.8%, rgba(252, 221, 221, 1) 92%);
    }

.code-tile:hover, .chess-tile:hover, .dance-tile:hover, .movie-tile:hover {
    background: linear-gradient(223.65deg, rgba(10, 207, 131, 0) 60.59%, rgba(10, 207, 131, .62) 113.24%), #191919;
}

/* Media Queries */

@media (min-width: 544px) {

    .info-top {
        padding: 15em 0 5em;
    }

    .skill-tiles {
        gap: 7em;
        margin: 120px auto 0;
    }

    .tile-title {
        font-size: 45px;
        text-align: right;
    }
}

/* Mobile */

@media (max-width: 767px) {

    .info-row p {
        text-align: justify;
    }

    .info-row h1 {
        margin: 0 auto 3rem;
        font-size: 2rem;
    }

    .info-top {
        padding-top: 8rem;
    }

    .tile-title {
        text-align: center;
    }

    .skill-tiles {
        margin-top: 2rem;
    }

    h1.sub-titles {
        font-size: 3rem;
        margin-top: 0;
    }

    .skill-tiles .tile-title {
        text-align: center;
    }

    .carousel {
        padding: 0px;
        max-inline-size: 59vw;
    }

    .carousel-item:hover~.carousel-item, .carousel-container:hover .carousel-item, .carousel-container:hover .carousel-item:hover {
        -webkit-transform: none;
        transform: none;
        opacity: unset;
    }

}

/* Tablet and Laptop (>1200px) */

@media (min-width: 768px) and (max-width: 1300px) {

    .info-row p {
        text-align: justify;
    }

    .info-row h1 {
        margin: 0 auto 3rem;
    }

    .info-top {
        padding-top: 8rem;
    }

    .tile-title {
        text-align: center;
    }

    .skill-tiles {
        margin-top: 2rem;
    }

    h1.sub-titles {
        margin-top: 0;
    }

    .carousel {
        max-inline-size: 72vw;
    }

}

@media (min-width:1200px) {

    .info-avatar {
        margin: 0 auto;
    }

    .info-row {
        max-width: 36.25rem;
        max-height: 36.25rem;
        text-align: left;
        padding: 0 3rem 5rem;
    }

    .info-top {
        padding: 14em 0 5em;
        width: 100%;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    h1 {
        padding-bottom: 5rem;
    }
}