/* Initially hide the section */
#hero-section, 
#about-section {
  opacity: 0;
  transition: opacity 1s ease-in-out; /* Smooth transition for fade-in */
}

/* Fade in the section when it's in view */
#hero-section.visible {
  opacity: 1;
  transition: opacity 2s ease-in-out; /* Fade in over 2 seconds */
}
#about-section.visible, 
#features-section.visible, 
#reeling-section.visible, 
#misc-section.visible, 
#outro-section.visible {
  opacity: 1;
  transition: opacity 1s ease-in-out; 
}
/* Fade out the section when it's not in view */
#hero-section:not(.visible), 
#about-section:not(.visible), 
#features-section:not(.visible), 
#reeling-section:not(.visible), 
#misc-section:not(.visible), 
#outro-section:not(.visible) {
  opacity: 0;
  transition: opacity 0s ease-in-out; /* Fade out over 0 seconds */
}





/* HERO */
#hero-section {
    display: flex; /* Align text and image side by side */
    justify-content: space-evenly; /* Distributes items with space between them. */
    align-items: center; /* Centers the items vertically */
    padding-top: 100px;
    padding-bottom: 150px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    transition: 
        flex-direction 0.5s ease,
        margin-top 0.5s ease;
}

.hero-text {
    text-align: center; /* Center the text horizontally */
    padding: 30px;
}

.hero-text h2 {
    margin-bottom: 50px; /* Space between title and list */
    font-size: 30px;
    font-weight: bold;
}

.hero-text ul {
    list-style-type: none; /* Removes default bullets */
    padding-left: 0; /* Removes padding for better alignment */
    font-size: 26px; /* Set font size for text */
    text-align: left; /* Align text to the left */
}

.hero-text li {
    background-image: url('./icons/diamond.svg');
    background-size: 20px 20px; /* Adjust the size of the bullet image */
    background-repeat: no-repeat; /* Prevents repeating the image */
    background-position: 0 5px; /* Adjust the position of the bullet relative to text */
    padding-left: 40px; /* Add space between the bullet and the text */
}

.hero-text li:not(:last-child) {
    margin-bottom: 20px;
}

.hero-text img {
    width: 200px; 
    height: auto; /* Maintain aspect ratio */
    box-shadow: none;
    margin-top: 50px;
    align-self: center;
    transition: margin-bottom 0.5s ease;
}

.hero-image img {
    width: 275px; 
    height: auto; /* auto - Maintain aspect ratio */
    border-radius: 15px 15px 15px 15px;
}
/*.hero-image iFrame {
    width: 275px; 
    height: 430px; /* Maintain aspect ratio 
    border-radius: 15px 15px 15px 15px;
}*/







/* ABOUT */
#about-section {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding-right: 100px;
    padding-left: 100px;
    padding-top: 100px;
    padding-bottom: 110px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

#about-section h3 {
    width: 260px; /* prevents from shrinking on mobile */
    margin-bottom: 80px;
    font-size: 35px;
    text-align: center;
}

#about-section p {
    width: 640px; 
    font-size: 26px;
    line-height: 1.5;
    text-align: center;
}







/* FEATURES */
#features-section {
    margin-top: -10px; /* moves the whole thing */
    display: flex; /* Align text and image side by side */
    justify-content: space-evenly; /* Distributes items with space between them. */
    align-items: center; /* Centers the items vertically */
    flex-direction: row;
    padding-top: 450px;
    padding-bottom: 460px; /* to push bottom farther (*radio buttons*) */
    padding-left: 100px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    transition: 
        flex-direction 0.5s ease, 
        padding-bottom 0.5s ease, 
        padding-top 0.5s ease, 
        padding-left 0.5s ease; /* Smoothly animate height and padding */
  }

.features-section h2 {
    position: absolute;
    margin-top: -570px; /* moves ONLY the big title */
    margin-left: -100px;
    font-size: 35px;
    font-weight: bold;
    z-index: 1;
}





/*images carousel*/
main#carousel-images {
    width: fit-content;
    height: fit-content;
    margin-top: 50px; /* moves the images carousel but also somehow increases top margin */
    perspective: 600px; /* makes side images bigger or smaller */
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    padding-left: 200px;
    padding-right: 200px;
    transition: 
        padding-left 0.5s ease, 
        z-index 0.5s ease,
        opacity 0.5s ease,
        transform 0.5s ease,
        padding-right 0.5s ease; /* Smoothly animate height and padding */
  }

/* for images */
.item img {
    width: 265px; 
    height: auto; /* Maintain aspect ratio */
    border-radius: 15px;
}
.item video {
    width: 225px; 
    height: auto; /* Maintain aspect ratio */
    border-radius: 15px;
}
div.item {
    width: fit-content; 
    height: fit-content;
    position: absolute;
    text-align: center;
    border-radius: 15px;

    --r: calc(var(--position) - var(--offset)); /* Calculate relative position */
    --abs: max(calc(var(--r) * -1), var(--r)); /* Get absolute position */
    transition: all 0.50s linear;
    transform: 
      translateX(calc(-230px * var(--r))) /*how far apart*/
      translateZ(calc(-100px * var(--abs))); /*how small*/
    z-index: calc(100 - var(--abs)); /* Adjust z-index for depth */
    opacity: calc(1 - (0.5 * var(--abs))); /* Adjust opacity based on position - setting the 1 to 1.1 makes 5 images visible*/
}

/* Specific offsets for each item */
div.item:nth-of-type(1) {
    --offset: 1; /* places at the 1st position  */
}
div.item:nth-of-type(2) {
    --offset: 2;
}
div.item:nth-of-type(3) {
    --offset: 3;
}
div.item:nth-of-type(4) {
    --offset: 4;
}
div.item:nth-of-type(5) {
    --offset: 5;
}

/* Radio button controls for carousel */
input:nth-of-type(1):checked ~ main#carousel-images {
    --position: 1; /* carousel goes to the 1st image  */
}
input:nth-of-type(1):checked ~ main#carousel-images  div.item:nth-of-type(5) {
    --offset: 0; /* places image 5 at position 0  */   
}
input:nth-of-type(1):checked ~ main#carousel-images  div.item:nth-of-type(4) {
    --offset: -1; /* places image 4 at position -1  */   
}


input:nth-of-type(2):checked ~ main#carousel-images {
    --position: 2;
}
input:nth-of-type(2):checked ~ main#carousel-images  div.item:nth-of-type(5) {
    --offset: -0;   
}


input:nth-of-type(3):checked ~ main#carousel-images {
    --position: 3;
}


input:nth-of-type(4):checked ~ main#carousel-images {
    --position: 4;
}
input:nth-of-type(4):checked ~ main#carousel-images div.item:nth-of-type(1) {
    --offset: 6;
}


input:nth-of-type(5):checked ~ main#carousel-images {
    --position: 5;
}
input:nth-of-type(5):checked ~ main#carousel-images div.item:nth-of-type(1) {
    --offset: 6;
}
input:nth-of-type(5):checked ~ main#carousel-images div.item:nth-of-type(2) {
    --offset: 7;
}





/* transparent gradient masks for image edges  */
input:nth-of-type(1):checked ~ main#carousel-images div.item:nth-of-type(4) {
    -webkit-mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(1):checked ~ main#carousel-images div.item:nth-of-type(5) {
    -webkit-mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(1):checked ~ main#carousel-images div.item:nth-of-type(2) {
    -webkit-mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(1):checked ~ main#carousel-images div.item:nth-of-type(3) {
    -webkit-mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}



input:nth-of-type(2):checked ~ main#carousel-images div.item:nth-of-type(5) {
    -webkit-mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(2):checked ~ main#carousel-images div.item:nth-of-type(1) {
    -webkit-mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(2):checked ~ main#carousel-images div.item:nth-of-type(3) {
    -webkit-mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(2):checked ~ main#carousel-images div.item:nth-of-type(4) {
    -webkit-mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}



input:nth-of-type(3):checked ~ main#carousel-images div.item:nth-of-type(1) {
    -webkit-mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(3):checked ~ main#carousel-images div.item:nth-of-type(2) {
    -webkit-mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(3):checked ~ main#carousel-images div.item:nth-of-type(4) {
    -webkit-mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(3):checked ~ main#carousel-images div.item:nth-of-type(5) {
    -webkit-mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}



input:nth-of-type(4):checked ~ main#carousel-images div.item:nth-of-type(2) {
    -webkit-mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(4):checked ~ main#carousel-images div.item:nth-of-type(3) {
    -webkit-mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(4):checked ~ main#carousel-images div.item:nth-of-type(5) {
    -webkit-mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(4):checked ~ main#carousel-images div.item:nth-of-type(1) {
    -webkit-mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}



input:nth-of-type(5):checked ~ main#carousel-images div.item:nth-of-type(3) {
    -webkit-mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(5):checked ~ main#carousel-images div.item:nth-of-type(4) {
    -webkit-mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to left, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(5):checked ~ main#carousel-images div.item:nth-of-type(1) {
    -webkit-mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}
input:nth-of-type(5):checked ~ main#carousel-images div.item:nth-of-type(2) {
    -webkit-mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(0, 0, 0, 1) var(--fade-end));
    mask-image: linear-gradient(
      to right, 
      rgba(0, 0, 0, 0) var(--fade-start), 
      rgba(1, 1, 1, 1) var(--fade-end));
}



/* texts carousel */
main#carousel-texts {
    width: fit-content;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    padding-left: 200px;
    padding-right: 200px;
    margin-left: 100px;
    /*transition: 
        margin-left 0.5s ease, 
        padding-left 0.5s ease, 
        padding-right 0.5s ease, 
        padding-top 0.5s ease;*/
}

/* for texts */
.item2 h3 {
    margin-bottom: 20px; /* Space between title and paragraph */
    font-size: 28px;
    font-weight: bold;
    transition: padding-top 0.5s ease; /* not necessary? */
}

.item2 p {
    font-size: 26px; /* Set font size for text */
    text-align: center;
    line-height: 1.5;
    transition: height 0.5s ease; /* not necessary? */
}
div.item2 {
    width: 300px; 
    height: fit-content;
    text-align: center;
    display: flex; /* Flexbox to help with vertical centering of content */
    flex-direction: column; /* Stack title and list vertically */
    justify-content: center; /* Center vertically */
    position: absolute;

    --r: calc(var(--position) - var(--offset)); /* Calculate relative position */
    --abs: max(calc(var(--r) * -1), var(--r)); /* Get absolute position */
    transition: all 0.50s linear; /* not necessary? */
    transform: 
      translateX(calc(-50px * var(--r))) /*how far apart*/
      translateZ(calc(-100px * var(--abs))); /*how small*/
    z-index: calc(100 - var(--abs)); /* Adjust z-index for depth */
    opacity: calc(1 - (var(--abs))); /* Adjust opacity based on position - setting the 1 to 1.1 makes 5 images visible*/
}

/* Specific offsets for each item */
div.item2:nth-of-type(1) {
    --offset: 1; /* places at the 1st position  */
}
div.item2:nth-of-type(2) {
    --offset: 2;
}
div.item2:nth-of-type(3) {
    --offset: 3;
}
div.item2:nth-of-type(4) {
    --offset: 4;
}
div.item2:nth-of-type(5) {
    --offset: 5;
}

/* Radio button controls for carousel */
input:nth-of-type(1):checked ~ main#carousel-texts {
    --position: 1; /* carousel goes to the 1st image  */
}
input:nth-of-type(1):checked ~ main#carousel-texts  div.item2:nth-of-type(5) {
    --offset: 0; /* places image 5 at position 0  */   
}
input:nth-of-type(1):checked ~ main#carousel-texts  div.item2:nth-of-type(4) {
    --offset: -1; /* places image 4 at position -1  */   
}


input:nth-of-type(2):checked ~ main#carousel-texts {
    --position: 2;
}
input:nth-of-type(2):checked ~ main#carousel-texts  div.item2:nth-of-type(5) {
    --offset: -0;   
}


input:nth-of-type(3):checked ~ main#carousel-texts {
    --position: 3;
}


input:nth-of-type(4):checked ~ main#carousel-texts {
    --position: 4;
}
input:nth-of-type(4):checked ~ main#carousel-texts div.item2:nth-of-type(1) {
    --offset: 6;
}


input:nth-of-type(5):checked ~ main#carousel-texts {
    --position: 5;
}
input:nth-of-type(5):checked ~ main#carousel-texts div.item2:nth-of-type(1) {
    --offset: 6;
}
input:nth-of-type(5):checked ~ main#carousel-texts div.item2:nth-of-type(2) {
    --offset: 7;
}



/* for radiobuttons */
input {
    appearance: none; /* Remove default browser styles */
    width: 17px;
    height: 16px;
    background-color: #4D0013; /* Default button color */
    border: 2px solid #333; /* Button border */
    border-radius: 50%; /* Make buttons circular */
    cursor: pointer;
    position: absolute;
    margin-top: 650px; /* moves only radio buttons but doesnt push bottom farther */
    z-index: 3;
    /*transition: 
        transform 0.5s ease,
        width 0.5s ease,
        height 0.5s ease,
        background 0.5s ease,
        background-color 0.5s ease,
        border-style 0.5s ease,
        outline 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease,

        margin-top 0.5s ease; */

    background: #FAFAFA80;
    border-color: var(--darker-plum);
    border-width: 3px;
}
input:hover {
    transform: scale(1.2);
}
input:checked {
    width: 19px;
    height: 18px;
    background: radial-gradient(circle, rgba(220,163,135,1) 0%, rgba(69,10,29,1) 100%);
    border-color: var(--darker-plum);
    border-style: solid;
}
input:focus {
    outline: none; /* Prevent the default outline */
    border-color: var(--text-color); /* Orange border for focus */
    box-shadow: 0 0 2px 1px rgba(255, 87, 34, 0.5); /* Glow effect */
}

/* places the radiobuttons on their place */
input:nth-of-type(1) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin-right: 100px;
    /*margin-right: 560px;*/
}
input:nth-of-type(2) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    margin-right: 50px;
    /*margin-right: 610px;*/
}
input:nth-of-type(3) {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
    /*margin-right: 660px;*/
}
input:nth-of-type(4) {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
    margin-left: 50px;
    /*margin-right: 710px;*/
}
input:nth-of-type(5) {
    grid-column: 6 / 7;
    grid-row: 2 / 3;
    margin-left: 100px;
    /*margin-right: 760px;*/
}







/* REELING */
#reeling-section {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding-right: 100px;
    padding-left: 100px;
    padding-top: 100px;
    padding-bottom: 110px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

#reeling-section h3 {
    width: 300px; /* prevents from shrinking on mobile */
    margin-bottom: 80px;
    font-size: 35px;
    text-align: center;
}

/*.reeling-grid {
    display: grid; 
    grid-template-rows: repeat(1);
    gap: 10px;
}

.reel {
    width: 100%; 
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    background-color: transparent;
    border: 2px solid var(--dark-plum);
    display: flex; 
    justify-content: start; 
    text-align: justify; 
    font-size: 26px; 
    box-sizing: border-box; 
    background-color: rgba(255, 255, 255, 0.02);
    transition: 
        background-color 0.5s ease, 
        transform 0.5s ease, 
        z-index 0.5s ease,

        font-size 0.5s ease; 
    z-index: 3;
}*/

.reeling-section ul {
    width: 640px;
    list-style-type: none; /* Removes default bullets */
    padding-left: 0; /* Removes padding for better alignment */
    font-size: 26px; /* Set font size for text */
    text-align: left; /* Align text to the left */
}

.reeling-section li {
    background-image: url('./icons/diamond.svg');
    background-size: 15px 15px; /* Adjust the size of the bullet image */
    background-repeat: no-repeat; /* Prevents repeating the image */
    background-position: 0 7px; /* Adjust the position of the bullet relative to text */
    padding-left: 40px; /* Add space between the bullet and the text */
}

.reeling-section li:not(:last-child) {
    margin-bottom: 80px;
}






/* MISC */
#misc-section {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding-right: 100px;
    padding-left: 100px;
    padding-top: 100px;
    padding-bottom: 200px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

#misc-section h3 {
    width: 170px; /* prevents from shrinking on mobile */
    margin-bottom: 100px;
    font-size: 35px;
    text-align: center;
}

.links-grid {
    display: grid; /* Set up a grid container */
    grid-template-columns: repeat(3, 1fr); /* Create 3 equal columns */
    justify-items: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    transition: grid-template-columns 0.5s ease; 
}

/* Misc Section Items */
.link {
    width: 100%; /* Make it scale with the container */
    height: 100%;
    aspect-ratio: 1 / 1; /* Maintain a perfect square shape */
    border: 2px solid var(--dark-plum); /* Add black borders */
    background-color: transparent; /* Transparent background */
    display: flex; /* Use flexbox for centering content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    text-align: center; /* Center text inside the box */
    font-size: 26px; /* Adjust font size as needed */
    box-sizing: border-box; /* Ensure padding/border don't affect size */
    background-color: rgba(255, 255, 255, 0.02);
    transition: 
        background-color 0.5s ease, 
        transform 0.5s ease, 
        z-index 0.5s ease,

        font-size 0.5s ease; 
    z-index: 3;
}
.link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1); /* Enlarge the paragraph */
    z-index: 5;
}
.link a {
    padding: 50px;
    width: 105px;
    height: fit-content;
    transition: 
        transform 0.5s ease, 

        font-size 0.5s ease, 
        padding 0.5s ease;
    z-index: 10;
}
.link:hover a {
    transform: scale(1.2); /* Enlarge the paragraph */
}






/* OUTRO */
#outro-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 100px;
    gap: 10px;
    clip-path: inset(0 0 0 0); /* forgot why */
}
#outro-section h4, h5 {
    width: auto;
    font-weight: normal;
    text-align: center;
    font-family: 'Ruthie';
}
#outro-section h4 {
    font-size: 85px;
    transition: 
        font-size 0.5s ease;
}
#outro-section h5{
    font-size: 30px;
    transform: scale(1.3, 1);
}

#outro-section iFrame {
    margin-top: -50px;
    width: 500px; 
    height: 300px;
    border-radius: 15px 15px 15px 15px;
    transition: 
        margin-top 0.5s ease,
        width 0.5s ease, 
        height 0.5s ease;
}









/* SCREEN SIZE VARIANTS */
/* when the carousel shrinks */
@media (max-width: 1390px) {

    #features-section {
        margin-top: 90px;
        flex-direction: column;
/*        padding-bottom: calc(450px - (10vw));*/ /* for self-expanding paragraphs */
        padding-bottom: 400px;
        padding-top: 350px;
        padding-left: 0px;
    }

    .features-section h2 {
        margin-top: -1070px;
        margin-left: 0px;
    }

    main#carousel-images {
    margin-top: 50px;
        padding-left: 0px;
        padding-right: 0px;
    }

    main#carousel-texts {
        margin-left: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 500px;
    }

    .item2 h3 {
        padding-top: 100px;
    }

    .item2 p {
        height: 300px; /* makes the distance between inputs and text box be the same in spite of paragraph length */
    }

    input {
        margin-top: 150px;
    }
}



@media (max-width: 912px) {
    #hero-section {
        flex-direction: column;
        margin-top: -50px;
    }

    .hero-text img {
        margin-bottom: 50px;
    }
}



/* 768 */
/* where both sides are gone */
@media (max-width: 865px) {

    #hero-section {
        margin-top: 0px;
    }
}



/* when the ToC shrinks (but not here) */
@media (max-width: 685px) {

    #about-section p {
        width: 440px; 
    }

    .reeling-section ul {
        width: 440px;
    }

    .links-grid {
        grid-template-columns: repeat(1, 3fr); /* Create 3 equal columns */
    }

    #outro-section h4 {
        font-size: 60px;
    }

    #outro-section iFrame {
        margin-top: -30px;
        width: 250px; 
        height: 150px;
    }
}



/* for mobile */
/* 360px for my android */
/*@media (pointer: coarse)*/
@media (max-width: 450px) 
{

    #hero-section {
        padding-top: 20px;
        padding-bottom: 150px;
    }

    .hero-text h2 {
        font-size: 25px;
    }

    .hero-text ul {
        font-size: 21px; /* Set font size for text */
    }

    .hero-image img {
        width: 220px; 
        height: 344px;
        border-radius: 15px 15px 15px 15px;
    }

    #about-section p {
        width: 280px; 
    }

    #features-section {
        padding-top: 350px;
        padding-bottom: 350px;
      }

      main#carousel-images {
        padding-left: 0px;
        padding-right: 0px;
      }

    .item img {
        width: 210px; 
    }
    .item video {
        width: 210px; 
    }
    div.item {
        transform: 
          translateX(calc(-90px * var(--r))) /*how far apart*/
          translateZ(calc(-100px * var(--abs))); /*how small*/
    }

    .reeling-section ul {
        width: 280px;
    }

    #outro-section h5{
        font-weight: 100;
        font-size: 25px;
        transform: scale(1.3, 1);
    }

}