html {
  background-color: #262628; /* Black */
  font-family: 'Space Grotesk', sans-serif;
  color: #f8f8f8; /* White */
  font-size: 1em;
  line-height: 1.4em;
  scroll-behavior: smooth;
}

::selection,
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}


/* Container */
.container {
  margin: 60px 15px 30px;
  overflow: hidden;
}

.container-zero {
  margin: 0 15px;
  overflow: hidden;
}


/* Typography */
h1 {
  font-size: 2.7em;
  line-height: 1.2em;
  font-weight: 500;
}

h2 {
  font-size: 1.5em;
  line-height: 1.4em;
  font-weight: 500;
}

h3 {
  font-size: 1.2em;
  line-height: 1.4em;
  font-weight: 500;
}

h4 {
  font-size: 1.2em;
  line-height: 1.4em;
  font-weight: 500;
}

p {
  font-family: 'Assistant', sans-serif;
  font-size: 0.9em;
  margin: 15px 0;
  letter-spacing: 0.6px;
}


/* Other */
.decor {
  height: 3px;
  background-color: #f8f8f8;
  margin-bottom: 21px;
  border: none;
}

.separator {
  width: 100%;
  margin: 30px 0;
  height: 3px;
  background: repeating-linear-gradient(
    to right,
    #47554D,
    #47554D 20px,
    transparent 33px,
    transparent 42px
  )
}

.accordion {
  margin-top: 30px;
  margin-bottom: 15px;
}

  .accordion-header {  
    font-family: 'Assistant', sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    color: #f8f8f8; /* White */
    letter-spacing: 0.6px;
    text-align: center;
    cursor: pointer;
    border: 3px solid #47554D; /* Dark Green */
    border-radius: 15px;
    padding: 12px 21px;
    width: 120px;
    margin: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.21);
    transition: background-color 0.6s ease;
  }

  .accordion-header:hover {
    background-color: #47554D; /* Dark Green */
  }

.accordion-content {
  overflow: hidden;
  max-height: 0;
  margin-top: 15px;
  padding: 0 1px;
  transition: max-height 0.6s ease, padding 0.6s ease;
}

.accordion-content.open {
  padding: 1px;
}


/* Header */
#header {
  background: #6D7A73; /* Green */
  color: #323137;
  width: 100vw;
}

  .name-image {
    margin-top: 15px;
  }

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

  .header p {
    font-family: 'Assistant', sans-serif;
    font-size: 0.8em;
    text-decoration: none;
  }

  .menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f8f8f8;
  }

    .menu-items {
      list-style: none;
      display: flex;
      gap: 30px;
      margin: 0;
      padding: 0;
    }

      .menu-items li a {
        color: #f8f8f8; /* White */
        text-decoration: none;
      }

    .menu-toggle {
      display: none;
      font-size: 0.9rem;
      cursor: pointer;
      transition: 0.3s ease;
    }

    /* OVERLAY */
    .overlay-menu {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(38, 38, 40, 0.90);
      backdrop-filter: blur(6px);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 1000;
    }

    .overlay-menu.open {
      opacity: 1;
      pointer-events: auto;
    }

  /* Content animation */
  .overlay-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    transform: translateY(20px);
    opacity: 0;
    transition: 0.45s ease;
  }

    .overlay-content a {
      font-size: 1.5rem;
      text-decoration: none;
      text-align: center;
      color: #f8f8f8;
      opacity: 0;
      transform: translateY(20px);
      animation: none;
    }

    .overlay-menu.open .overlay-content a:nth-child(1) {
      animation: fadeSlideIn 0.45s ease forwards 0.1s;
    }

    .overlay-menu.open .overlay-content a:nth-child(2) {
      animation: fadeSlideIn 0.45s ease forwards 0.2s;
    }
    
    .overlay-menu.open .overlay-content a:nth-child(3) {
      animation: fadeSlideIn 0.45s ease forwards 0.3s;
    }

  .overlay-menu.open .overlay-content {
    transform: translateY(0px);
    opacity: 1;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


/* Footer */
footer {
  background-color: #262628; /* Black */
  color: #f8f8f8; /* White */
}

  .footer-nav {
    margin-top: 90px;
    display: flex;
    justify-content: space-between;
  }

    .footer-nav-items {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

      .footer-nav-items a {
        color: #f8f8f8; /* Bianco */
        transition: color 0.6s ease;
      }

        .hover-link:hover {
          cursor: pointer;
        }

          .linkedin-link:hover {
            color: #0077B5;
          }

          .white-link:hover {
            color: #f8f8f8;
          }

    .backtotop {
      font-family: 'Assistant', sans-serif;
      font-size: 0.9em;
      font-weight: 600;
      background-color: #f8f8f8; /* White */
      margin: 0;
      padding: 12px 21px;
      border-radius: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.21);
      transition: background-color 0.6s ease;
    }

    .backtotop:hover {
      background-color: #00D9FF; /* Electric Light Blue */
    }

      .backtotop a {
        color: #262628;
        text-decoration: none;
      }

#contact {
  height: 42vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

  .email-wrapper {
    position: relative;
    display: inline-block;
    text-align: center;
  }

  .email-label {
    display: block;
    font-size: 0.9em;
    color: #f8f8f8; /* White */
    font-family: 'Assistant', sans-serif;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.6s ease;
  }

  .email-link a {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3em;
    font-weight: 500;
    color: #f8f8f8; /* White */
    text-decoration: none;
    display: inline-block;
    transition: color 0.6s ease, transform 0.6s ease;
  }

    .email-wrapper:hover .email-label {
      opacity: 1;
      transform: translateY(0);
    }

    .email-wrapper:hover .email-link a {
      color: #00D9FF; /* Electric Light Blue */
      animation: subtleShake 0.6s ease-in-out infinite;
    }

@keyframes subtleShake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(1.2deg); }
  50% { transform: rotate(-1.2deg); }
  75% { transform: rotate(0.9deg); }
  100% { transform: rotate(0deg); }
}


/* Cookie */
.cookie-bar {
  position: fixed;
  bottom: 15px;
  left: 15px;
  right: 15px;
  background-color: #f8f8f8; /* White */
  color: #262628; /* Black */
  padding: 24px 30px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.21);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeInUp 0.6s ease forwards;
  font-family: 'Assistant', sans-serif;
  text-align: center;
}

  .cookie-bar h4 {
    margin: 0 0 12px;
    font-size: 1.2em;
    font-weight: 600;
    color: #262628; /* Black */
  }

  .cookie-bar p {
    font-size: 0.9em;
    margin: 0 0 18px;
    line-height: 1.4em;
    color: #262628; /* Black */
  }

  .cookie-buttons {
    display: flex;
    justify-content: center;
    gap: 18px;
  }

    .cookie-bar button {
      font-family: 'Assistant', sans-serif;
      font-size: 0.9em;
      background-color: #f8f8f8; /* White */
      color: #262628; /* Black */
      letter-spacing: 0.6px;
      font-weight: 600;
      cursor: pointer;
      border: 3px solid #262628; /* Black */
      border-radius: 15px;
      padding: 12px 21px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.21);
      transition: background-color 0.6s ease;
    }

    .cookie-bar button:hover {
      background-color: #262628; /* Black */
      color: #f8f8f8; /* White */
    }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ------------------------- Index ------------------------- */

/* Hero */
#hero {
  position: relative;
  background: #6D7A73; /* Green */
  overflow: hidden;
}

  #hero h1 {
    margin-top: 45px;
    width: 75vw;
    transition: all 0.6s ease;
  }

    #hero h1 a {
      color: #f8f8f8; /* White */
      text-decoration: none;
      transition: transform 0.6s ease;
    }

    #hero h1 a:hover {
        text-decoration: underline;
      }

    .video-section {
      position: relative;
      width: 100vw;
      height: 75vh;
      overflow: hidden;
      margin-top: 150px;
    }

      .video-section video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease, filter 0.6s ease;
      }

      .video-section:hover video {
          transform: scale(1.05);
          filter: brightness(1.2);
        }

/* Works */
#works {
  background-color: #424152; /* Blue */
  display: flow-root;
}

  .works-highlights {
    display: flex;
    gap: 18px;
  }

    .image-container {
      width: 30vw;
      height: 540px;
      position: relative;
      overflow: hidden;
      border-radius: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.21);
    }

      .image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
        opacity: 0;
        transition: opacity 0.9s ease;
        position: absolute;
      }

        .image.active {
          opacity: 1;
        }

    .text-item {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.8em;
      line-height: 1.5em;
      margin: 0;
      cursor: pointer;
      opacity: 0.3;
      transition: opacity 0.6s ease;
    }

    .text-item:hover {
      opacity: 1;
    }

      .text-item a {
        color: #f8f8f8; /* White */
        text-decoration: none;
      }

  .ticker-container {
    overflow: hidden;
    position: relative;
    padding: 15px;
    margin-bottom: 21px;
  }

    .ticker-track {
      display: flex;
      align-items: center;
      gap: 45px;
      white-space: nowrap;
      will-change: transform;
    }

      .ticker-item {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 72px;
      }

        .ticker-item img {
          height: 100%;
          width: auto;
          object-fit: contain;
          transition: filter 0.6s ease, transform 0.6s ease;
          filter: grayscale(100%) contrast(1.5) brightness(1.8);
          opacity: 0.9;
        }

        .ticker-item img:hover {
          filter: grayscale(0%) contrast(1) brightness(1);
          opacity: 1;
          transform: scale(1.05);
        }




/* ------------------------- About ------------------------- */

/* About */
#about {
  background: #6D7A73; /* Green */
  overflow: hidden;
}

  #about h2 {
    margin-top: 180px;
    margin-bottom: 90px;
    width: 75vw;
    transition: all 0.6s ease;
    color: #f8f8f8;
  }

  .school-link {
    color: #f8f8f8;
    transition: color 0.6s ease;
  }

  .school-link:hover {
    color: #fb9032;
  }

  .articles-container {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    margin-bottom: 30px;
    gap: 18px;
  }

    .article {
      width: 33%;
    }

      .article-image img {
        width: 100%;
        height: 270px;
        object-fit: cover;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.21);
        transition: transform 0.6s ease, box-shadow 0.6s ease, filter 0.6s ease;
      }

      .article-image img:hover {
        transform: translateY(-3px);
        filter:brightness(1.05);
        box-shadow:0 12px 24px rgba(0,0,0,0.30);
      }

      .article a {
        font-size: 1.2em;
        color: #f8f8f8;/* White */
        text-decoration: none;
      }


#myjourney{
  background-color: #47554D; /* Dark Green */
}

  .timeline {
    position: relative;
  }

  /* Linea centrale */
  .timeline::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    z-index: 0;
    transform: translateX(-50%);
    background: linear-gradient(
      to bottom,
      transparent 0%,
      #f8f8f8 15%,
      #f8f8f8 85%,
      transparent 100%
    );
  }

    .timeline-cards {
      margin-top: 60px;
      margin-bottom: 60px;
    }

      .timeline-item {
        position: relative;
        width: 50%;
        padding: 30px 132px;
        box-sizing: border-box;
      }

      /* Dot */
      .timeline-item::before {
        content: "";
        position: absolute;
        top: 25px;
        width: 16px;
        height: 16px;
        background: #47554D;
        border: 3px solid #f8f8f8;
        border-radius: 50%;
        z-index: 10;
      }

      /* Dot sulla linea centrale */
      .timeline-item.left::before {
        right: -11px; /* centrato sulla linea */
      }

      .timeline-item.right::before {
        left: -11px; /* centrato sulla linea */
      }

      /* Card sinistra e destra */
        .timeline-item.left {
          left: 0;
        }
          
        .timeline-item.right {
          left: 50%;
        }

      /* Sovrapposizione e minore distanza verticale */
      .timeline-item + .timeline-item {
        margin-top: -75px;
      }

        .card {
          position: relative;
          background: #6D7A73; /* Green */
          color: #f8f8f8; /* White */
          border-radius: 15px;
          padding: 15px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.21);
          z-index: 1;
          opacity: 0;
          transform: translateY(-60px);
          transition: transform 0.6s ease, box-shadow 0.6s ease;
        }

        .card:hover {
          transform: translateY(-3px);
          box-shadow:0 12px 24px rgba(0,0,0,0.30);
        }

        .card.attuale {
          background: #f8f8f8; /* White */
          color: #6D7A73; /* Green */
        }

          .card p.date {
            font-size: 0.75em;
            text-transform: uppercase;
            margin: 0px;
            margin-bottom: 3px;
          }

          .card h3 {
            margin: 0px;
          }

          .card p {
            margin: 0px;
            margin-top: 12px;
          }

          .card a {
            color: inherit;
            transition: color 0.6s ease;
          }

            .card a.mim-link:hover {
              color: #0066cc;
            }

            .card a.yam-link:hover {
              color: #222222;
            }

  /* ======================================
     ANIMAZIONI SCROLL
  ========================================= */

  .card.visible {
    opacity: 1;
    transform: translateY(0);
  }

    .timeline-item.left .card {
      transform: translateX(-60px);
    }

    .timeline-item.right .card {
      transform: translateX(60px);
     }

      .timeline-item.left .card.visible {
        transform: translateX(0);
        opacity: 1;
      }

      .timeline-item.right .card.visible {
        transform: translateX(0);
        opacity: 1;
      }

  /* ======================================= */

  .download-container {
    background-color: #47554D; /* Dark Green */    
    text-align: center;
    padding-top: 15px;
    padding-bottom: 45px;
  }

    .download-button {
      font-family: 'Assistant', sans-serif;
      background-color: #6D7A73; /* Green */
      color: #f8f8f8; /* White */
      font-weight: 600;
      font-size: 0.9em;
      letter-spacing: 0.6px;
      text-decoration: none;
      border-radius: 15px;
      padding: 12px 21px;
      display: inline-block;
      border-radius: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.21);
      transition: background-color 0.6s ease;
    }

    .download-button:hover {
      background: #f8f8f8; /* White */
      color: #6D7A73; /* Green */     
    }

  #referee-section{
    background-color: #424152; /* Blue */
  }

    #referee-section h2 {
      margin-top: 60px;
      width: 75vw;
    }

    #referee-section p {
      width: 75vw;
      margin-bottom: 120px;
    }




/* ------------------------- Project ------------------------- */

#project-info {
  background-color: #6d7a73; /* Green */
}

  .project-intro {
    margin-top: 180px;
  }

    .project-intro p {
      font-family: 'Assistant', sans-serif;
      font-size: 0.9em;
      margin: 0px;
    }

    .project-intro h2 {
      margin-top: 9px;
      margin-bottom: 3px;
    }

    .project-intro h1 {
      font-size: 2.7em;
      margin-top: 0px;
      margin-bottom: 18px;
    }

    .two-columns {
      column-count: 2;
      column-gap: 15px;
      width: 75vw;
    }

  .article-project {
    width: 75vw;
    margin-bottom: 75px;
  }

    .article-project h3 {
      color: #f8f8f8; /* White */
    }

    .article-project p {
      color: #f8f8f8; /* White */
    }

    .related-links {
      margin-bottom: 15px;
    }

      .related-links a {
        color: #f8f8f8; /* White */
        text-decoration: none;
        background-color: #8D9D94;
        padding: 9px 18px;
        border-radius: 15px;
        display: inline-block;
        margin-right: 3px;
        margin-bottom: 9px;
        transition: background-color 0.3s ease;
      }

      .related-links a:hover {
        background-color: #47554D;
      }

#gallery { 
  background: #424152;
}

  .masonry {
    margin-top: 15px;
    margin-bottom: 120px;
    column-gap:15px;
    column-count:4;
  }

    .photo-item {
      display:inline-block;
      width:100%;
      margin:0 0 15px;
      break-inside:avoid;
      -webkit-column-break-inside:avoid;
      -moz-column-break-inside:avoid;
      overflow:hidden;
      border-radius: 6px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.21);
      transition:transform 0.6s ease, box-shadow 0.6s ease;
    }

    .photo-item:hover {
      transform:translateY(-3px);
      box-shadow:0 12px 24px rgba(0,0,0,0.30);
    }

      .photo-item img {
        display:block;
        width:100%;
        height:auto;
        box-sizing:border-box;
        border-radius: 6px;
        transition:transform 0.6s ease, filter 0.6s ease;
        transform-origin:center center;
      }

      .photo-item:hover img {
        transform:scale(1.02);
        filter:brightness(1.05);
      }

.other-works {
  background: #424152;
}

  .other-works h2 {
    text-align: center;
  }

  .other-works-container {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    margin-bottom: 30px;
    gap: 18px;
  }

    .work-article {
      width: 25%;
    }

      .work-article-image img {
        width: 100%;
        height: 420px;
        object-fit: cover;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.21);
        transition: transform 0.6s ease, box-shadow 0.6s ease, filter 0.6s ease;
      }

      .work-article-image img:hover {
        transform: translateY(-3px);
        filter:brightness(1.05);
        box-shadow:0 12px 24px rgba(0,0,0,0.30);
      }

      .work-article h4 {
        font-size: 1.11em;
        margin: 0;
        margin-top: 15px;
      }

       .work-article p {
        font-size: 0.9em;
        margin-top: 6px;
      }

      .work-article a {
        color: #f8f8f8;/* White */
        text-decoration: none;
      }



/* ------------------------- Cookie ------------------------- */

.service-page h1 {
  margin-top: 180px;
  font-size: 1.8em;
}

.service-page h2 {
  font-size: 1.5em;
  margin-top: 30px;
}

.service-page h3 {
  font-family: 'Assistant', sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  margin-top: 12px;
}

.service-page p {
  font-size: 0.8em;
  line-height: 1.2em;
  color: #f8f8f8;
  width: 66vw;
}

.service-page a {
  color: #f8f8f8;
}


/* ==========================================================

   RESPONSIVE

========================================================== */

@media (max-width: 600px) {

  /* Typo */
  h1 {
    font-size: 2.1em; 
  }

  h2 { 
    font-size: 1.5em;
  }
  
  h3, h4 { 
    font-size: 1.11em; 
  }

  p {
    font-size: 0.9em; 
  }

  /* Header */
  .menu-items { 
    display: none; 
  }

  .menu-toggle {
      display: block;
    }

  /* Footer */
  #contact {
    height: 30vh;
  }

  .footer-nav { 
    flex-direction: column;
    margin-top: 45px;
    gap: 30px; 
  }

  .backtotop {
    display: inline-block;
  }

  .email-link a {
    font-size: 1.8em;
  }


  /* ----- Index ----- */

  /* Hero */
  #hero h1 {
   width: 90vw; 
   font-size: 2.1em; 
  }

  .video-section { 
    height: 60vh; 
    margin-top: 60px; 
  }

  /* Works */
  .project-intro h1 {
    font-size: 2.1em;
  }

  .works-highlights { 
    flex-direction: column;
    gap: 30px;
  }

  .image-container {
    width: 100%; 
    height: 420px; 
  }

  .text-item {
    font-size: 1.2em; 
  }

  .ticker-track {
    gap: 24px; 
  }

  .ticker-item {
    height: 48px; 
  }


  /* ----- About ----- */
  #about h2 {
    width: 90vw; 
    margin-top: 120px; 
  }

  .articles-container { 
    flex-direction: column; 
  }

  .article {
    width: 100%;
  }

  /* CV */
  .timeline::after {
    display: none;
  }

  .timeline-item {
    width: 100%;
    padding: 15px;
  }

  .timeline-item::before {
    display: none;
  }

  .timeline-item.left,
  .timeline-item.right {
    left: 0;
  }

  .timeline-item + .timeline-item {
    margin-top: 15px;
  }

  .card {
    padding: 21px;
  }

  /* Referee */
  #referee-section p {
      margin-bottom: 60px;
    }


  /* ----- Works ----- */
  .two-columns {
    column-count: 1; 
    width: 90vw; 
  }

  .article-project { 
    width: 90vw; 
  }

  .related-links a {
    margin-bottom: 15px;
  }

  /* Gallery */
  .masonry { 
    column-count: 1;
    margin-bottom: 45px;
  }


  /* Other works */
  .other-works-container { 
    flex-direction: column; 
  }

  .work-article { 
    width: 100%; 
  }
}



/* Tablet - 600px to 992px */
@media (min-width: 601px) and (max-width: 992px) {

  /* Typo */  
  h1 {
    font-size: 2.4em; 
  }

  /* Header */
  .menu-items {
    gap: 18px;
  }

  /* ----- Index ----- */

  /* Hero */
  #hero h1 {
    width: 84vw;
  }

  .video-section {
    height: 66vh; 
  }

  /* Works */
  .works-highlights {
    flex-direction: column;
    gap: 30px; 
  }

  .image-container {
    width: 81vw; 
    height: 750px;
  }

  /* ----- About ----- */
  #about h2 {
    width: 81vw;
  }

  .articles-container { 
    flex-direction: column;
  }

  .article { 
    width: 100%;
  }

  .article-image img {
    height: 420px;
  }

  /* CV */
  .timeline-item {
    padding: 30px; 
  }

  .card {
    padding: 21px;
  }

  /* ----- Works ----- */

  /* Project */
  .two-columns {
    column-count: 1;
  }

  /* Gallery */
  .masonry {
    column-count: 2;
    margin-bottom: 60px;
  }

  /* Other works */
  .other-works-container {
    flex-wrap: wrap;
  }

  .work-article {
    width: 48%; 
  }
}

/* Schermo grande - 1480px to 1800px */
@media (min-width: 1480px) and (max-width: 1800px) {

  /* Container */
  .container {
    margin: 60px 30px 30px;
    overflow: hidden;
  }
  .container-zero {
    margin: 0 30px;
    overflow: hidden;
  }

  /* Typography */
  h1 {
    font-size: 3.6em;
  }

  h2 {
    font-size: 2.1em;
  }

  h3 {
    font-size: 1.8em;
  }

  h4 {
    font-size: 1.5em;
  }

  p {
    font-size: 1.14em;
    line-height: 1.6em;
  }


  /* Other */
  .accordion {
    margin-top: 60px;
  }

  .accordion-header {  
    font-size: 1.14em;
    padding: 15px 24px;
    width: 150px;
  }


  /* Header */
  .header p {
    font-size: 1.14em;
  }

  .menu {
    margin-top: 12px;
  }

  .menu-items a {
    font-size: 1.14em;
  }

  /* Footer */
  .footer-nav-items {
    font-size: 1.14em;
  }

  .backtotop {
    font-size: 1.14em;
    padding: 15px 24px;
  }

  .email-label {
    font-size: 1.14em;
  }

  .email-link a {
    font-size: 3.6em;
  }

  /* ------------------------- Index ------------------------- */

  /* Hero */
  #hero h1 {
    margin-top: 150px;
  }

  .video-section {
    margin-top: 180px;
  }

  /* Works */
  .image-container {
    height: 600px;
  }
  
  .text-item {
    font-size: 2.1em;
  }

  .ticker-container {
    padding: 15px;
    margin-bottom: 21px;
  }

  .ticker-item {
    height: 90px;
  }

  /* ------------------------- About ------------------------- */

  /* About */
  .article-image img {
    height: 360px;
  }

  .timeline-cards {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .card {
    padding: 30px;
  }

  .card p.date {
    font-size: 0.9em;
  }

  .masonry {
    margin-top: 30px;
    column-gap:30px;
  }

  /* ======================================= */

  .download-button {
    font-size: 1.14em;
    padding: 15px 24px;
  }

  /* ------------------------- Project ------------------------- */

  .project-intro p {
    font-size: 1.14em;
  }

  .project-intro h1 {
    font-size: 3.3em;
  }

  .related-links a {
    font-size: 1.14em;
  }

  .work-article-image img {
    height: 600px;
  }

  .work-article h4 {
    font-size: 1.5em;
  }

  .work-article p {
    font-size: 1.14em;
  }
}




/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden,
[hidden] {
  display: none !important;
}

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}


@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}