body {
    font-family: "Mynerve", sans-serif;
    background-color: #c6f3f3;
    background-image: url(assets/paper-bg.jpg);
    background-blend-mode: multiply;
    animation: fadeIn 0.5s ease-in;
    color: #0D2A20;
    margin: 0;
    filter: none;
}

html {
    scroll-behavior: smooth;
}

/* nav */


.nav-bar ul {
    background-color: #FFFCE9;
    /* background-image: url(assets/paper-overlay.jpg); */
    background-blend-mode: multiply;
    background-size: 140vw;
    box-shadow: 2px 0px 10px 2px #00000065;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    transition: 0.5s;
    z-index: 5;
    display: none;
    animation: fadeIn 0.5s ease;
}

.nav-bar li {
    float: right;

}
.nav-bar a {
    color: #0D2A20;
    text-decoration: none;
    display: block;
    padding: 2vw 2.5vw;
    /* text-transform: uppercase; */
    font-size: 1em;
    transition: 0.5s;
    font-family: "Mynerve";
}

.nav-bar a:hover {
    color: #319170;
    transition: 0.5s;
    background-color: #31916f1e;
}

/* title */

#title-card {
    margin: auto;
    display: block;
    padding-top: 10vw;
    padding-bottom: 10vw;
    width: 50vw;
}

.title-imgs img {
    position: absolute;
    z-index: 1;
    border: white solid 10px;

}
.title-img1 {
    inset-inline-start: 8vw;
    width: 18vw;
    inset-block-start: 3vw;
    transform: rotate(-10deg);
    animation: fadeIn 0.7s both;
    animation-delay: 1s;
    box-shadow: 2px 0px 10px 2px #00000065;
}

.title-img2 {
    inset-inline-start: 78vw;
    inset-block-start: 12vw;
    width: 12vw;
    transform: rotate(8deg);
    animation: fadeIn 0.7s both;
    animation-delay: 1.5s;
    box-shadow: 2px 0px 10px 2px #00000065;
}

.title-img3 {
    inset-inline-start: 12vw;
    inset-block-start: 30vw;
    width: 14vw;
    transform: rotate(8deg);
    animation: fadeIn 0.7s both;
    animation-delay: 2.5s;
    box-shadow: 2px 0px 10px 2px #00000065;
}

.title-img4 {
    inset-inline-start: 5vw;
    width: 18vw;
    inset-block-start: 33vw;
    transform: rotate(-6deg);
    animation: fadeIn 0.7s both;
    animation-delay: 2s;
    box-shadow: 2px 0px 10px 2px #00000065;
}

.title-img5 {
    inset-inline-start: 80vw;
    width: 12vw;
    inset-block-start: 38vw;
    transform: rotate(-6deg);
    animation: fadeIn 0.7s both;
    animation-delay: 2.2s;
    box-shadow: 2px 0px 10px 2px #00000065;
}

.title-img6 {
    inset-inline-start: 74vw;
    inset-block-start: 8vw;
    width: 12vw;
    transform: rotate(-3deg);
    animation: fadeIn 0.7s both;
    animation-delay: 2.4s;
    box-shadow: 2px 0px 10px 2px #00000065;
}
.tapeStrip {
    width: 100%;
    position: absolute;
    inset-block-start: 50vw;
    z-index: 0;

}
/* about */

.about {
    background-color: #FFFCE9;
    background-image: url(assets/paper-overlay.jpg);
    background-blend-mode: multiply;
    background-size: cover;
}
#about-card {
    margin: auto;
    display: block;
    width: 60vw;
    padding-top: 10vw;
    padding-bottom: 8vw;
    transition: 0.5s ease;

}

#about-card:hover {
    transform: scale(1.1);
    transition: 1s;
}

.about p {
    margin: 0;
}

/* gallery */

.gallery-header {
    background-color: white;
    box-shadow: 2px 0px 10px 2px #00000065;
    padding: 1vw 2.5vw;
    margin: 0;
}

.gallery-header h2 {
text-align: center;
font-size: 1.8em;
font-family: "Mynerve";
text-transform: uppercase;
font-weight: normal;
}

.gallery {
    background-color: #d5f5f5;
    height: 120vh;
    background-image: url(assets/paper-bg.jpg);
    /* background-blend-mode: overlay; */
   
}

.gallery-imgs img{
    position: relative;
    width: 12vw;
    z-index: 0;
    cursor: pointer;
    border: white solid 10px;
}


.gallery1 {
    inset-inline-start: 25vw;
    inset-block-start: 3vw;
    transform: rotate(-4deg);
}

.gallery1:hover {
    animation: tweak2 0.5s infinite;
}

.gallery2 {
    inset-inline-start: 30vw;
    inset-block-start: 8vw;
    transform: rotate(4deg);
}

.gallery2:hover {
    animation: tweak1 0.5s infinite;
}

.gallery3 {
    inset-inline-start: 35vw;
    inset-block-start: 5vw;
    transform: rotate(-1deg);
}

.gallery3:hover {
    animation: tweak1 0.5s infinite;
}

.gallery4 {
    inset-inline-start: -15vw;
    inset-block-start: 26vw;
    transform: rotate(5deg);
}

.gallery4:hover {
    animation: tweak1 0.5s infinite;
}

.gallery5 {
    inset-inline-start: -12vw;
    inset-block-start: 24vw;
    transform: rotate(1deg);
}

.gallery5:hover {
    animation: tweak1 0.5s infinite;
}

.gallery6 {
    inset-inline-start: -6vw;
    inset-block-start: 25vw;
    transform: rotate(-4deg);
}

.gallery6:hover {
    animation: tweak2 0.5s infinite;
}


/* popups */

.popUpContent {
    display: none;
}

.popUpContent.appear {
    position: fixed;
    width: 55vw;
    inset-inline-start: 22vw;
    inset-block-start: 10vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 55%;
    margin: auto;
}

.popUpText {
    grid-row: 1;
    grid-column: 1;
    z-index: 10;
    justify-content: center;
    place-self: center;
    padding-left: 10vh;
    padding-right: 5vh;
}



.popUpGridImg {
    grid-row: 1;
    grid-column: 2;
    z-index: 10;
    justify-content: center;
    place-self: center;
    padding-right: 5vh;
    padding-bottom: 3vh;
    width: 70%;
    transition: 0.5s;
}

.popUpGridImg:hover {
    transform: scale(1.1);
    transition: 0.7s;
}

.popUpGridImg img {
    box-shadow: 2px 2px 10px #00000065;
}

.popUpCard {
    grid-column: 1 / 3;
    grid-row: 1;
    z-index: 5;

}

.popUpContent.appear img {
    width: 100%;
    z-index: 10;
}

.popUpImg {
    position: fixed;
    width: 30vh;
    inset-inline-start: 56vw;
    inset-block-start: 15vw;
    display: none;
    transition: 1s;
}

.popUpImg:hover {
    transform: scale(1.3);
    transition: 1s;
}


.appear {
    display: inline;
    animation: fadeIn 0.5s ease;
}

.backBtn {
    cursor: pointer;
    position: fixed;
    inset-inline-start: 47vw;
    inset-block-start: 40vw;
    display: none;
    text-transform: uppercase;
    background-color: #AFDCDC;
    padding: 0.75em 1.5em;
    transition: 0.5s;
    border-radius: 10px;
    animation: fadeIn 0.5s ease;
    z-index: 10;
}

.nextBtn {
    cursor: pointer;
    position: fixed;
    inset-inline-start: 77vw;
    inset-block-start: 27vw;
    /* display: none; */
    text-transform: uppercase;
    background-color: #AFDCDC;
    padding: 0.75em 1.5em;
    transition: 0.5s;
    border-radius: 10px;
    animation: fadeIn 0.5s ease;
    z-index: 10;
}

.prevBtn {
    cursor: pointer;
    position: fixed;
    inset-inline-start: 13vw;
    inset-block-start: 27vw;
    /* display: none; */
    text-transform: uppercase;
    background-color: #AFDCDC;
    padding: 0.75em 1.5em;
    transition: 0.5s;
    border-radius: 10px;
    animation: fadeIn 0.5s ease;
    z-index: 10;
}



.backBtn:hover, .nextBtn:hover, .prevBtn:hover {
    color: #319170;
    transition: 0.5s;
    background-color: #caede1cb;
}

footer {
    background-color: #AFDCDC;
    /* background-image: url(assets/long-tape.png); */
    background-size: cover;
    background-blend-mode: multiply;
    padding: 0.5em 0 0.5em 0;
    box-shadow: 1px 0px 10px 2px #00000065;
   
}

footer p {
    margin-left: 2.5vw;
    font-family: "Mynerve";
}

/* animations */

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes tweak1 {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-7deg);

    }

    0% {
        transform: rotate(0deg);
    }
}

@keyframes tweak2 {
    0% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(4deg);

    }

    0% {
        transform: rotate(-4deg);
    }
}