h1 {
    font-family: "Old-English";
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.video-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 1;
}

.background-video.active {
  opacity: 1;
}

.shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 3;
  padding: 20px;
}

.overlay h1 {
  font-size: 3rem;
  margin: 10px 0;
}

.overlay h2,
.overlay h3 {
  font-size: 1.5rem;
  margin: 5px 0;
}

.overlay a {
  margin-top: 20px;
  padding: 12px 35px;
  font-size: 1.2rem;
  border: none;
  border-radius: 30px;
  background-color: white;
  color: black;
  cursor: pointer;
  transition: all 0.3s ease;
}

.overlay a:hover {
  background-color: black;
  color: white;
}

@media (max-width: 768px) {
  .overlay h1 {
    font-size: 2rem;
  }
  .overlay h2,
  .overlay h3 {
    font-size: 1rem;
  }
  .overlay a {
    font-size: 1rem;
    padding: 10px 25px;
  }
}


#land {
    box-sizing: border-box;
    padding: 4em;
    height: 100dvh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    & > section {
        padding: 2em;
        padding-top: 100px;
        font-size: 0.7vw;

        & > h1 {
            font-size: 7em;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            font-weight: 500;
        }

        & > h2 {
            letter-spacing: 0.2em;
            font-weight: 400;
            & > span {
                font-weight: 600;
            }
        }

        
    }
}

#about {
    padding: 200px 0;
    position: relative;

    & > * {
        border-radius: 2em;
    }

    & > section {
        background-color: white;
        position: relative;
        left: 15%;
        max-width: 40vw;
        padding: 2em 3em;
        z-index: 4;
        box-shadow: 3px 3px 20px 2px black;
        display: flex;
        gap: 1.3em;
        flex-direction: column;

        & > h2 {
            font-size: 2.7rem;
            font-weight: 500;
            font-family: "Old-English";
        }

        & > a {
            display: block;
            padding: 0.6em 2em;
            margin: 0.8em 0;
            width: fit-content;
            letter-spacing: 0.2em;
            border-radius: 2em;
            border: 2px solid rgb(0, 0, 0);
        }

        & > p {
            font-weight: 500;
            color: rgb(71, 71, 71);
        }
    }

    & > img {
        width: 45vw;
        height: 70%;
        top: 50%;
        transform: translateY(-50%);
        right: 10%;
        position: absolute;
        background-color: aqua;
        z-index: 3;
        object-fit: cover;
        filter: drop-shadow(0 0 0.5rem rgb(0, 0, 0));
        backdrop-filter: blur(50px) saturate(3);
    }
}

#updates {
    height: fit-content;
    margin-top: 80px;
    margin-bottom: 100px;
    min-height: 600px;
    & > h1 {
        text-align: center;
        padding: 0em;
        font-size: 2.3em;
        font-family: sans-serif;
        font-weight: 700;
    }
    & > h3 {
        padding: 0 1em;
        width: fit-content;
        margin: auto;
        text-align: center;
        color: #424242;
        background-color: rgb(255, 255, 255);
        font-weight: 600;
        font-size: 1.5em;
    }
    & > hr {
        position: relative;
        display: block;
        width: 32em;
        max-width: 1250px;
        height: 0.2em;
        transform: translateY(1.3em);
        margin: auto;
        background-color: rgb(102, 102, 102);
        border-radius: 0.2em;
        z-index: -1;
    }

    & > section {
        width: 75vw;
        /* background-color: rgba(23, 139, 139, 0.418); */
        margin: 4em auto;
        display: flex;
        flex-direction: row;
        justify-content: safe center;
        height: 60dvh;
        gap: 2em;

        & > a {
            position: relative;
            width: 230px;
            display: block;
            border-radius: 70px;
            height: 90%;
            transition: 0.3s;
            overflow: hidden;
            background-image: url(../media/light-gray.jpg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            & > span {
                transition: inherit;
                box-sizing: border-box;
                width: 100%;
                text-align: center;
                position: absolute;
                bottom: 0;
                background-image: linear-gradient(0deg, #000c, transparent);
                color: rgb(255, 255, 255);
                font-weight: 500;
                font-size: 1.3em;
                line-break: auto;
                padding: 1.0em 1em;
                opacity: 0;
            }
        }

        &:not(:hover) > a:nth-child(0),
        & > a:hover {
            width: 400px;
            & > span {
                opacity: 1;
            }
        }
    }

    & > div {
        position: absolute;
        bottom: 4em;
        display: flex;
        gap: 1rem;
        left: 50%;
        transform: translateX(-50%);
        margin: auto;
        z-index: 6;
        & > i {
            display: block;
            width: 0.6em;
            aspect-ratio: 1/1;
            transition: 0.8s ease-in-out;
            border-radius: 50%;
            border: 3px solid rgb(255, 255, 255);
            /* cursor: pointer;
            &:hover, */
            &.active {
                background-color: rgb(255, 255, 255);
            }
        }
    }
}

#history {
    background: linear-gradient(#000a, #000), url(../media/dm3-ls.jpg);
    text-align: center;
    color: white;
    padding: 50px 2em 80px;

    & > h1 {
        font-size: 6em;
        font-weight: 300;
    }
    & > p {
        padding: 2em;
        max-width: 1000px;
        margin: auto;
        color: #cacaca;
    }
    & > a {
        display: block;
        margin: auto;
        border-color: #ffffff;
        background-color: transparent;
        color: #b3b3b3;
    }
}

@media screen and (max-width: 670px) {
    div#lnd {
        display: block;
        padding: 0;
        position: relative;
        & > section {
            width: 100%;
            position: absolute;
            text-align: center;
            padding: 1em;
            box-sizing: border-box;
            bottom: 0;
            font-size: 0.35rem;

            & > h1 {
                letter-spacing: 0;
            }

            & > a {
                margin: 2em auto;
            }
        }
        & > video {
            width: fit-content;
            display: flex;
            z-index: -1;
            margin-top: 10%;
            position: absolute;
            

        }
    }

    div#about {
        padding: 100px 0;
        & > section {
            text-align: center;
            border-radius: 0;
            box-shadow: none;
            box-sizing: border-box;
            max-width: 100vw;
            position: static;
            padding: 1.5em 2em;
            & > a {
                margin: 0.8em auto;
            }
        }
        & > img {
            display: none;
        }
    }

    div#updates {
        display: none;
    }

    div#history {
        & > h1 {
            font-size: 2em;
        }
        & > p {
            font-size: 1rem;
        }
        & > a {
            font-size: 0.9em;
        }
    }
}