/* Content Section */

h1 {
    color: #232320;
    font-size: 4.5rem;
    line-height: 110%;
    position: relative;
    font-family: 'Cinzel', serif;
}

h2 {
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.intro {
    margin: 15% auto 2%; 
    text-align: center;
}

.intro p {
    font-family: 'Merriweather', serif;
    font-size: 1.5rem
}

#intro-carousel {
    width: 42%;
    margin: 0 auto;
}

/* Tiles */

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

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

.work-tiles a {
    color: #232320;
    text-decoration: none;
}

.work-tiles a:hover {
    color: white;
    text-decoration: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px);
}

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

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

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

.polynomial-tile:hover, .encrypt-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) {

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

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

/* Mobile */

@media (max-width: 767px) {

    h1 {
        padding-top: 8%;
    }

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

    #intro-carousel {
        width: 100%;
        margin: 0 auto;
        min-height: 90px;
    }
    
}

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

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

    #intro-carousel {
        width: 80%;
        margin: 0 auto;
    }

}