* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     font-family: 'Inter Tight', sans-serif;
}

:root {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
     scroll-snap-type: y mandatory;
     --white: #FEFAE8;
     --red:#FF3D00;
     --black:#2C3648;
     --title-letter-spacing: -0.1vw;
}

::-webkit-scrollbar {
     width: 0px;
}

.marquee {
     color: var(--black);
     opacity: 0.06;
     animation: horizontal-scroll 40s linear infinite;
}

@keyframes horizontal-scroll {
     0% {
          transform: translate(0,0);
     }
     100% {
          transform: translate(-100%,0);
     }
}

span {
     display: inline-block;
     transform: translate(-10px);
     opacity: 0;
     transition: opacity .3s ease-in-out transform 0.3s ease-in-out;
}

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

/* ----------- Mobile / Small Tablet ----------- */
@media screen and (max-width: 640px) {

     section {
          overflow: hidden;
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 100vh;
          padding: 4% 4%;
          scroll-snap-align: start;
          scroll-snap-stop: always;
     }

     #hero {
          display: flex;
          justify-content: center;
          background-color: var(--red);
          color: var(--white);
     }

     #portfolio {
          display: flex;
          flex-direction: column-reverse;
          justify-content: space-between;
          background-color: var(--white);
     }

     #portfolio h3{
          font-size: 18vw;
          color: var(--black);
     }    

     .case {
          cursor: pointer;
          display: flex;
          justify-content: start;
          align-items: center;
          font-size: 22px;
          font-weight: 400;
          border-top: 1px solid var(--black);
          padding: 6vw 0;
     }

     #label {
          font-size: 16px;
          font-weight: 400;
          color: var(--red);
     }

     #blackout {
          display: inline-block;
          font-size: 16vw;
          font-weight: 500;
          line-height: 1;
          letter-spacing: var(--title-letter-spacing);
          color: var(--black);
          opacity: 0;
     }

     h1{
          font-size: 16vw;
          font-weight: 500;
          line-height: 1;
          letter-spacing: var(--title-letter-spacing);
     }

     h2 {
          font-size: 15vw;
          font-weight: 500;
          line-height: 1;
          letter-spacing: var(--title-letter-spacing);
          margin: 2vw 0 -12vw;
     }

     h3 {
          font-size: 16vw;
          font-weight: 500;
          line-height: 1;
          letter-spacing: var(--title-letter-spacing);
          margin: 6vw 0;
     }

     h4 {
          font-size: 6vw;
          font-weight: 300;
          line-height: 1;
          margin: -2vw 0 0;
     }

     h5 {
          font-size: 100vw;
     }

     p {
          line-height: 1.7;
          font-size: 5vw;
          color: var(--black);
     }

     #medium {
          line-height: 1.7;
          font-size: 5vw;
          font-weight: 500;
          color: var(--red);
     }

     #about-me {
          background-color: var(--white);
          color: var(--red);
     }

     #about-me h3 {
          color: var(--black);
     }

     #about-me .text-box {
          width: 100%;
     }

     #about-me p {
          font-size: 18px;
     }

     #about-me #medium {
          font-size: 18px;
     }

     #marquee-container {
          position: relative;
          bottom: 440px;
          display: flex;
          white-space: nowrap;
     }

     #contact {
          display: flex;
          justify-content: end;
          gap: 18vw;
          background-color: var(--red);
          color: var(--white);
     }

     #contact h4 {
          font-size: 32px;
          color: var(--black);
          font-weight: 400;
     }

     .modal-case {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 10;
          overflow: auto;
          background-color: rgba(0, 0, 0, 0.9);
     }
     
     .modal-content {
          display: flex;
          flex-direction: column;
          margin: auto;
          width: 100vw;
     }
     
     .circle {
          width: 50px;
          height: 50px;
          text-align: center;
          background-color: white;
          position: fixed;
          top: 4vw;
          right: 4vw;
          border-radius: 100%;
          box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.05);
     }

     .close {
          position: relative;
          top: 3px;
          left: 1px;
          background: none;
          border: none;
          font-size: 32px;    
          color: var(--black);
          border-radius: 100%;
     }
     
     .text-intro {
          padding: 16vw 8vw;
          background-color: white;
     }
     
     .text-intro h4{
          font-size: 18px;
          color: var(--black);
          text-align: left;
          line-height: 1.7;
          font-weight: 400;
          letter-spacing: 1px;
     }
     
     .arrow {
          width: 30vw;
          height: 30vw;
          margin-bottom: -10vw;
     }

     .cta {
          display: flex;
          justify-content: space-between;
          gap: 2vw;
          margin: 2vw 0;
          text-decoration: none;
          color: var(--white);
          border: 1px solid var(--white);
          padding: 8vw 10vw;
          width: 100%;
          text-transform: uppercase;
          font-size: 14px;
     }

     svg {
          height: 16px;
          fill: var(--white);
          position: relative;
          bottom: 1px;
     }
}

/* ---------- Big Tablet / Desktop ---------- */
@media screen and (min-width: 640px) {
     section {
          overflow: hidden;
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 100vh;
          padding: 4% 4%;
          scroll-snap-align: start;
          scroll-snap-stop: always;
     }
     
     #hero {
          display: flex;
          justify-content: center;
          background-color: var(--red);
          color: var(--white);
          padding-bottom: 2vw;
     }

     #portfolio {
          display: flex;
          flex-direction: column-reverse;
          justify-content: space-between;
          background-color: var(--white);
     }

     #portfolio h3{
          font-size: 110px;
          color: var(--black);
          margin-right: 2vw;
     }

     .case {
          cursor: pointer;
          display: flex;
          justify-content: start;
          align-items: center;
          font-size: 36px;
          font-weight: 400;
          border-top: 1px solid var(--black);
          transition: 0.35s ease-in-out;
          padding: 1.8vw 0;
     }

     .case:hover {
          cursor: pointer;
          background-size: cover;
          background-position: center;
          transition: 0.35s ease-in-out;
          border-top: 1px solid var(--white);
          color: rgba(0, 0, 0, 0);
          padding: 6vw 0;
     }

     #label {
          font-size: 16px;
          font-weight: 400;
          color: var(--red);
     }

     .case:hover #label{
          color: rgba(0, 0, 0, 0)!important;
     }

     .case:hover:nth-child(1) {
          background-image: url(/Cases/06_Achmea.webp);
     }

     .case:hover:nth-child(2) {
          background-image: url(/Cases/Vattenfall\ Banner.webp);
     }

     .case:hover:nth-child(3) {
          background-image: url(/Cases/VodafoneZiggo\ Banner.webp);
     }

     .case:hover:nth-child(4) {
          background-image: url(/Cases/TIO\ Banner.webp);
     }

     .case:hover:nth-child(5) {
          background-image: url(/Cases/UPA\ Banner.webp);
     }

     #about-me {
          display: flex;
          flex-direction: column;
          background-color: var(--white);
          color: var(--red);
     }

     #about-me h3 {
          font-size: 110px;
          color: var(--black);
          padding-bottom: 2%;
          z-index: 10;
     }
     #about-me p {
          font-size: 22px;
          padding-bottom: 0;
     }

     #about-me .text-box {
          width: 60vw;
     }

     #marquee-container {
          position: relative;
          bottom: 180px;
          display: flex;
          white-space: nowrap;
     }

     #contact {
          display: flex;
          justify-content: center;
          align-items: start;
          background-color: var(--red);
          color: var(--white);
     }

     #contact h2 {
          padding-top: 0;
     }

     #contact h4 {
          font-size: 40px;
          color: var(--black);
          font-weight: 400;
     }

     .modal-case {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 10;
          overflow: auto;
          padding-top:  10vw;
          background-color: rgba(0, 0, 0, 0.9);
     }
     
     .modal-content {
          display: flex;
          flex-direction: column;
          margin: auto;
          width: 85vw;
     }
     
     .close {
          position: fixed;
          top: 3vw;
          right: 3vw;
          background: none;
          outline: none;
          border: none;
          font-size: 32px;    
          cursor: pointer;
          color: var(--white);
     }
     
     .text-intro {
          padding: 16vw 16vw;
          background-color: white;
     }
     
     .text-intro h4{
          font-size: 18px;
          color: var(--black);
          text-align: center;
          line-height: 1.7;
          font-weight: 400;
          letter-spacing: 1px;
     }

     #blackout {
          display: inline-block;
          font-size: 12vw;
          font-weight: 500;
          line-height: 1;
          letter-spacing: var(--title-letter-spacing);
          color: var(--black);
          opacity: 0;
     }

     h1 {
          display: inline-block;
          font-size: 12vw;
          font-weight: 500;
          line-height: 1;
          letter-spacing: var(--title-letter-spacing);
     }

     h2 {
          font-size: 10vw;
          font-weight: 500;
          line-height: 1;
          letter-spacing: var(--title-letter-spacing);
          margin: 2vw 0;
     }

     h3 {
          font-size: 8vw;
          font-weight: 500;
          line-height: 1;
          letter-spacing: var(--title-letter-spacing);
     }

     h4 {
          font-size: 2.5vw;
          font-weight: 300;
          line-height: 1;
     }
     
     h5 {
          font-size: 30vw;
     }

     p {
          line-height: 1.7;
          letter-spacing: 0.5px;
          font-size: 1.2vw;
          color: var(--black);
     }

     #medium {
          line-height: 1.7;
          font-size: 22px;
          font-weight: 500;
          color: var(--red);
     }

     .arrow {
          position: relative;
          left: 8px;
          height: 20vh;
          width: 20vh;
     }

     .ui {
          display: flex;
          width: 100%;
          gap: 0.5%;
          margin-top: 4vw;
     }

     .cta {
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          gap: 1vw;
          text-decoration: none;
          color: var(--white);
          border: 1px solid var(--white);
          padding: 2vw;
          width: 400px;
          text-transform: uppercase;
          font-size: 14px;
     }

     .cta:hover {
          background-color: var(--black);
          box-sizing: border-box;
          border: 1px solid var(--black);
          color: var(--red);
          transition: 0.2s ease-out;
     }

     .cta:hover svg {
          fill: var(--red);
     }

     svg {
          height: 16px;
          fill: var(--white);
     }
}

/* ---------- End media queries ---------- */