* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}

nav {
  position: absolute;
  top: 1rem;
  font-weight: 800;
  li {
    list-style: none;
    transition: all 0.3s ease-in;
    &:hover {
      scale: 104%;
    }
    &:active {
      scale: 97%;
    }
  }
}

.frameContainer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.webFrames {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  iframe {
    border: 4px solid black;
  }
}

.ytFramesIntro {
  h1 {
    font-family: monospace;
    font-size: 1.5rem;
    text-align: center;
    font-weight: 800;
    padding-block: 1rem;
    span {
      color: red;
    }
  }
}

.ytFrames {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  /* border: 4px solid green; */
  width: 100%;
  background-image: linear-gradient(
    to right,
    rgb(235, 166, 166),
    rgb(233, 207, 160),
    rgb(227, 227, 172)
  );
}

.youtubeFrames {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-bottom: 3rem;
  background-color: rgb(134, 21, 21);
  padding: 1rem;
  border-radius: 0.2rem;

  .ytFrameOne {
    grid-column: 1/2;

    iframe {
      width: 300px;
      height: 200px;
    }
  }

  .ytFrameTwo {
    grid-column: 2/3;

    iframe {
      width: 300px;
      height: 200px;
    }
  }

  .ytFrameThree {
    grid-column: 1/3;

    iframe {
      width: 610px;
      height: 300px;
    }
  }
}