@font-face {
  font-family: Roboto;
  src: url(roboto.woff2);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Ranchers;
  src: url("/ranchers.woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    background: #000;
}

body {
    margin: 0;
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.slacklife {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #000;
	
  a {
    all: unset;
    color: #000;
	cursor: pointer;

    h1 {
      background: rgba(255, 255, 255, 0.70);
      padding: 28px;
      font-family: "Ranchers", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 72px;
      transition: transform 220ms cubic-bezier(0.34, 2, 0.64, 1), 
      			border-radius 220ms ease;

      @media (max-width: 768px) {
		font-size: 48px;
	  }
      
      &:hover {
        border-radius: 32px;
        transform: scale(1.2);
      }

    }
  }
}

.section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  
  padding: 40px;
  box-sizing: border-box;
  
  h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 200;
    letter-spacing: 1px;
  }
}

.video {
  background: #000;

  .video-layout {
    display: flex;
    gap: 40px;

    align-items: center;
    justify-content: center;

    @media (max-width: 768px) {
      width: 100%;
      height: 100%;
      flex-direction: column;
      gap: 10px;
	}

	.text {
      flex: 1;
	  display: flex;
      justify-content: center;
      flex-direction: column;

      max-width: 500px;
      color: #fff;

      @media (max-width: 768px) {
        width: 100%;
        max-width: none;
	  }

      h2 {
	    margin: 0;
        font-size: 2rem;
        margin-bottom: 12px;

        @media (max-width: 600px) {
	      font-size: 1.6rem;
	      line-height: 1.1;
        }
      }

      p {
        font-size: 1rem;
        line-height: 1.5;
        opacity: 0.85;
      }
    }

    .media {
      flex: 1;

      display: flex;
      justify-content: center;
      align-items: center;

      @media (max-width: 768px) {
        width: 100%;
        height: 60vh;
	  }

      video {
        max-height: 80vh;
        object-fit: cover;
        border-radius: 12px;

        @media (max-width: 768px) {
          width: 100%;
          height: 100%;
          max-height: none;
	    }
      }
    }
  }
}