@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap");

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

/* p,
li {
  font-size: 0.9em;
} */

/* HEADER */

#homepage {
    width: 100%;
    height: 100vh;
    position: relative;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2b292a;
    background-color: #d6b4b7;
}

nav {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #d6b4b7;
}

/* header nav {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 1rem 3rem;
} */

header nav ul {
    margin: 0;
    list-style: none;
    padding: 0;
    display: grid;
    align-items: center;
    text-align: center;
}

/* header nav ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
  align-items: center;
  justify-items: center;
} */

header nav ul li a {
    font-weight: 700;
    display: block;
    padding: 1rem 5rem;
    color: #2b292a;
    text-decoration: none;
}

/* header nav ul li a {
  position: relative;
  font-weight: 700;
  color: pink;
  text-decoration: none;
} */
/*HAMBURGER*/

.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color:pink;
}

h4 {
    font-family: "Pacifico", cursive;
    font-size: 1em;
    margin: 0;
}
img{
    width: 50px;
    height: auto;
}
 


a:hover {
    text-shadow: rgb(244, 227, 160) 3px 3px 3px;
} 


/*HOMEPAGE*/
.neonText {
    animation: flicker 1.5s infinite alternate;
    color: #fff;
}
h1 {
    font-family: "Pacifico", cursive;
    font-size: 3.5em;
    text-align: center;
}
/* Flickering animation */
@keyframes flicker {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {

        text-shadow:
            0 0 4px #6d1f1f,
            0 0 11px #f78a8a,
            0 0 19px #000000,
            0 0 40px rgb(255, 255, 255),
            0 0 80px rgb(252, 185, 206),
            0 0 90px rgb(252, 185, 185),
            0 0 100px rgb(252, 185, 185),
            0 0 150px rgb(168, 94, 94);

    }

    20%,
    24%,
    55% {
        text-shadow: none;
    }
}
.wrap {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 100vh;
    background: pink;
    /* background-image: linear-gradient(-206deg, #835eff 0%, #ff008d 100%); */
}

canvas {
    width: 100vw;
    height: 100vh;
    filter: blur(20px);
}

/* MAIN */

main {
    padding: 0 1rem;
}

section {
    padding: 2.5rem 0;
}

h2 {
    margin: 1rem 0;
}

.description li {
    margin-left: 2em;
}

.improve h3 {
    font-size: 2.5em;
    margin: 1rem 0;
}

.improve p {
    max-width: 35rem;
}

/* .see-work {
  display: grid;
  row-gap: 1em;
} */

.improve img {
    margin: 2em 0;
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.improve-btn {
    display: grid;
    row-gap: 2.5rem;
    justify-items: center;
}

.improve-btn li {
    list-style: none;
}

.improve li a {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    text-decoration: none;
    color: black;
    padding: 1rem;
    background-color: pink;
    border-radius: 10px;
}

.line {
    display: block;
    width: 100%;
    height: 2px;
    margin: 1.5rem auto;
    background-color: pink;
}

/* PACKAGE */

.print-old.active {
    display: none;
}

#slide-old-package {
    width: 100%;
    margin: 2em auto;
    aspect-ratio: 12 / 7;
    background: url("../images/Seojin-juice\ box.png");
    background-size: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation: paused;

    &:hover {
        animation-play-state: paused;
    }
}

.print-old li,
.print-new li {
    list-style: none;
    text-align: center;
}

#print a {
    cursor: pointer;
}

.print-new {
    display: none;
}

.print-new.active {
    display: block;
}
#slide-new-package {
    width: 100%;
    margin: 2em auto;
    aspect-ratio: 12 / 7;
    background: url("../images/juicebox_revi_mockup_final.png");
    background-size: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /* animation: play 10s infinite;

    &:hover {
        animation-play-state: paused;
    } */
}

@keyframes play {

    0%,
    10% {
        background-position: 0%;
    }

    33.33%,
    50% {
        background-position: 100%;
    }

    90%,
    100% {
        background-position: 200%;
    }
}
/* case study */

/* .case {
    display: none;
} */

.case.active {
    display: block;
}

#case-study {
    width: 100%;
    margin: 2em auto;
    aspect-ratio: 11 / 7;
    background: url("../images/case1-1.png");
    background-size: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation: play 10s infinite;

    &:hover {
        animation-play-state: paused;
    }
}

@keyframes play {

    0%,
    10% {
        background-position: 1%;
    }

    33.33%,
    50% {
        background-position: 100%;
    }

    90%,
    100% {
        background-position: 197%;
    }
}
/* personal pj */

/* .case {
    display: none;
} */

.personal.active {
    display: block;
}

#personal-pj {
    width: 90%;
    margin: 2em auto;
    aspect-ratio: 11 / 11;
    background: url("../images/hh.png");
    background-size: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation: play 10s infinite;

    &:hover {
        animation-play-state: paused;
    }
}

@keyframes play {

    0%,
    10% {
        background-position: 0%;
    }

    33.33%,
    50% {
        background-position: 50%;
    }

    80%,
    100% {
        background-position: 100%;
    }
}
/* FOOTER */

footer {
    text-align: center;
    background-color: #d6b4b7;
}

/*MEDIA*/

@media (max-width: 999px) {
    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu {
        position: fixed;
        right: -100%;
        top: 110px;
        gap: 0;
        flex-direction: column;
        background-color: white;
        width: 100%;
        height: calc(100vh - 110px);
        transition: 0.3s;
        z-index: 1;
    }

    header nav ul li a {
        padding: 0;
    }

    .nav-item {
        margin: 16px 0;
    }

    .nav-menu.active {
        right: 0;
    }
}

@media (min-width: 1000px) {
    nav {
        display: grid;
        grid-template-columns: 1fr auto;
        background: none;
    }

    header nav ul {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(5, auto);
        align-items: center;
        justify-items: center;
    }

    header nav ul li a {
        padding: 0.8em 1.5em;
        color: #ffffff;
        border-radius: 1em;
    }

    header a::before {
        content: "";
        position: absolute;
        top: 140%;
        left: 0;
        width: 0;
        height: 2px;
        /* background: #2b292a; */
        transition: 0.3s;
    }

 header a:hover::before {
     width: 100%;
 }

    h1 {
        font-size: 8em;
    }

    main {
        padding: 0 8rem;
    }

    .improve {
        display: grid;
        grid-template-columns: 1.2fr 2fr;
        column-gap: 5rem;
    }

    .improve h3 {
        font-size: 4.5em;
    }

    .improve-btn {
        grid-template-columns: repeat(2, auto);
        column-gap: 2rem;
    }
}