@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.page-1 {
  width: 100%;
  height: 100vh;
  background-color: #414141;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  & .nav {
    width: 100%;
    background-color: #58545483;
    backdrop-filter: blur(10px); /* frosted glass blur */
    -webkit-backdrop-filter: blur(10px); /* for Safari */
    position: fixed;
    top: 0px;
    z-index: 1;
    & .logo {
      display: flex;
      align-items: center;

      & img {
        width: 5vw;
        height: auto;
      }
      & p {
        color: white;
        font-family: 'Ubuntu', sans-serif;
        font-weight: 900;
        font-size: 35px;
      }
    }
  }
  & .video-setting {
    width: 70%;
    height: 78vh;
    /* background-color: pink; */
    display: flex;
    justify-content: center;
    align-items: center;

    & video {
      width: 70vw;
      height: auto;
      border-radius: 20px;
      overflow: hidden;
    }

    & .control {
      width: 35px;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: #d1d1d1;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      position: relative;
      top: -220px;
      right: 60px;
      & img {
        width: 18px;
      }
    }
    :hover {
      background-color: #797979;
    }
  }
}