@font-face {
    font-family: styreneB;
    src: url(../StyreneBLC-Regular.otf);
}
@font-face {
    font-family: styreneBI;
    src: url(../StyreneBLC-RegularItalic.otf);
}

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    color: black;
    font-family: styreneB;
}

a:hover{
    font-family: styreneBI;
}

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 1.075rem;
    line-height: 1.3;
    /* overflow: hidden; */
}

ul,li{
    list-style: none;
}

.hidden{
    display: none;
}

.main-nav{
    font-size: 1.75rem !important;
    position: fixed;
    top: 1.5rem;
    /* display: flex; */
    left: 3rem;
    width: calc(100vw - 6rem);
    z-index: 1001;
}
/* .main-nav div{
    flex: 1;
} */
.main-nav div a{
    width: fit-content;
    position: fixed;
}
.name{
    position: fixed;
    left:3rem;
}
.work{
    /* text-align: center; */
    position: fixed;
    left: 50%;
    /* transform: translate(-50%); */
}
.work a{
    transform: translate(-50%);
}
.info{
    /* text-align: right; */
    position: fixed;
    right: 6rem;
}


.left-sub-nav{
    font-size: 1.25rem;
    position: fixed;
    left:3rem;
    top: 9.5rem;
    z-index: 1000;
    width: fit-content;
}
.left-sub-nav a{
    cursor: pointer !important;
}

.middle{
    position: absolute;
    top: 9.5rem;
    left: calc((100vw - 6rem) / 5 + 3rem);
    width: calc((100vw - 6rem) / 5 * 3 - 3rem);
    height: fit-content;
}
.middle div{
    padding-bottom: 1.75rem;
}

#studio img{
    width: 108%;
    margin-left: -2rem;
}

.right{
    position: fixed;
    top: 9.5rem;
    left: calc((100vw - 6rem) / 5 * 4 + 3rem);
    width: calc((100vw - 6rem) / 5 - 3rem);
    height: calc(100vh - 9.5rem);
}
.right a{
    display: block;
}
.credit{
    position: absolute;
    bottom: 1.75rem;
    font-size: 0.8rem;
}

.bn{
    position: fixed;
    top: 6.75rem;
    left: 3rem;
    width: calc((100vw - 6rem) / 5 * 4 - 3rem);
    z-index: 999;
}
.next{
    position: absolute;
    right: 0;
}
.project-title{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.content-wrap{
    position: relative;
    /* display: flex; */
    top: 9.2rem;
    left: 3rem;
    width: calc(100vw - 6rem);
}
.img-wrap{
    /* flex:4; */
    width: calc((100vw - 6rem) / 5 * 4 - 3rem);
    z-index: -1;
}
.img-wrap img{
    padding-bottom: 1.5rem;
    width: 100%;
}
.text-wrap{
    /* flex: 1; */
    position: fixed;
    left: calc((100vw - 6rem) / 5 * 4 + 3rem);
    top: 9.5rem;
    width: calc((100vw - 6rem) / 5 + 0.2rem);
    height: calc(100vh - 9.5rem);
    overflow-y: scroll;
}
.text-wrap::-webkit-scrollbar {
    display: none;
}
.description{
    padding-bottom:1rem;
    font-size:0.8rem;
}
.text{
    padding-bottom: 2rem;
    /* position: fixed; */
}