@layer basic {
  @font-face {
    font-family: "Roboto";
    src: url("../media/Roboto-VariableFont_wdth\,wght.ttf");
  }

  * {
    box-sizing: border-box;
    /* for debugging*/
    /* outline: 1px solid red;
    background-color: #f002; */
  }
  :root {
    interpolate-size: allow-keywords;

    --video_width: 500px;

    --size-fluid-1: clamp(0.5rem, 1vw, 1rem);
    --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
    --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
    --size-fluid-4: clamp(2rem, 4vw, 3rem);
    --size-fluid-5: clamp(4rem, 5vw, 5rem);
    --size-fluid-6: clamp(5rem, 7vw, 7.5rem);
    --size-fluid-7: clamp(7.5rem, 10vw, 10rem);
    --size-fluid-8: clamp(10rem, 20vw, 15rem);
    --size-fluid-9: clamp(15rem, 30vw, 20rem);
    --size-fluid-10: clamp(20rem, 40vw, 30rem);

    --font-size-fluid-0: clamp(0.75rem, 2vw, 1rem);
    --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
    --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
    --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
  }

  body {
    /* font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans",
      Arial, sans-serif; */
    padding-block: 0;
    margin-block: 0;
    font-family: "Roboto", system-ui, sans-serif;
    color: #fff;
    font-size: 18px;
    font-variation-settings: "wght" 400;
    background-color: #1c1d21;
    font-variation-settings: "wght" 300;
  }

  .fw-bold {
    font-variation-settings: "wght" 700;
  }
  .fw-light {
    font-variation-settings: "wght" 300;
  }
  .fw-extralight {
    font-variation-settings: "wght" 100;
  }
  .fw-medium {
    font-variation-settings: "wght" 500;
  }
}
.logo {
  font-size: 25px;
  backdrop-filter: blur(12px);
}
.container {
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
  justify-content: center;

  background-image: url("../media/bck.jpg");
  background-size: contain;
  background-repeat: repeat-x;
}

.video {
  aspect-ratio: 1235 / 2159;
  width: calc(100vh * (1235 / 2159));
}
video {
  aspect-ratio: 1235 / 2159;
  width: calc(100vh * (1235 / 2159));
  border: 1px solid #ffffff40;
}
.address {
  backdrop-filter: blur(12px);
}
.address-text {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 2rem 0.4rem;
}
img.icon {
  width: 1.4rem;
}
.logo img {
  width: 7rem;
}
img.icon_phone {
  width: 1.2rem;
}
img.icon_mail {
  width: 1.5rem;
}

@media screen and (width >= 1550px) {
  .address,
  .logo {
    position: relative;
    & > div.logo-text {
      position: absolute;
      bottom: 370px;
      right: 82px;
    }
    & > div.address-text {
      position: absolute;
      bottom: 160px;
      left: 100px;
    }
  }
}
@media screen and (width < 1550px) {
  .address,
  .logo {
    & > div.logo-text {
      right: 10px;
    }
    & > div.address-text {
      left: 10px;
    }
  }
}
@media screen and (width < 1550px) {
  .nomobile {
    display: none;
  }
  video {
    border: none;
  }
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: none;
    background-color: #1c1d21;
  }

  .logo {
    font-size: 25px;
    padding: 0px 10px;
  }
  .address {
    font-size: 15px;
    padding: 10px;
  }
}
@media screen and (width < 750px) {
  .nomobile {
    display: none;
  }
  .container {
    grid-template-columns: 1fr;
    background-image: none;
    background-color: #1c1d21;
  }

  .logo {
    font-size: 25px;
    padding: 0px 10px;
  }
  .address {
    font-size: 15px;
    padding: 10px;
  }
  video,
  .video {
    width: 100svw;
  }
}