/* Use this with chrome: take a look: https://caniuse.com/mdn-css_properties_aspect-ratio */
.media {
    height: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.hero{
    position: relative;
    margin: 0; /* Reset any margins */
    padding: 0;
    height: 100vw;
    width: 100vw;

    /* if we use poisition at all, we should have a parent with a position we want */
    /* relative means do your normal thing */
}

.hero > video{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .hero > .hero__title {
        font-size: .2em;
    }
}

.hero > .hero__title{
    font-family: 'Alegreya SC', sans-serif;
    color: white;
    z-index: 90;
    position: absolute; 
    /* use this only rarely */
    top: 230px;
    bottom: 0px;
    left: 300px;
    right: 0px;
    text-align: center;
    line-height: 400px;
    font-weight: 900;
    font-size: clamp(4em, 6vw, 15em);
    text-wrap: nowrap;
}

.box_textshadow {
    text-shadow: 3px 3px 3px #010101;   
}

.socials{
    display: flex;
    justify-content: center;
}

.socials a {
    padding: 10px;
    font-size: 2em;
    color: var(--dark);
    transition: color .2s ease-in-out;
}

.socials a:hover {
    color: var(--link);
}

.icon--big{
    font-size: 6em;
    transition: color .2s ease-in-out;
    text-align: center;
    display: block;
    padding: 10px;
}

.icon--big:hover{
    color: var(--link);
}

.mask-1{
    mask-image: url(/images/pngtree-drawing-rocket-ship-for-a-spaceship-vector-png-image_6789426.png);
    mask-repeat: no-repeat;
    mask-position: center;
}

img {
    width: 100%;       /* Makes the image take up 100% of the container's width */
    height: auto;      /* Maintains the aspect ratio */
    object-fit: cover; /* Optionally, ensures the image covers the container without stretching */
}

.container {
    width: 100%;  /* or a fixed width like 300px */
    height: 300px;  /* Set a fixed height or percentage */
    overflow: hidden;  /* Hide any overflow if image is bigger than the container */
}

.container-img {
    max-width: 100%;   /* Ensure the image doesn't exceed the container's width */
    max-height: 100%;  /* Ensure the image doesn't exceed the container's height */
    object-fit: contain; /* This will maintain the image's aspect ratio */
}
/* carousel styles */

/* Ensure the carousel takes up the full viewport */
.carousel {
    position: relative;
    width: 100vw;  /* Full viewport width */
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Hide any content that overflows */
}

/* Adjust image styling */
.carousel__image {
    object-fit: cover; /* Make the image cover the entire container */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Stretch image to fill the width */
    height: 100%; /* Stretch image to fill the height */
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* Make the first image visible */
.carousel__image.visible {
    opacity: 1;
}

/* Keep the hidden images out of view */
.carousel__image.hidden {
    opacity: 0;
}