style.scss

@import url('https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

:root {
  --clr-nav: #e9dfb6;
  --clr-h1: #57503b;
  --clr-h2: #616c51;
  --clr-h3: #645c45;
  --clr-p: #5a4617;
  --clr-a: #6e6755;
  --clr-main: #e9d6a9;
  --clr-background-box: #dfca99;
  --clr-footer: #e9dfb6;
  --clr-footer-hover: #c9be93;
  --clr-line: #ccc2ab;
  --clr-box-image: #b89e67ce;
  --clr-box-btn: #912b06;
  --clr-box-h1: #862705;
  --clr-box-p: #722205;
}

.darkmode {
  --clr-nav: #443737;
  --clr-h1: #ddd5ce;
  --clr-h2: #c0bab5;
  --clr-h3: #9b958f;
  --clr-p: #c2cac1;
  --clr-a: #e6ddc6;
  --clr-main: #272121;
  --clr-background-box: #463c3c;
  --clr-footer: #443737;
  --clr-footer-hover: #312929;
  --clr-line: #807b6d;
  --clr-line: #807b6d;
  --clr-box-image: #1d1818de;
  --clr-box-btn: #fa7d09;
  --clr-box-h1: #cc721e;
  --clr-box-p: #dd8a3b;
}

header,
h1,
h2,
h3,
p,
a main,
footer,
line {
  transition: background 0.6s linear, color 0.6s linear;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
}

.container {
  width: 75%;
  margin: auto;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
  color: var(--clr-a);
  font-size: 1.3em;
}

h1 {
  color: var(--clr-h1);
  font-size: 6em;
  font-family: 'Anton', sans-serif;
}

h2 {
  color: var(--clr-h2);
  font-size: 2em;
  font-family: 'Oswald', sans-serif;
}

h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.5em;
  color: var(--clr-h3);
}

p {
  font-size: 1.6em;
  color: var(--clr-p);
  font-family: 'Raleway', sans-serif;
}

ul {
  list-style-type: none;
}

li {
  font-family: 'Raleway', sans-serif;
  color: var(--clr-a);
}

.btn {
  display: inline-block;
  background: none;
  border: none;
  font-family: 'Raleway', sans-serif;
}

.space {
  padding-bottom: 9rem;
}

header {
  background: var(--clr-nav);
  border-bottom: 0.5px solid var(--clr-line);

  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 6.3rem;

    .logo {
      a {
        font-family: 'Zen Tokyo Zoo', cursive;
        font-size: 3.5em;
      }
    }

    ul {
      display: flex;
      align-items: center;
      gap: 1.6em;

      li > button {
        cursor: pointer;
      }

      li:not(:last-of-type) {
        position: relative;

        &::after {
          content: '';
          width: 0;
          border-bottom: 3px solid (var(--clr-line));
          position: absolute;
          bottom: -5px;
          left: 0;
          transition: 0.3s;
        }

        &:hover {
          &::after {
            width: 100%;
          }
        }
      }
    }
  }
}

main {
  background: var(--clr-main);

  h1 {
    text-align: center;
    padding: 0.4em 0 0.6em 0;
    text-transform: uppercase;
  }

  p {
    text-align: justify;
  }

  .box {
    background: linear-gradient(var(--clr-box-image), var(--clr-box-image)), url(./assets/mhd.jpg) center center / cover;

    h1 {
      color: var(--clr-box-h1);
    }

    p {
      padding: 0 1.3em;
      margin: 0 0 1em 0;
      color: var(--clr-box-p);
    }

    .btn {
      padding: 1em 0 3.3em 0;
      display: flex;
      justify-content: center;
      text-transform: uppercase;

      a {
        text-align: center;
        font-size: 1.9em;
        border: 5px solid var(--clr-box-btn);
        padding: 0.6em;
        border-radius: 3px;
        color: var(--clr-box-btn);
        font-weight: bold;
        transition: background 0.3s ease, color 0.3s ease;

        &:hover {
          background: var(--clr-box-btn);
          color: black;
        }
      }
    }
  }

  .sponsors {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4em;
    padding: 5em 0 0 0;
    align-items: flex-end;

    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      background: var(--clr-background-box);
    }

    img {
      width: 75%;
      padding: 0 0 3em 0;
    }
  }
}

main.about {
  h2 {
    font-size: 2.5em;

    &:not(:first-of-type) {
      padding: 2em 0 0 0;
    }
  }

  ul {
    li {
      display: flex;
      align-items: center;

      img {
        width: 3em;
        padding: 0 0.7em 0 0;
      }
    }
  }

  ul.technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;

    li {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 10em;
      height: 10em;
      padding: 1em;
      background: var(--clr-background-box);
      font-size: 1.1em;
    }
  }

  ul.team {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;

    ul {
      background: var(--clr-background-box);
      padding: 1em;
      width: 20em;

      h3 {
        padding: 0 0 0.3em 0;
      }

      li {
        font-size: 1.2em;
      }
    }
  }
}

main.error {
  h1 {
    padding: 2.5em 0;
  }
}

main.map {
  iframe {
    padding: 2em 0 2em 0;
  }
}

footer {
  padding: 5em 0 0 0;
  background: var(--clr-footer);
  border-top: 0.5px solid var(--clr-line);

  a {
    font-family: 'Raleway', sans-serif;
  }

  img {
    width: 1.3em;
    padding: 0 5px 0 0;
  }

  .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    ul {
      margin: 0 auto;

      h2.title {
        padding: 0 0 0.3em 0;
      }

      li {
        a {
          display: flex;
          align-items: center;
          transition: background 0.3s linear;
          padding: 0.15em;

          &:hover {
            background: var(--clr-footer-hover);
            border-radius: 5px;
          }
        }
      }

      &.authors {
        li.heading {
          font-size: 1.5em;
          color: var(--clr-a);
          font-weight: 600;

          a {
            font-size: 2em;
          }

          &:not(:first-of-type) {
            padding: 1em 0 0 0;
          }
        }
      }
    }
  }

  .cc {
    padding: 3em 0 3em 0;
    text-align: center;

    p {
      color: var(--clr-a);
      font-size: 1.3em;
    }
  }
}

@media (max-width: 600px) {
  a {
    font-size: 0.8em;
  }

  h1 {
    font-size: 2.3em;
  }

  h2 {
    font-size: 1.3em;
  }

  h3 {
    font-size: 1.1em;
  }

  p {
    font-size: 1em;
  }

  li {
    font-size: 0.9em;
  }

  .container {
    width: 100%;
  }

  .space {
    padding-bottom: 2rem;
  }

  header {
    padding: 0 13px;

    nav {
      height: 3.3em;

      .logo {
        font-size: 0.45em;
      }

      button img {
        width: 1.3em;
      }

      ul {
        gap: 0.7em;
      }
    }
  }

  main {
    h1 {
      padding: 0.8em 13px 0 13px;
    }

    .box {
      p {
        padding: 0 13px;
      }

      .btn {
        padding: 1em 0 1.7em 0;

        a {
          border: 2px solid var(--clr-box-btn);
          font-size: 1em;
        }
      }
    }

    .sponsors {
      grid-template-columns: 1fr;
      gap: 2.5em;
      padding: 0;

      div {
        height: 380px;
      }

      img {
        width: 50%;
      }
    }
  }

  main.about {
    .container {
      width: 95%;

      h2 {
        font-size: 1.3em;
      }

      ul.technologies {
        display: grid;
        gap: 1em;
        grid-template-columns: repeat(2, 1fr);

        li {
          width: auto;
          font-size: 0.9em;

          &:not(:last-of-type) {
            padding: 0 0 0.5em 0;
          }
        }
      }

      ul.team {
        width: 100%;
        gap: 1em;

        ul {
          padding: 0.4em;
          width: 100%;

          li {
            font-size: 0.9em;
          }
        }
      }
    }
  }

  footer {
    padding-top: 2.3em;

    .container {
      width: 95%;

      .content {
        display: grid;
        grid-template-columns: 1fr;

        ul {
          margin: 0;

          &.authors {
            li.heading {
              font-size: 1em;
            }
          }

          &:not(:last-of-type) {
            margin: 0 0 2em 0;
          }
        }
      }

      .cc {
        p {
          font-size: 0.85em;
        }
      }
    }
  }
}