html, body{
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
    background-color: white;
    font-size: 16px;
}
@font-face {
    font-family: "human";
    src: url('fonts/human.ttf');
}
@font-face {
    font-family: "techmono";
    src: url('fonts/ShareTechMono-Regular.ttf');
}
header{
    padding-top: 1rem;
    text-align: center;
    z-index: 5;
    background-color: transparent; 
    position: relative; 
}
header div a{
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 7vw;
    font-family: "human";
}
nav {
    margin-top: 2vh;
    z-index: 3;
    position: relative;
}
nav a {
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 5vw;
    font-family: "human";
    padding: 0.5rem .7rem;
}
.background {
    background-color: #FFACC8;
    width: 100vw;
    position: relative;
    margin-top: -8rem;
    top: 0;
    z-index: 1;
}
.head_image img{
    width: 100vw;
    position: relative;
    margin: 8rem auto 0 auto;
    animation: spin 3s linear 3;
    top: 0;
    z-index: 1;
}
.head_image {
    background-color: #FFACC8;
    text-align: center;
    height: 50rem;
}

/* Define keyframes for the spin animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.blocks{
    position: relative;
    left: -3vw;
    height: 22rem;
    z-index: 3;
}
/* Assigning different colors to each square */
.square.green {
    background-color: #5CA46E;
    width: 80px;
    height: 80px;
    aspect-ratio: 1/1;
    position: absolute;
    top: 4rem;
    left: 15%;
    animation: float 5s ease-in-out infinite alternate;
    z-index: 6;
}
.square.green p {
    font-size: 1rem;
    color: white;
    font-family: "techmono";
    padding: 5% 5%;
    margin-top: 0rem;
}
.square.green a {
    text-decoration: none;
}
.square.picture img {
    width: 50%;
    height: width;
    position: absolute;
    left: 25%;
    top: 3rem; /* Adjust this value to move the image up */
    z-index: 5;  /* This should be between the z-index of the green (5) and blue (4) squares */
}
.square.pink {
    background-color: #E8A2BD;
    width: 130px;
    height: 130px;
    aspect-ratio: 1/1;
    position: absolute;
    left: 50%;
    top: 14rem;
    animation: float 5s ease-in-out infinite alternate;
    z-index: 6;
}
.square.pink p {
    font-size: 1.7rem;
    color: white;
    font-family: "techmono";
    padding: 2vw 2vw;
    margin-top: 0rem;
}
.square.pink a{
    text-decoration: none;
    z-index: 7;
}
.square.blue {
    background-color: #5B7FAF;
    width: 93px;
    height: 93px;
    aspect-ratio: 1/1;
    position: absolute;
    left: 65%;
    top:-0.3rem;
    animation: float 5s ease-in-out infinite alternate;
    z-index: 4;
}
.square.blue2{
    background-color: #5B7FAF;
    width: 20px;
    height: 20px;
    aspect-ratio: 1/1;
    position: absolute;
    left: 35%;
    top: 20.5rem;
    animation: float 5s ease-in-out infinite alternate;
    z-index: 4;
}
.square.yellow {
    background-color: #EDBD30;
    width: 30px;
    height: 30px;
    aspect-ratio: 1/1;
    position: absolute;
    left: 85%;
    top: 10rem;
    animation: float 5s ease-in-out infinite alternate;
    z-index: 4;
}
.square.yellow2 {
    background-color: #EDBD30;
    width: 45px;
    height: 45px;
    aspect-ratio: 1/1;
    position: absolute;
    left: 20%;
    top: 17rem;
    animation: float 5s ease-in-out infinite alternate;
    z-index: 4;
}

.square.orange {
    background-color: #DF662C;
    width: 68px;
    height: 68px;
    aspect-ratio: 1/1;
    position: absolute;
    left: 62%;
    top: 20.5rem;
    animation: float 5s ease-in-out infinite alternate;
    z-index: 7;
}

/* Animation for floating effect */
@keyframes float {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-2rem);
    }
}
.rip {
    width: 100vw; /* Match the viewport width */
    position: relative; /* Set position relative to control children elements */
    z-index: 8; /* Ensure the rips are above other elements if necessary */
    overflow-y: hidden;
    height: 26.8rem;
}

.rip img {
    width: 100vw; /* Ensure the images take up the full width of the viewport */
    display: block; /* Remove inline margin or gaps */
}

.greenrip {
    position: relative;
    z-index: 9; /* Place above YouTube rip */
}

.greenrip img {
    width: 100vw;
}

.greenrip a {
    text-decoration: none;
    font-family: "human";
    color: white;
    position: absolute;
    font-size: 1.5rem;
    top: 10.5rem;
    left: 25%;
    text-align: center;
    z-index: 11; /* Ensure link is clickable above other elements */
    white-space: nowrap; /* Prevents the text from breaking onto multiple lines */
}
.tourtitle {
    position: absolute; /* Allows precise placement over the greenrip image */
    top: 3.5rem; /* Adjust this value to fine-tune positioning */
    left: 0; /* Adjust this value to fine-tune positioning */
    z-index: 10; /* Ensure it appears above the greenrip image but below links */
    width: 100vw; /* Match the width of the container to align perfectly */
}
.youtuberip {
    position: relative;
    z-index: 10;
    width: fit-content; /* Shrinks the div to fit its content (i.e., the image) */
    height: fit-content; /* Shrinks the height to fit the image */
    margin: 0 auto; /* Center the div if needed */
    top: -3.4rem; /* Adjust overlap with the greenrip section */
}

.youtuberip img {
    width: 100vw; /* Ensure the image takes up the full width of the viewport if required */
    height: auto; /* Maintain the aspect ratio */
    display: block; /* Remove any inline margin or gaps */
}

.youtuberip p {
    text-align: right;
    position: absolute;
    top: 2.5rem; /* Adjust this value for the correct placement over the image */
    right: 55%;
    font-family: "techmono";
    font-size: 2.25rem;
    color: white;
}

.youtuberip a {
    text-decoration: none;
}

    #youtube {
        clip-path: polygon(21% 18%, 43% 8%, 64% 7%, 80% 8%, 91% 4%, 100% 8%, 100% 100%, 0 100%, 0 10%);
    }
footer {
    background-color: #5B7FAF;
    color: white;
    text-align: center;
    padding: 1.5rem .5rem;
    left: -0.5rem;
    position: relative;
    width: 100%;
    z-index: 3; /* Keep it above color blocks */
    font-family: "techmono";
}

footer p {
    margin: 0;
    font-size: .7rem;
}
.social-links{
    padding-bottom: 1rem;
}
.social-links a {
    color: white;
    font-family: "techmono";
    text-decoration: none;
    font-size: 1.2rem;
    padding: 0 0.5rem;
    transition: color 0.3s ease; /* Adds a transition effect to link hover */
}

.social-links a:hover {
    color: black; /* Change color on hover to indicate links are clickable */
}
@media (min-width: 375px) {
    .head_image {
    background-color: #FFACC8;
    text-align: center;
    height: 35rem;
}
}
@media (min-width: 768px) {
    header div a{
        font-size: 8vw;
    }
    header div{
        padding-top: 1.8rem;
    }
    nav {
        margin-top: 2vh;
        z-index: 3;
        position: relative;
    }
    nav a {
        color: white;
        text-align: center;
        text-decoration: none;
        font-size: 6vw;
        font-family: "human";
        padding: 1.5rem .7rem;
    }
    .background {
        margin-top: -9rem;
    }
    .head_image img{
        width: 80vw;
        position: relative;
        margin-top: 8rem;
        top: 0;
        z-index: 1;
    }
    /* Add animation */
    .spin-animation {
        margin-top: 6rem;
        width: 80%;
        animation: spin 3s linear 3; /* Spins the head continuously, you can adjust the duration */
    }

    /* Define keyframes for the spin animation */
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .blocks{
        position: relative;
        left: -6vw;
        height: 37rem;
        z-index: 3;
    }
    /* Assigning different colors to each square */
    .square.green {
        background-color: #5CA46E;
        width: 150px;
        height: 150px;
        aspect-ratio: 1/1;
        position: absolute;
        top: 4rem;
        left: 20%;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 6;
    }
    .square.green p {
        font-size: 1.8rem;
        color: white;
        font-family: "techmono";
        padding: 7% 7%;
        margin-top: 0rem;
    }
    .square.green a {
        text-decoration: none;
    }
    .square.picture img {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 28%;
        top: 3rem; /* Adjust this value to move the image up */
        z-index: 5;  /* This should be between the z-index of the green (5) and blue (4) squares */
    }
    .square.pink {
        background-color: #E8A2BD;
        width: 220px;
        height: 220px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 58%;
        top: 25rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 6;
    }
    .square.pink p {
        font-size: 2.7rem;
        color: white;
        font-family: "techmono";
        padding: 2vw 2vw;
        margin-top: 0rem;
    }
    .square.pink a{
        text-decoration: none;
        z-index: 7;
    }
    .square.blue {
        background-color: #5B7FAF;
        width: 160px;
        height: 160px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 75%;
        top:-1rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.blue2{
        background-color: #5B7FAF;
        width: 30px;
        height: 30px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 37%;
        top: 37rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.yellow {
        background-color: #EDBD30;
        width: 65px;
        height: 65px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 85%;
        top: 17rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.yellow2 {
        background-color: #EDBD30;
        width: 80px;
        height: 80px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 24%;
        top: 31rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }

    .square.orange {
        background-color: #DF662C;
        width: 108px;
        height: 108px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 69%;
        top: 36rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 7;
    }

    /* Animation for floating effect */
    @keyframes float {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-2.5rem);
        }
    }
    .rip {
        width: 100vw; /* Match the viewport width */
        position: relative; /* Set position relative to control children elements */
        z-index: 8; /* Ensure the rips are above other elements if necessary */
        overflow-y: hidden;
        height: 55rem;
    }

    .rip img {
        width: 100vw; /* Ensure the images take up the full width of the viewport */
        display: block; /* Remove inline margin or gaps */
    }

    .greenrip {
        position: relative;
        z-index: 9; /* Place above YouTube rip */
    }

    .greenrip img {
        width: 100vw;
    }

    .greenrip a {
        text-decoration: none;
        font-family: "human";
        color: white;
        position: absolute;
        font-size: 2rem;
        top: 23rem;
        left: 25%;
        text-align: center;
        z-index: 11; /* Ensure link is clickable above other elements */
        white-space: nowrap; /* Prevents the text from breaking onto multiple lines */
    }
    .tourtitle {
        position: absolute; /* Allows precise placement over the greenrip image */
        top: 7.5rem; /* Adjust this value to fine-tune positioning */
        left: 0; /* Adjust this value to fine-tune positioning */
        z-index: 10; /* Ensure it appears above the greenrip image but below links */
        width: 100vw; /* Match the width of the container to align perfectly */
    }
    .youtuberip {
        position: relative;
        z-index: 10;
        width: fit-content; /* Shrinks the div to fit its content (i.e., the image) */
        height: fit-content; /* Shrinks the height to fit the image */
        margin: 0 auto; /* Center the div if needed */
        top: -7rem; /* Adjust overlap with the greenrip section */
    }

    .youtuberip img {
        width: 100vw; /* Ensure the image takes up the full width of the viewport if required */
        height: auto; /* Maintain the aspect ratio */
        display: block; /* Remove any inline margin or gaps */
    }

    .youtuberip p {
        text-align: right;
        position: absolute;
        top: 5.5rem; /* Adjust this value for the correct placement over the image */
        right: 55%;
        font-family: "techmono";
        font-size: 4.5rem;
        color: white;
    }
}
@media (min-width: 800px) {
        .background {
        margin-top: -14rem;
        height: 130px;
    }
    .head_image {
    background-color: #FFACC8;
    text-align: center;
    height: 45rem;
    }
    .head_image img{
        width: 60%;
    }
}    

@media (min-width: 1024px) {
    html, body {
        width: 100%;
        margin: 0;
        overflow-x: hidden;
    }
    header {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
        z-index: 3;
    }
    header div a {
        position: relative;
        text-align: left; /* Align 'Tyler, The Creator' to the left */
        font-size: 3vw; /* Adjust font size for larger screens */
        left: 4.5vw;
        top: -2.2vw;
        transition: transform 0.3s ease; /* Adds smooth transition effect for growing/shrinking */
    }

    header div a:hover {
        transform: scale(1.2); /* Increase size by 20% on hover */
    }

    nav {
        flex: 1;
        justify-content: flex-end; /* Align nav links to the right */
    }

    nav a {
        font-size: 2vw; /* Adjust font size for nav links */
        float: right;
        position: relative;
        top: -5.5rem;
        right: 2.5vw;
        transition: transform 0.3s ease;
    }
    nav a:hover {
        transform: scale(1.2); /* Makes the link grow by 20% when hovered */
    }
    .background {
        margin-top: -13rem;
        height: 30px;
    }
    .head_image img{
        width: 55%;
        margin: 8rem auto 0 auto;
        animation: spin 3s linear 3;
        top: 4rem;
        left: 8rem;
        z-index: 5;
    }
    .head_image {
        background-color: #FFACC8;
        text-align: center;
        height: 50rem;
    }
    /* Add animation */
    .spin-animation {
        margin-top: 6rem;
        width: 80%;
        animation: spin 3s linear 3; /* Spins the head continuously, you can adjust the duration */
    }

    /* Define keyframes for the spin animation */
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .blocks{
        position: relative;
        left: -6vw;
        height: 37rem;
        z-index: 3;
    }
    /* Assigning different colors to each square */
    .square.green {
        background-color: #5CA46E;
        width: 150px;
        height: 150px;
        aspect-ratio: 1/1;
        position: absolute;
        top: 9rem;
        left: 20%;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 6;
    }
    .square.green2{
        background-color: #5CA46E;
        width: 60px;
        height: 60px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 89%;
        top: -10rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.green3{
        background-color: #5CA46E;
        width: 30px;
        height: 30px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 33%;
        top: -19rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.green p {
        font-size: 1.8rem;
        color: white;
        font-family: "techmono";
        padding: 7% 7%;
        margin-top: 0rem;
    }
    .square.green a {
        text-decoration: none;
    }
    .square.picture img {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 28%;
        top: 3rem; /* Adjust this value to move the image up */
        z-index: 5;  /* This should be between the z-index of the green (5) and blue (4) squares */
    }
    .square.pink {
        background-color: #E8A2BD;
        width: 220px;
        height: 220px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 58%;
        top: 25rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 6;
    }
    .square.pink p {
        font-size: 2.7rem;
        color: white;
        font-family: "techmono";
        padding: 2vw 2vw;
        margin-top: 0rem;
    }
    .square.pink a{
        text-decoration: none;
        z-index: 7;
    }
    .square.blue {
        background-color: #5B7FAF;
        width: 160px;
        height: 160px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 75%;
        top:-1rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.blue2{
        background-color: #5B7FAF;
        width: 30px;
        height: 30px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 37%;
        top: 37rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.blue3{
        background-color: #5B7FAF;
        width: 50px;
        height: 50px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 22%;
        top: -13rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.yellow {
        background-color: #EDBD30;
        width: 65px;
        height: 65px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 85%;
        top: 17rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.yellow2 {
        background-color: #EDBD30;
        width: 80px;
        height: 80px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 24%;
        top: 31rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }

    .square.orange {
        background-color: #DF662C;
        width: 108px;
        height: 108px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 73%;
        top: 36rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 7;
    }
    .square.orange2 {
        background-color: #DF662C;
        width: 35px;
        height: 35px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 80%;
        top: -15rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 7;
    }
    .square.orange3 {
        background-color: #DF662C;
        width: 80px;
        height: 80px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 30%;
        top: -5rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 7;
    }

    /* Animation for floating effect */
    @keyframes float {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-2.5rem);
        }
    }
    .rip {
        width: 100vw; /* Match the viewport width */
        position: relative; /* Set position relative to control children elements */
        z-index: 8; /* Ensure the rips are above other elements if necessary */
        overflow-y: hidden;
        height: 73rem;
    }

    .rip img {
        width: 100vw; /* Ensure the images take up the full width of the viewport */
        display: block; /* Remove inline margin or gaps */
    }

    .greenrip {
        position: relative;
        z-index: 9; /* Place above YouTube rip */
    }

    .greenrip img {
        width: 100vw;
    }

    .greenrip a {
        text-decoration: none;
        font-family: "human";
        color: white;
        position: absolute;
        font-size: 3rem;
        top: 29rem;
        text-align: center;
        z-index: 11; /* Ensure link is clickable above other elements */
        white-space: nowrap; /* Prevents the text from breaking onto multiple lines */
    }
    .greenrip a:hover{
        transform: scale(1.2);
    }
    .tourtitle {
        position: absolute; /* Allows precise placement over the greenrip image */
        top: 9rem; /* Adjust this value to fine-tune positioning */
        left: 0; /* Adjust this value to fine-tune positioning */
        z-index: 10; /* Ensure it appears above the greenrip image but below links */
        width: 100vw; /* Match the width of the container to align perfectly */
    }
    .youtuberip {
        position: relative;
        z-index: 10;
        width: fit-content; /* Shrinks the div to fit its content (i.e., the image) */
        height: fit-content; /* Shrinks the height to fit the image */
        margin: 0 auto; /* Center the div if needed */
        top: -12rem; /* Adjust overlap with the greenrip section */
        transition: transform 0.3s ease, z-index 0.3s ease;
    }
    .youtuberip:hover{
        transform: translateY(-0.9rem);

    }
    .youtuberip img {
        width: 100vw; /* Ensure the image takes up the full width of the viewport if required */
        height: auto; /* Maintain the aspect ratio */
        display: block; /* Remove any inline margin or gaps */
    }

    .youtuberip p {
        text-align: right;
        position: absolute;
        top: 8.5rem; /* Adjust this value for the correct placement over the image */
        right: 55%;
        font-family: "techmono";
        font-size: 6rem;
        color: white;
    }

    .youtuberip a {
        text-decoration: none;
    }

@media (min-width: 1220px) {
    html, body {
        width: 100%;
        margin: 0;
        overflow-x: hidden;
    }
    header {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
        z-index: 3;
    }
    header div a {
        position: relative;
        text-align: left; /* Align 'Tyler, The Creator' to the left */
        font-size: 3vw; /* Adjust font size for larger screens */
        left: 4.5vw;
        top: -1.5vw;
        transition: transform 0.3s ease; /* Adds smooth transition effect for growing/shrinking */
    }

    header div a:hover {
        transform: scale(1.2); /* Increase size by 20% on hover */
    }

    nav {
        flex: 1;
        justify-content: flex-end; /* Align nav links to the right */
    }

    nav a {
        font-size: 2vw; /* Adjust font size for nav links */
        float: right;
        position: relative;
        top: -5.8rem;
        right: 2.5vw;
        transition: transform 0.3s ease;
    }
    nav a:hover {
        transform: scale(1.2); /* Makes the link grow by 20% when hovered */
    }
    .background {
        margin-top: -13rem;
    }
    .head_image img{
        width: 50vw;
        margin: 8rem auto 0 auto;
        animation: spin 3s linear 3;
        top: 1rem;
    }
    .head_image {
        background-color: #FFACC8;
        text-align: center;
        height: 60rem;
    }
    /* Add animation */
    .spin-animation {
        margin-top: 6rem;
        width: 80%;
        animation: spin 3s linear 3; /* Spins the head continuously, you can adjust the duration */
    }

    /* Define keyframes for the spin animation */
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .blocks{
        position: relative;
        left: -6vw;
        height: 37rem;
        z-index: 3;
    }
    /* Assigning different colors to each square */
    .square.green {
        background-color: #5CA46E;
        width: 150px;
        height: 150px;
        aspect-ratio: 1/1;
        position: absolute;
        top: 9rem;
        left: 20%;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 6;
    }
    .square.green2{
        background-color: #5CA46E;
        width: 120px;
        height: 120px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 89%;
        top: -10rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.green3{
        background-color: #5CA46E;
        width: 60px;
        height: 60px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 33%;
        top: -19rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.green p {
        font-size: 1.8rem;
        color: white;
        font-family: "techmono";
        padding: 7% 7%;
        margin-top: 0rem;
    }
    .square.green a {
        text-decoration: none;
    }
    .square.picture img {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 28%;
        top: 3rem; /* Adjust this value to move the image up */
        z-index: 5;  /* This should be between the z-index of the green (5) and blue (4) squares */
    }
    .square.pink {
        background-color: #E8A2BD;
        width: 220px;
        height: 220px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 58%;
        top: 25rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 6;
    }
    .square.pink p {
        font-size: 2.7rem;
        color: white;
        font-family: "techmono";
        padding: 2vw 2vw;
        margin-top: 0rem;
    }
    .square.pink a{
        text-decoration: none;
        z-index: 7;
    }
    .square.blue {
        background-color: #5B7FAF;
        width: 160px;
        height: 160px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 75%;
        top:-1rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.blue2{
        background-color: #5B7FAF;
        width: 30px;
        height: 30px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 37%;
        top: 37rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.yellow {
        background-color: #EDBD30;
        width: 65px;
        height: 65px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 85%;
        top: 17rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.yellow2 {
        background-color: #EDBD30;
        width: 80px;
        height: 80px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 24%;
        top: 31rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }

    .square.orange {
        background-color: #DF662C;
        width: 108px;
        height: 108px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 73%;
        top: 36rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 7;
    }

    /* Animation for floating effect */
    @keyframes float {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-2.5rem);
        }
    }
    .rip {
        width: 100vw; /* Match the viewport width */
        position: relative; /* Set position relative to control children elements */
        z-index: 8; /* Ensure the rips are above other elements if necessary */
        overflow-y: hidden;
        height: 85rem;
    }

    .rip img {
        width: 100vw; /* Ensure the images take up the full width of the viewport */
        display: block; /* Remove inline margin or gaps */
    }

    .greenrip {
        position: relative;
        z-index: 9; /* Place above YouTube rip */
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .greenrip img {
        width: 100vw;
    }

    .greenrip a {
        text-decoration: none;
        font-family: "human";
        color: white;
        position: absolute;
        font-size: 3rem;
        top: 33rem;
        text-align: center;
        margin: 0 auto;
        z-index: 11; /* Ensure link is clickable above other elements */
        white-space: nowrap; /* Prevents the text from breaking onto multiple lines */
    }
    .greenrip a:hover{
        transform: scale(1.2);
    }
    .tourtitle {
        position: absolute; /* Allows precise placement over the greenrip image */
        top: 9rem; /* Adjust this value to fine-tune positioning */
        left: 0; /* Adjust this value to fine-tune positioning */
        z-index: 10; /* Ensure it appears above the greenrip image but below links */
        width: 100vw; /* Match the width of the container to align perfectly */
    }
    .youtuberip {
        position: relative;
        z-index: 10;
        width: fit-content; /* Shrinks the div to fit its content (i.e., the image) */
        height: fit-content; /* Shrinks the height to fit the image */
        margin: 0 auto; /* Center the div if needed */
        top: -12rem; /* Adjust overlap with the greenrip section */
        transition: transform 0.3s ease, z-index 0.3s ease;
    }
    .youtuberip:hover{
        transform: translateY(-0.9rem);

    }
    .youtuberip img {
        width: 100vw; /* Ensure the image takes up the full width of the viewport if required */
        height: auto; /* Maintain the aspect ratio */
        display: block; /* Remove any inline margin or gaps */
    }

    .youtuberip p {
        text-align: right;
        position: absolute;
        top: 8.5rem; /* Adjust this value for the correct placement over the image */
        right: 55%;
        font-family: "techmono";
        font-size: 6rem;
        color: white;
    }

    .youtuberip a {
        text-decoration: none;
    }
}

@media (min-width: 1440px) {
    html, body {
        width: 100%;
        margin: 0;
        overflow-x: hidden;
    }
    header {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
        z-index: 3;
    }
    header div a {
        position: relative;
        text-align: left; /* Align 'Tyler, The Creator' to the left */
        font-size: 3vw; /* Adjust font size for larger screens */
        left: 4.5vw;
        top: -1.5vw;
        transition: transform 0.3s ease; /* Adds smooth transition effect for growing/shrinking */
    }

    header div a:hover {
        transform: scale(1.2); /* Increase size by 20% on hover */
    }

    nav {
        flex: 1;
        justify-content: flex-end; /* Align nav links to the right */
    }

    nav a {
        font-size: 2vw; /* Adjust font size for nav links */
        float: right;
        position: relative;
        top: -6.2rem;
        right: 2.5vw;
        transition: transform 0.3s ease;
    }
    nav a:hover {
        transform: scale(1.2); /* Makes the link grow by 20% when hovered */
    }
    .background {
        margin-top: -20rem;
        height: 140px;
    }
    .head_image {
    background-color: #FFACC8;
    text-align: center;
    height: 50rem;
    z-index: 6;
    }
    .head_image img{
        width: 40%;
    }
    /* Add animation */
    .spin-animation {
        margin-top: 6rem;
        width: 80%;
        animation: spin 3s linear 3; /* Spins the head continuously, you can adjust the duration */
    }

    /* Define keyframes for the spin animation */
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .blocks{
        position: relative;
        left: -6vw;
        height: 37rem;
        top: 2rem;
        z-index: 3;
    }
    /* Assigning different colors to each square */
    .square.green {
        background-color: #5CA46E;
        width: 150px;
        height: 150px;
        aspect-ratio: 1/1;
        position: absolute;
        top: 9rem;
        left: 20%;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 6;
    }
    .square.green p {
        font-size: 1.8rem;
        color: white;
        font-family: "techmono";
        padding: 7% 7%;
        margin-top: 0rem;
    }
    .square.green a {
        text-decoration: none;
    }
    .square.picture img {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 28%;
        top: 3rem; /* Adjust this value to move the image up */
        z-index: 5;  /* This should be between the z-index of the green (5) and blue (4) squares */
    }
    .square.pink {
        background-color: #E8A2BD;
        width: 220px;
        height: 220px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 58%;
        top: 25rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 6;
    }
    .square.pink p {
        font-size: 2.7rem;
        color: white;
        font-family: "techmono";
        padding: 1.5vw 1.5vw;
        margin-top: 0rem;
    }
    .square.pink a{
        text-decoration: none;
        z-index: 7;
    }
    .square.blue {
        background-color: #5B7FAF;
        width: 160px;
        height: 160px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 75%;
        top:-1rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.blue2{
        background-color: #5B7FAF;
        width: 30px;
        height: 30px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 37%;
        top: 37rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.yellow {
        background-color: #EDBD30;
        width: 65px;
        height: 65px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 85%;
        top: 17rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.yellow2 {
        background-color: #EDBD30;
        width: 80px;
        height: 80px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 24%;
        top: 31rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }

    .square.orange {
        background-color: #DF662C;
        width: 108px;
        height: 108px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 70%;
        top: 36rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 7;
    }

    /* Animation for floating effect */
    @keyframes float {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-4rem);
        }
    }
    .rip {
        width: 100vw; /* Match the viewport width */
        position: relative; /* Set position relative to control children elements */
        z-index: 8; /* Ensure the rips are above other elements if necessary */
        overflow-y: hidden;
        height: 100rem;
    }

    .rip img {
        width: 100vw; /* Ensure the images take up the full width of the viewport */
        display: block; /* Remove inline margin or gaps */
    }

    .greenrip {
        position: relative;
        z-index: 9; /* Place above YouTube rip */
    }

    .greenrip img {
        width: 100vw;
    }

    .greenrip a {
        text-decoration: none;
        font-family: "human";
        color: white;
        position: absolute;
        font-size: 3rem;
        top: 41rem;
        left: 33%;
        text-align: center;
        z-index: 11; /* Ensure link is clickable above other elements */
        white-space: nowrap; /* Prevents the text from breaking onto multiple lines */
    }
    .greenrip a:hover{
        transform: scale(1.2);
    }
    .tourtitle {
        position: absolute; /* Allows precise placement over the greenrip image */
        top: 14rem; /* Adjust this value to fine-tune positioning */
        left: 0; /* Adjust this value to fine-tune positioning */
        z-index: 10; /* Ensure it appears above the greenrip image but below links */
        width: 100vw; /* Match the width of the container to align perfectly */
    }
    .youtuberip {
        position: relative;
        z-index: 10;
        width: fit-content; /* Shrinks the div to fit its content (i.e., the image) */
        height: fit-content; /* Shrinks the height to fit the image */
        margin: 0 auto; /* Center the div if needed */
        top: -15rem; /* Adjust overlap with the greenrip section */
        transition: transform 0.3s ease, z-index 0.3s ease;
    }
    .youtuberip:hover {
        transform: translateY(-0.9rem);
    }
    .youtuberip img {
        width: 100vw; /* Ensure the image takes up the full width of the viewport if required */
        height: auto; /* Maintain the aspect ratio */
        display: block; /* Remove any inline margin or gaps */
    }

    /* Update the positioning of the text */
    .youtuberip p {
        text-align: right;  /* Adjust alignment to make it more central if needed */
        position: absolute;
        top: 10rem; /* Lower the value for better visibility */
        right: 54%; /* Change from right to left and center */
        font-family: "techmono";
        font-size: 9rem; /* Adjust size if needed to be more visible */
        color: white;
        z-index: 12; /* Ensure text is above other elements */
    }

    .youtuberip a {
        text-decoration: none;
    }
}
@media (min-width: 2260px) {
    html, body {
        width: 100%;
        margin: 0;
        overflow-x: hidden;
    }
    header {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
        z-index: 3;
    }
    header div a {
        position: relative;
        text-align: left; /* Align 'Tyler, The Creator' to the left */
        font-size: 3vw; /* Adjust font size for larger screens */
        left: 4.5vw;
        top: -.5vw;
        transition: transform 0.3s ease; /* Adds smooth transition effect for growing/shrinking */
    }

    header div a:hover {
        transform: scale(1.2); /* Increase size by 20% on hover */
    }

    nav {
        flex: 1;
        justify-content: flex-end; /* Align nav links to the right */
    }

    nav a {
        font-size: 2vw; /* Adjust font size for nav links */
        float: right;
        position: relative;
        top: -9.2rem;
        right: 2.5vw;
        transition: transform 0.3s ease;
    }
    nav a:hover {
        transform: scale(1.2); /* Makes the link grow by 20% when hovered */
    }
    .background {
        margin-top: -17rem;
    }
    .head_image img{
        width: 40vw;
        margin: 8rem auto 0 auto;
        animation: spin 3s linear 3;
        top: 8rem;
        left: 10rem;
        z-index: 1;
    }
    .head_image {
        background-color: #FFACC8;
        text-align: center;
        height: 100rem;
    }
    /* Add animation */
    .spin-animation {
        margin-top: 6rem;
        width: 80%;
        animation: spin 3s linear 3; /* Spins the head continuously, you can adjust the duration */
    }

    /* Define keyframes for the spin animation */
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .blocks{
        position: relative;
        left: -6vw;
        height: 37rem;
        top: 2rem;
        z-index: 3;
    }
    /* Assigning different colors to each square */
    .square.green {
        background-color: #5CA46E;
        width: 150px;
        height: 150px;
        aspect-ratio: 1/1;
        position: absolute;
        top: 9rem;
        left: 20%;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 6;
    }
    .square.green p {
        font-size: 1.8rem;
        color: white;
        font-family: "techmono";
        padding: 7% 7%;
        margin-top: 0rem;
    }
    .square.green a {
        text-decoration: none;
    }
    .square.picture img {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 28%;
        top: 3rem; /* Adjust this value to move the image up */
        z-index: 5;  /* This should be between the z-index of the green (5) and blue (4) squares */
    }
    .square.pink {
        background-color: #E8A2BD;
        width: 220px;
        height: 220px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 58%;
        top: 25rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 6;
    }
    .square.pink p {
        font-size: 2.7rem;
        color: white;
        font-family: "techmono";
        padding: .5vw .5vw;
        margin-top: 0rem;
    }
    .square.pink a{
        text-decoration: none;
        z-index: 7;
    }
    .square.blue {
        background-color: #5B7FAF;
        width: 160px;
        height: 160px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 75%;
        top:-1rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.blue2{
        background-color: #5B7FAF;
        width: 30px;
        height: 30px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 37%;
        top: 37rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.yellow {
        background-color: #EDBD30;
        width: 65px;
        height: 65px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 85%;
        top: 17rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }
    .square.yellow2 {
        background-color: #EDBD30;
        width: 80px;
        height: 80px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 24%;
        top: 31rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 4;
    }

    .square.orange {
        background-color: #DF662C;
        width: 108px;
        height: 108px;
        aspect-ratio: 1/1;
        position: absolute;
        left: 70%;
        top: 36rem;
        animation: float 4s ease-in-out infinite alternate;
        z-index: 7;
    }

    /* Animation for floating effect */
    @keyframes float {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-4rem);
        }
    }
    .rip {
        width: 100vw; /* Match the viewport width */
        position: relative; /* Set position relative to control children elements */
        z-index: 8; /* Ensure the rips are above other elements if necessary */
        overflow-y: hidden;
        height: 180rem;
    }

    .rip img {
        width: 100vw; /* Ensure the images take up the full width of the viewport */
        display: block; /* Remove inline margin or gaps */
    }

    .greenrip {
        position: relative;
        z-index: 9; /* Place above YouTube rip */
    }

    .greenrip img {
        width: 100vw;
    }

    .greenrip a {
        text-decoration: none;
        font-family: "human";
        color: white;
        position: absolute;
        font-size: 5rem;
        top: 75rem;
        left: 34%;
        text-align: center;
        z-index: 11; /* Ensure link is clickable above other elements */
        white-space: nowrap; /* Prevents the text from breaking onto multiple lines */
    }
    .greenrip a:hover{
        transform: scale(1.2);
    }
    .tourtitle {
        position: absolute; /* Allows precise placement over the greenrip image */
        top: 25rem; /* Adjust this value to fine-tune positioning */
        left: 0; /* Adjust this value to fine-tune positioning */
        z-index: 10; /* Ensure it appears above the greenrip image but below links */
        width: 100vw; /* Match the width of the container to align perfectly */
    }
    .youtuberip {
        position: relative;
        z-index: 10;
        width: fit-content; /* Shrinks the div to fit its content (i.e., the image) */
        height: fit-content; /* Shrinks the height to fit the image */
        margin: 0 auto; /* Center the div if needed */
        top: -25rem; /* Adjust overlap with the greenrip section */
        transition: transform 0.3s ease, z-index 0.3s ease;
    }
    .youtuberip:hover {
        transform: translateY(-0.9rem);
    }
    .youtuberip img {
        width: 100vw; /* Ensure the image takes up the full width of the viewport if required */
        height: auto; /* Maintain the aspect ratio */
        display: block; /* Remove any inline margin or gaps */
    }

    /* Update the positioning of the text */
    .youtuberip p {
        text-align: right;  /* Adjust alignment to make it more central if needed */
        position: absolute;
        top: 20rem; /* Lower the value for better visibility */
        right: 54%; /* Change from right to left and center */
        font-family: "techmono";
        font-size: 9rem; /* Adjust size if needed to be more visible */
        color: white;
        z-index: 12; /* Ensure text is above other elements */
    }

    .youtuberip a {
        text-decoration: none;
    }
}