* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    vertical-align: baseline;
    font-size: 100%;
}

html {
    scroll-behavior: smooth;

    background-image: url("../img/paper-texture.jpg");
    background-size: cover;
    background-attachment: fixed;
}



/* UNIVERSAL */
body {
    font-family: "Rosarivo", Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

    position: relative;
}

body a {
    border-bottom: 1px solid transparent;
    text-decoration: none;
    color: black;
}

/* HEADER */
header {
    position: fixed;
    top: 0;

    width: 100%;
    height: 125px;

    z-index: 99;
}

/* MENU TOGGLE */
#menuToggle {
    position: absolute;
    top: 35%;
    left: 50px;
    transform: translate(0, -45%);

    -webkit-user-select: none;
    user-select: none;
}

#menuToggle input {
    display: block;
    width: 37px;
    height: 30px;
    position: absolute;
    top: -5px;
    left: -2px;

    cursor: pointer;

    opacity: 0; /* hide this */
    z-index: 99; /* and place it over the hamburger */

    -webkit-touch-callout: none;
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 2px;
    margin-bottom: 8px;
    position: relative;

    background-color: black;
    border-radius: 3px;

    z-index: 98;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background-color 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked~span {
    /*background-color: coral;*/
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
}

#menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(1px, -2px);
}

#menu {
    position: absolute;

    width: 800px;
    height: 100vh;

    max-width: 100vw;

    margin: -60px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;

    overflow-y: auto;

    background: rgb(255, 239, 224);

    list-style-type: none;

    -webkit-font-smoothing: antialiased;

    /* to stop flickering of text in safari */
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);

    z-index: 97;
}

#menu li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

#menu li div {
    padding-bottom: 5px;
}


#menu li div a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;

    font-size: 1.5rem;

    transition: max-width 0.5s ease-in-out;
}

#menu #artwork_box div a {
    margin-left: 8px;
}

#menu li:hover div a {
    max-width: 12rem;
}

#menu li:not(.sublinks) a:hover {
    color: coral;
}

#menu li label {
    cursor: pointer;
}

#menuToggle input:checked~ul {
    transform: none;
}

#menu p {
    font-size: 5rem;
}

#menu .sublinks a:hover {
    border-bottom: 1px solid coral;
}

/* LOGO */
header .img_box {
    width: 75px;
    height: 75px;
    overflow: hidden;

    position: absolute;
    top: 35%;
    left: 125px;
    transform: translate(0, -50%);

    z-index: 99;
}

header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

header .text_box {
    position: absolute;
    top: 25%;
    left: 230px;

    text-transform: uppercase;

    z-index: 99;
}

header #nav2 {
    position: absolute;
    top: 25%;
    right: 50px;
}

header #nav2 ul {
    list-style-type: none;
}

header #nav2 ul li {
    margin-bottom: 10px;
}

header #nav2 a:hover {
    border-bottom: 1px solid coral;
}

header #nav2 a.isActive {
    color: coral;
    pointer-events: none;
}


/* MAIN */

/* SECTION 1 */
#section1 {
    position: relative;
}

#section1 .effect_box {
    height: 100vh;
    display: grid;
    place-items: center;

    transform: translateY(-2vh);
}

.typing-effect {
    width: 20ch;
    animation: typing 2s steps(20), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid black;
    font-family: "Xanh Mono", monospace;
    font-size: 2em;
}

@keyframes typing {
    from {
        width: 0
    }
}

@keyframes blink {
    50% {
        border-color: transparent
    }
}

/* SCROLL DOWN BUTTON */
.scroll-btn {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);

    color: black;
}

.scroll-btn span {
    display: block;
    width: 20px;
    height: 20px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    margin: 0 auto 8px;
    transform: translateY(0) rotate(45deg);
    animation: scrollDown5 3s infinite;
}

@keyframes scrollDown5 {
    0% {
        transform: translateY(0) rotate(45deg);
        opacity: 0;
    }

    45% {
        transform: translateY(5px) rotate(45deg);
        opacity: 1;
    }

    100% {
        transform: translateY(10px) rotate(45deg);
        opacity: 0;
    }
}

.scroll-btn small {
    display: block;
    margin-top: 30px;
}


/* SECTION 2 */
#section2 {
    width: 90vw;
    height: 200vh;
    margin: auto;
    padding-top: 125px; /* leave room for header */

    display: flex;
    justify-content: space-between;
}

#section2 #latest_work {
    width: 65vw;
}

#section2 h2 {
    font-size: 2rem;
    
    padding: 1vw 0;
}

#section2 #latest_work .img_box {
    width: 100%;
    overflow: hidden;
}

#section2 img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

#section2 #latest_work h2 .dot {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 1vw;
    background-color: black;
    border-radius: 50%;
}

#section2 #latest_news {
    width: 20vw;
    overflow: hidden;
}

#section2 #latest_news .txt_box {
    width: 15vw;
    margin: auto;
    margin-top: 10vw;
}