body {
    background-color: black;
    color: white;
    
}

button {
    color: white;
}



#content-wrap {
    padding: 20px 50px;

}

#fixed {
    z-index: 10000;
    padding:0;
}

img.firstImg {
    max-width: 700px;
    height: auto;
    animation: floaty 3.5s ease-in-out infinite;
    will-change: transform;
}

img.smaller-image {
    width:50%;
    height:auto;
    margin: 0 auto; 
    display: block;
}

.scroll {
    height: 100px;
}

.subheading {
    font-size: 80px;
    margin-top: 80px;
}



.descriptions {
    gap: 3%;
    
}


.description {
    flex: 47%;
    margin: 0 0 20px;
}

.description .cursive {
    margin: 0 0 30px;
}

.caption {
    font-size: 14px;
    color: #b9b9b9;
    margin: -5px 0 10px;
}

.project-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 120px;
  padding: 40px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-size: 18px;
}


.project-nav a {
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.project-nav a:hover {
  opacity: 0.5;
}

.subbox .image {
    width: 58%;
    height: auto;
    max-height: 900px;

}


.subcontent {
    line-height: 1.8;
    margin: 20px 0;
    max-width: 410px;
    min-width: 400px;
}

.image-flex {
    gap: 1%;
}

.image-flex img {
    width: 49.5%;
    height: 100%;
}

.flex-vertical {
    display: flex;
    flex-direction: column;
}

.flex-vertical img {
    width: 100%;
     height: auto;
}


img,
video {
    margin: 10px 0;
    object-fit: contain;
    max-height: 1000px;
    /* object-position: left; */
}

.bookFull.horizontal {
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.bookFull.horizontal img {
    width: 90%;
    height: auto;
}

.bookFull.vertical {
    flex-direction: column;

    /* overflow-x: hidden; */
    overflow-y: auto;

    height: 90vh;
}


.bookFull.vertical img {
    transform: rotate(90deg);
    transform-origin: center;
    width: auto;
    margin: 71.5% 0 0;
}

.bookFull.vertical img:first-child {
    margin: 0;
}

@keyframes floaty {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }

    /* 숫자 작을수록 subtle */
    100% {
        transform: translateY(0px);
    }
}




.footer {
    padding: 50px 0 0;
}

iframe {
    display: block;
    margin: 20px auto;
}


@media (max-width: 1200px) {
    .mainFlex {
        flex-direction: column;
    }

    .subbox {
        flex-direction: column;
    }

    .subbox .image {
        width: 100%;
    }

    .box img,
    .box video {
        width: 100%;
        margin: 20px auto;
        object-position: center;
    }

    .firstImg {
        margin: 0 auto;
    }

    #content-wrap {
        padding: 20px;
    }
}

@media (max-width: 800px) {
    .descriptions {
        flex-direction: column;
    }

    iframe {
        width: 100%;
        height: 700px;
    }

    .description .cursive {
        margin: 30px 0 20px;
    }

    .image-flex {
        flex-direction: column;
    }

    .image-flex img {
        width: 100%;
    }

    .subcontent {
        max-width: 100%;
        min-width: 200px;
    }
}