@media (max-width: 900px) {
  body {
    grid-template-columns: repeat(2, 1fr) repeat(3, 0) !important;
    grid-template-rows: repeat(5, 1fr) !important;
  }

  .header {
    grid-area: 1 / 1 / 3 / 3 !important;
  }

  .links {
    grid-area: 3 / 1 / 6 / 2 !important;
  }

  .under-construction {
    grid-area: 3 / 2 / 6 / 3 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 650px) {
  body {
    grid-template-columns: 1fr repeat(4, 0) !important;
    grid-template-rows: 1fr 0.5fr 1fr 0.5fr 1fr !important;
  }

  .header {
    grid-area: 1 / 1 / 3 / 2 !important;
  }

  .links {
    grid-area: 3 / 1 / 5 / 2 !important;
  }

  .under-construction {
    grid-area: 5 / 1 / 6 / 2 !important;
    margin-top: 0 !important;
    max-height: 100px !important;

    &>h1 {
      padding-top: 15px !important;
      padding-left: 0 !important;
      text-align: center !important;
      font-size: 5dvw !important;

      transform: rotate(0deg) !important;
      /* Safari */
      -webkit-transform: rotate(0deg) !important;

      /* Firefox */
      -moz-transform: rotate(0deg) !important;

      /* IE */
      -ms-transform: rotate(0deg) !important;

      /* Opera */
      -o-transform: rotate(0deg) !important;
    }
  }
}

* {
  transition: all 0.5 ease;
  box-sizing: border-box;
}

body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;

  overflow-x: hidden;

  padding-left: 12.5dvw;

  background-color: #16181a;

  font-family: "Inconsolata";
  color: #f0f0f0;
}

h1 {
  font-size: 7.5dvh;
  margin-bottom: 0;
}

h2 {
  font-size: 5dvh;
}

a {
  text-decoration: none;
  color: #eeac00;
  font-weight: bolder;
  font-size: 110%;
}

.header {
  grid-area: 1 / 1 / 4 / 4;

  display: flex;
  flex-direction: column;
  padding-top: 12.5dvh;

  align-items: flex-start;
}

.links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  grid-area: 4 / 1 / 6 / 4;
}

.under-construction {
  grid-area: 1 / 4 / 6 / 6;

  border: 1px solid #232324;
  border-radius: 15px;
  margin-top: 12.5dvh;
  width: 75%;
  height: 100%;

  --c1: #eeac00;
  --c2: #202120;

  &>h1 {
    padding-top: 35%;
    padding-left: 25%;
    text-align: center;
    font-size: 5dvw;

    color: #f0f0f0;
    text-shadow: -1px -1px 0 var(--c2), 1px -1px 0 var(--c2), -1px 1px 0 var(--c2), 1px 1px 0 var(--c2);

    transform: rotate(45deg);
    /* Safari */
    -webkit-transform: rotate(45deg);

    /* Firefox */
    -moz-transform: rotate(45deg);

    /* IE */
    -ms-transform: rotate(45deg);

    /* Opera */
    -o-transform: rotate(45deg);
  }

  background: repeating-linear-gradient(45deg,
    var(--c1),
    var(--c1) 10px,
    var(--c2) 10px,
    var(--c2) 20px);
}