html,
body {
    height: 100%;
    width: 100%;
    background-color: #b8b2a9;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

.header,
.container {
    width: 100%;
}

.header>.container-fluid {
    height: 4.5rem;
    border-bottom: 0.001rem solid #cbc4c4;
    background-color: #b8b2a9;
}

.header img {
    width: 3rem;
    height: 3rem;
    padding: 0;
    margin: 0;
}


h1 {
    font-family: 'IM Fell DW Pica', cursive;
    color: #231f20;
    font-size: 3rem;
}

.header li a {
    font-size: 2rem;
    font-family: 'Quattrocento', cursive;
    text-decoration: none;
    color: #2e2d2b;
    font-weight: 800;
    font-size: 2rem;
}

.nav-link:hover {
    color: #CBC4C4;
    text-decoration: none;
}

.nav-link1 {
    color: #655b4b;
    text-decoration: none;
}

.nav-link1:hover {
    color: #b59d8b;
}

.center>.container {
    padding-top: 4.5rem;
    height: 100vh;
    box-sizing: border-box;
    position: relative;
}

.frame-y {
    background-color: transparent;
    border: 0.5rem solid #cbc4c4;
    box-sizing: border-box;
    height: 85vh;
    width: 80vw;
    position: absolute;
    z-index: 1;
}

.frame-x {
    background-color: transparent;
    border: 0.5rem solid #cbc4c4;
    box-sizing: border-box;
    height: 80vh;
    width: 83vw;
    position: absolute;
    z-index: 2;
}



.center img {
    height: 40vh;
    width: auto;
}

.center p {
    margin-top: 2vh;
    font-size: 3rem;
    font-family: 'Quattrocento', cursive;
    color: #2e2d2b;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
}

.hr {
    width: 90vw;
    height: 0.1rem;
    background-color: #cbc4c4;
    margin: 3rem auto;
}

.poetry .container {

    background-color: #cbc4c4;
    border: 0.01rem solid #655b4b;
    border-radius: 1%;
    height: 30rem;
    width: 70vw;
}

.poetry h3 {
    font-family: 'IM Fell DW Pica', cursive;
    color: #655b4b;
    font-size: 3rem;
    text-align: center;
}

.about-me h2 {
    font-family: 'IM Fell DW Pica', cursive;
    color: #2e2d2b;
    font-size: 3rem;
    margin: 5rem 1rem 0 3rem;
    padding: 0;
}

.about-me h3 {
    font-size: 2rem;
    font-family: 'Quattrocento', cursive;
    font-weight: 900;
    color: #655b4b;
    margin-bottom: 0.3rem;
    padding: 0;
}

#web-developer {
    font-family: "VT323", cursive;
    font-weight: 300;
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    margin-top: 4rem;
}

#artist {
    font-family: "Bonheur Royale", cursive;
    font-weight: 300;
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1.5rem;
    margin-top: 4rem;
}

#storyteller {
    font-family: "Lovers Quarrel", cursive;
    font-weight: 300;
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1.5rem;
    margin-top: 4rem;
}

.grid {
    gap: 5rem;
}

.card {
    background-color: #cbc4c4;
    border: 0.01rem solid #655b4b;
    border-radius: 1%;
    height: 25rem !important;
    width: 20rem !important;
    margin-bottom: 1rem;
}

.grid img {
    height: 100%;
    width: 100%;
    flex-shrink: 0;
}

.grid a {
    display: block;
    color: #655b4b;
    font-size: 1.5rem;
    font-family: 'Quattrocento', cursive;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    margin-top: 0.5rem;
    height: 100%;
}

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* grid-template-rows: repeat(12, 1fr); */
    height: 80%;
    width: 80%;
    background-color: #b8b2a9;
    gap: 0;
}

.who-am-i .top-left {
    grid-column: 1 / 7;
    grid-row: 1 / 5;
}

.who-am-i .top-right {
    grid-column: 7 / 13;
    grid-row: 1 / 5;
    text-align: right;
}

.who-am-i .bottom-left {
    grid-column: 1 / 7;
    grid-row: 9 / 13;
    align-self: end;
}

.who-am-i .bottom-right {
    grid-column: 7 / 13;
    grid-row: 9 / 13;
    text-align: right;
    align-self: end;
}

.who-am-i .text {
    color: #655b4b;
    font-size: 1.5rem;
    font-family: 'Quattrocento', cursive;
    font-weight: 700;
    line-height: 2rem;
}

.main-text {
    font-family: 'IM Fell DW Pica', cursive;
    font-size: 6rem;
    font-weight: 500;
    text-shadow: 0.2rem 0.3rem #b59d8b;
    color: #2e2d2b;
}

.but {
    grid-column: 5 / 8;
    grid-row: 2 / 4;
}

.really {
    grid-column: 7 / 11;
    grid-row: 4 / 6;
    text-align: end;
}

.who {
    grid-column: 3 / 6;
    grid-row: 5 / 8;
}

.am {
    grid-column: 7 / 10;
    grid-row: 7 / 10;
    text-align: center;
    margin-right: 2rem;
}

.i {
    grid-column: 5 / 8;
    grid-row: 10 / 12;
    text-align: center;
}

.right-side>h2 {
    font-family: 'IM Fell DW Pica', cursive;
    font-size: 7rem;
    font-weight: 500;
    text-shadow: 0.2rem 0.3rem #cbc4c4;
    color: #b59d8b;
}

.left-side>p {
    color: #655b4bc1;
    font-family: 'IM Fell DW Pica', cursive;
    font-style: italic;
    font-size: 1.5rem;
    font-weight: 300;
}

#step {
    font-size: 2rem;
}

.left-side>h2 {
    color: #655b4b;
    font-family: 'IM Fell English SC', cursive;
    font-size: 6rem;
    font-weight: 300;
    text-align: center;
}

.left-side>.container {
    background-color: #cbc4c4;
    border: 0.1rem solid #2e2d2b;
    width: 90%;
    height: 40vh;
    gap: 3rem;
}

.left-side .letter-line {
    width: 90%;
    height: 0.1rem;
    background-color: #b8b2a9;
}

.letter-line>h4 {
    margin-bottom: 0.05rem;
    position: absolute;
    bottom: 15%;
    left: 5%;
    color: #655b4b;
    font-size: 1.7rem;
    font-family: 'Quattrocento', cursive;
    font-weight: 900;
}

.letter-line>img {
    position: absolute;
    width: 3rem;
    bottom: 90%;
    right: 0%;
    margin-bottom: 0.1rem;
}


.footer {
    width: 100%;
    height: 4.5rem;
    border-top: 0.01rem solid #cbc4c4;
    background-color: #b8b2a9;
}

.footer-title {
    color: #2e2d2b;
    font-size: 1.2rem;
    font-family: 'Quattrocento', cursive;
    font-weight: bold;
}

.stay {
    color: #cbc4c4;
    font-family: "IM Fell DW Pica", cursive;
    font-size: 1rem;
    font-style: italic;
    font-weight: 500;
    text-align: center;
}

.resume {
    display: flex;
    justify-content: center;
    margin: 7.5rem;
}

.resume img {
    width: 60%;
    border: solid 5px #655b4bc1; 
    margin-bottom: 3rem;
}

.grid .nav-link {
    width: 20rem;
}

@media (max-width: 1200px) {
    .card {
        height: 23rem !important;
        width: 18rem !important;
    }

    .grid .nav-link {
        width: 18rem;
    }
}

@media (max-width: 991.98px) {

    .resume {
        margin: 7.5rem 2rem;
    }
    .resume img {
        width: 90%;
    }
    .navbar-collapse .nav {
        flex-direction: column;
        align-items: flex-end;
    }

    .center img {
        height: 25vh;
    }

    .frame-x,
    .frame-y {
        border: 0.3rem solid #cbc4c4;
    }

    .grid {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3rem;
    }

    .grid-wrapper {
        grid-template-rows: repeat(12, 1fr);
        padding: 0;
    }

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

    .main-text {
        font-size: 4rem;
        text-shadow: 0.1rem 0.2rem #b59d8b;
    }

    .who-am-i .text {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .right-side>h2 {
        font-size: 5rem;
    }

    .left-side>h2 {
        font-size: 3.5rem;
    }

    .left-side>p {
        font-size: 1rem;
    }

    #step {
        font-size: 1.3rem;
    }

    .letter-line>h4 {
        font-size: 1.6rem;
    }

    .letter-line>img {
        width: 2.8rem;
    }

    .contact > .container {
        flex-direction: column;
    }

    .who {
        grid-row: 6 / 9;
    }

    .am {
        grid-row: 8 / 11;
    }

    .really {
        padding-right: 2rem;
        grid-column: 6 / 10;
    }

    .footer-main img {
        width: 1.5rem !important;
    }
    .footer-main p {
        font-size: 0.5rem;
    }

    .about-me h2 {
        font-size: 2.5rem;
    }
    .about-me h3 {
        font-size: 1.7rem;
    }
}