/* General */
*, :after, :before {
    box-sizing: border-box;
    border: 0 solid #ffffff00;
}

body {
    margin: 0;
}

p, h1, h2, h3, h4, h5, h6 {
    font-size: 100px; 
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -5px;
    margin: 0;
}

/* Styles for Mobile Site */


/* Header & Hero */
#header {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    z-index: 30;
    width: 100%;
    background: #ffffd3;
}

/* General */
*, :after, :before {
    box-sizing: border-box;
    border: 0 solid #ffffff00;
}

.title {
    display: flex;
    flex-direction: column; 
    flex-grow: 1;
    line-height: 80px;
}

.top{
    display: block;
    margin: 0;
    padding-top: 10px;
}

.bottom {
    display: block;
    margin: 0;
    font-size: 40px;
    font-weight: 345;
    letter-spacing: -1.5px;
    align-self: self-end;
    line-height: 50px;
}

/* Projects */

#projects {
    display: flex;
    flex-direction: column;
    padding-top: 9.2rem;
    padding-bottom: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    row-gap: 80px;
    max-width: 90rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.project {
    display: flex;
    position: relative;
    padding: 40px;
    justify-content: space-between;
    flex-direction: row;
    min-height: 235px;
    flex-grow: 1;
    border-radius: 100px;
}

.heading {
    display: flex;
    flex-direction: column;
    padding-left: 50px;
}

.capsule {
    display: flex;
    padding-top: 100px;
    padding-bottom: 100px;
    align-items: center;
    min-height: 450px;
    margin-left: 0;
    margin-right: 0;

}

.image {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 0;
    align-items: flex-start;
    justify-content: flex-end;
    width: 658px;
    position: relative;
}

.image img {
    position: absolute;
    max-width: 100%;
    width: 450px;
    height: auto;
    top: 38%;
}

.vanilla {
    transform: translate(-26%, -62%) scaleX(-1) rotate(-356deg);
}

.mint {
    transform: translate(-26%, -62%);
}

.strawberry {
    transform: translate(-26%, -62%);
}

.description {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    flex-grow: 1;
}

.flavor {
    align-self: center;
    font-size: 103px;
    line-height: 90px;
    text-indent: -11px;
    letter-spacing: -4px;
}

.ic {
    align-self: center;
    font-size: 46px;
    line-height: 43px;
    letter-spacing: -1px;
}

.project:hover {
    background: pink;
    cursor: pointer;
    .image {
        filter: drop-shadow(-6px 9px 0px #0000006e);
    }
}

/* Reviews */


/* Footer */


/* Media state for Desktop site */
@media (min-width: 1000px) {

    /* Header & Hero */


    /* Projects */


    /* Reviews */


    /* Footer */


}