html {
    font-family: 'DM Sans', sans-serif;
    box-sizing: border-box;
    font-family: "Raleway", sans-serif;
    height: 98vh;
    width: 98vw;
    user-select: none;
}

body {
    background-color: #252525;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.dashboard {
    color: orange;
    text-align: center;
    background-color: #252525;
    border-radius: 30px;
    height: 95%;
    width: 90%;
    max-width: 1350px;
    display: flex;
    flex-direction: column;
}
/* ------------------------------ upperRow and various colored squares ------------------------------ */

.upperRow {
    width: 100%;
    height: 20%; /* Adjust the height as needed */
    display: flex;
    justify-content: space-between;
    gap:7px;
    z-index: 2;
}

#topRowSquare1 {
    background-color: rgb(254, 108, 100);
    width: 20%;
    border-top-left-radius: 90px;
}
#topRowSquare2 {
    background-color: rgb(76, 221, 229);
    width: 10%;
    height: 75%;
}
#topRowSquare3 {
    background-color: rgb(164, 214, 216);
    width: 8%;
    height: 75%;
}
#topRowSquare4 {
    background-color: rgb(237, 240, 81);
    width: 40%;
    height: 25%;
}
#topRowSquare5 {
    background-color: rgb(76, 221, 229);
    height: 75%;
    width: 10%;
}
#topRowSquare6 {
    background-color: rgb(254, 108, 100);
    width: 5%;
    height: 75%;
}
#topRowSquare7 {
    background-color: rgb(237, 240, 81);
    width: 18%;
    border-top-right-radius: 90px;
}

/* ------------------------------ bottom half of dashboard ------------------------------ */

.bottomHalf {
    display: flex;
    height: 80%;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}


/* ------------------------------ left column and buttons ------------------------------ */
.left-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 10%;
}


.longLeftRow {
    background-color: rgb(76, 221, 229);
    width: 45%;
    height: 75%;
    z-index: 2;
}

.navigation {
    height: 25%;
}

#about,
#work,
#contact {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    z-index: 2;
    height: 33%;
}
#about{
    background-color: rgb(240, 208, 110);
    border-top-right-radius: 30px;
}

#work{
    background-color: rgb(240, 173, 110)
}

#contact{
    background-color: rgb(196, 164, 216);
    border-bottom-left-radius: 30px;
}

.button a{
    color: whitesmoke;
    text-shadow: 2px 2px #252525;    
    text-decoration: none;
}

.aboutTextContainer {
    font-size: 1.5rem;
    width: 80%;
    color: whitesmoke;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-items: center;
}

.aboutH1 {
    position: absolute;
    top: 12%;
    font-size: 3rem;
}

.workH1  {
    color: orange;
    position: absolute;
    top: -5.8%;
    right: 40%;
}


.dashboardOverlay {
    border-radius: 30px;
    background-color: #252525;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contactPageContainer {
    width: 50%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

form button {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background-color: orange;
        padding: 10px;
        border-radius: 15px;
        width: 20%;
        z-index: 5;
        cursor: pointer;
}

.contactTitle,
.contactMessageTitle {
    font-size: 1.8rem;
}

.contactTitle {
    position: absolute;
    left: 17%;
    top: 22%;
}

.contactEmail {
    position: absolute;
    width: 25%;
    left: 49.8%;
    top: 29%;
    height: 7%;
    border-radius: 15px;
    z-index: 5;
}

.contactMessageTitle {
    position: absolute;
    left: 17%;
    top: 42%;
}

.contactMessageText {
    position: absolute;
    height: 30%;
    width: 34%;
    font-family: "Raleway", sans-serif;
    border-radius: 15px;
    z-index: 5;
}



.contactH1 {
    position: absolute;
    top: -28%;
    font-size: 3rem;
}

.webDesignTitle {
    font-size: 3rem;
    font-weight: bold;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 35%;
    margin: auto auto;
    font-size: 5rem;
}

.starfleetGif img{
    width: 48%;
    opacity: 10%;
    right: 0;
    left: 0;
    margin: auto auto;
    top: 20%;
    position: absolute;

}

.portfolioMainContainer {
    font-size: 1.5rem;
    /* font-weight: bold; */
    color: whitesmoke;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    max-width: 900px;
    margin: auto;
    min-height: 600px;
}

.links {
    z-index: 10;
}

ul {
    z-index: 5;
}

/* ------------------------------ right row ------------------------------ */

.rightRow {
    width: 4%;
    background-color: rgb(76, 221, 229);
    right:  13%;
    bottom: 0;
    height: 100%;
    z-index: 1;
    border-bottom-right-radius: 30px;
}


/* Media queries */

@media (max-width: 1024px) {
    body {
        overflow: auto;
    }

    #work {
        color: #252525;
        font-size: 1.5rem;
        width: 78.5%;
        height: 33%;
        margin: auto;
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        display: flex;
        /* position: absolute;
        right: 0;
        bottom: 10%;
        left: 0; */
        z-index: 4;
        /* border-top-left-radius: 30px;
        border-top-right-radius: 30px; */
    }
    #contact {
        color: #252525;
        font-size: 1.5rem;
        height: 33%;
        width: 78.5%;
        margin: auto;
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        display: flex;
        /* position: absolute;
        right: 0;
        bottom: 5%;
        left: 0; */
        z-index: 4;
        border-bottom-left-radius: 0;
    }
    #about {
        color: #252525;
        font-size: 1.5rem;
        height: 33%;
        width: 78.5%;
        margin: auto;
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        display: flex;
        /* position: absolute;
        right: 0;
        bottom: 0;
        left: 0; */
        z-index: 2;
        border-top-right-radius: 0;
        /* border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        border-top-right-radius: 0px; */

    }

    .navigation {
        position: absolute;
        bottom: 0;
        left: 2%;
        right: 0;
        width: 94%;
        height: 15%;
    }

    #topRowSquare1 {
        width: 18%;

    }

    .longLeftRow {
        height: 100%;
        width: 160%;
        border-bottom-left-radius: 90px;
    }

    .starfleetGif {
        z-index: 3;
        width: 99%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        margin: auto auto;
        position: absolute;
        border-radius: 30px;
        max-width: 1400px;
    }

    .rightRow {
        width: 18%;
        height: 100%;
        border-bottom-right-radius: 90px;
    }

    .dashboardOverlay {
        border-radius: 30px;
        width: 90%;
        height: 76%;
        left: 2%;
        right: 0;
        margin: auto;
        bottom: 15%;
        position: absolute;
        z-index: 3;
        display: flex;
        overflow: hidden;
        overflow-y: auto;
    }

    .mainPageTextContainer {
        font-size: 3em;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dashboard {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 96vw;
        height: 96vh;
        overflow: hidden;
    }

    .portfolioMainContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: whitesmoke;
        font-size: 1rem;
        height: 100%;
        width: 100%;
        max-height: 600px;
        max-width: 400px;
        top: 0;
    }

    .portfolioMainContainer ul{
        margin-right: 9%;
        z-index: 5;
        max-height: 500px;
    }
    .portfolioMainContainer a{
        color: rgb(76, 221, 229);
    }


    input {
        width: 65%;
        height: 20%;
        font-family: "Raleway", sans-serif;
    }

    .aboutTextContainer {
        /* border: 1px solid red;; */
        color: whitesmoke;
        display: flex;
        flex-direction: column;
        font-size: 1rem;
        font-weight: bold;
        height: calc(100% - 30px);
        z-index: 4;
        width: 95%;
        height: 85%;
        margin-top: 5%;
        overflow-y: auto;
    }

    .aboutH1 {
        position: absolute;
        top: -3%;
        font-size: 2rem;
    }

    .workH1  {
        color: orange;
        position: absolute;
        top: 0%;
    }
    
    .bottomRow {
        display: none;
    }

    .webDesignTitle {
        position: absolute;
        left: 0;
        right: 0;
        top: 25%;
        bottom: 0;
        font-size: 3rem;
    }

    .contactPageContainer {
        width: 100%;
        height: 75%;
    }
    
    .contactTitle,
    .contactMessageTitle {
        font-size: 2rem;
    }
    
    .contactTitle {
        position: absolute;
        top: 0;
        left: 10%;
    }
    
    .contactEmail {
        border-radius: 15px;
        position: absolute;
        top: 20%;
        left: 10%;
        width: 75%;
    }
    
    .contactMessageTitle {
        position: absolute;
        top: 30%;
        left: 10%;
    }
    
    .contactMessageText {
        font-family: "Raleway", sans-serif;
        border-radius: 15px;
        position: absolute;
        top: 50%;
        left: 10%;
        width: 75%;
    }
    
    .contactH1 {
        position: absolute;
        top: -28%;
        font-size: 3rem;
    }


  }


/* AMAZING MULLIGAN MACHINE STYLES */

.mainContainer {
    border: 1px solid red;
    width: 95vw;
    background-color: white;
    margin: auto auto;
    display: flex;
    flex-direction: column;
    height: 1000px;
}

.mainContainerInnerBlock {
    border: 1px solid green;
    width: 100%;
    height: 100%;
}

.mainContainerInnerBlock h2 {
    border: 1px solid green;
}

.landFlexContainer {
    border: 1px solid blue;
    display: flex;
    width: 100%;
}

.flexContainer {
    border: 1px solid blue;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.flexContainer textarea {
    width: 50%;
}

.flexContainer :nth-child(2){
    border: 1px solid red;
    height: 100%;
}

#basicSettingsContainer {
    display: flex;
    background-color: red;
}

#advancedSettingsContainer {
    display: none;
    flex-direction: column;
}

#advancedLandsContainer {
    display: none;
}

#advancedSpellsContainer {
    display: none;
}

#advancedOutcomes {
    display: none;
}

.button {
}

.advancedSettingsInnerContainer {
    display: flex;
}

/* 90s glitch art */

.glitch {
    position: relative;
    font-size: 4em;
    color: aqua;
    text-align: center;
    overflow: hidden;
  }
  
  .glitch::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: magenta;
    z-index: -1;
    animation: glitch 1s infinite;
  }
  
  @keyframes glitch {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-10px, -10px); }
    100% { transform: translate(10px, 10px); }
  }


  .glitchBackground {
    width: 500px;
    height: 400px;
    background-color: magenta;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glitchLines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Ensures lines don't interfere with other elements */
    overflow: hidden;
}

.glitchLines::before,
.glitchLines::after,
.glitchLines div::before,
.glitchLines div::after {
    content: '';
    position: absolute;
    width: 30%;
    height: 2px; /* Adjust line height */
    background: white;
    opacity: 0.8;
}

.glitchLines::before {
    top: 10%;
    animation: glitch-lines 5s linear infinite;
}

.glitchLines::after {
    top: 30%;
    animation: glitch-lines 5s linear infinite;
}

.glitchLines div::before {
    top: 50%;
    animation: glitch-lines 5s linear infinite;
}

.glitchLines div::after {
    top: 70%;
    animation: glitch-lines 5s linear infinite;
}

.glitchLines div {
    position: relative;
    width: 100%;
    height: 100%;
}

@keyframes glitch-lines {
    0% {
        transform: translateX(100vw) scaleY(1);
    }
    50% {
        transform: translateX(-100vw) scaleY(2);
    }
    100% {
        transform: translateX(100vw) scaleY(1);
    }
}

@keyframes glitch-animation {
    0% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 1;
    }
    20% {
        transform: rotate(-45deg) translate(-5px, -5px);
        opacity: 0.8;
    }
    40% {
        transform: rotate(-45deg) translate(5px, 5px);
        opacity: 0.6;
    }
    60% {
        transform: rotate(-45deg) translate(-5px, 5px);
        opacity: 0.8;
    }
    80% {
        transform: rotate(-45deg) translate(5px, -5px);
        opacity: 0.6;
    }
    100% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 1;
    }
}
.glitchLines1 {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Ensures lines don't interfere with other elements */
    overflow: hidden;
}

.glitchLines1::before,
.glitchLines1::after,
.glitchLines1 div::before,
.glitchLines1 div::after {
    content: '';
    position: absolute;
    width: 20%;
    height: 2px; /* Adjust line height */
    background: white;
    opacity: 0.8;
}

.glitchLines1::before {
    top: 10%;
    animation: glitch-lines1 3s linear infinite;
}

.glitchLines1::after {
    top: 30%;
    animation: glitch-lines1 3s linear infinite;
}

.glitchLines1 div::before {
    top: 50%;
    animation: glitch-lines1 3s linear infinite;
}

.glitchLines1 div::after {
    top: 70%;
    animation: glitch-lines1 3s linear infinite;
}

.glitchLines1 div {
    position: relative;
    width: 100%;
    height: 100%;
}

@keyframes glitch-lines1 {
    0% {
        transform: translateX(100vw) scaleY(1);
    }
    50% {
        transform: translateX(-100vw) scaleY(2);
    }
    100% {
        transform: translateX(100vw) scaleY(1);
    }
}

@keyframes glitch-animation1 {
    0% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 1;
    }
    20% {
        transform: rotate(-45deg) translate(-5px, -5px);
        opacity: 0.8;
    }
    40% {
        transform: rotate(-45deg) translate(5px, 5px);
        opacity: 0.6;
    }
    60% {
        transform: rotate(-45deg) translate(-5px, 5px);
        opacity: 0.8;
    }
    80% {
        transform: rotate(-45deg) translate(5px, -5px);
        opacity: 0.6;
    }
    100% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 1;
    }
}
.glitchLines2 {
    position: absolute;
    top: 70%;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Ensures lines don't interfere with other elements */
    overflow: hidden;
}

.glitchLines2::before,
.glitchLines2::after,
.glitchLines2 div::before,
.glitchLines2 div::after {
    content: '';
    position: absolute;
    width: 10%;
    height: 2px; /* Adjust line height */
    background: white;
    opacity: 0.8;
}
.glitchLines2::before {
    top: 10%;
    animation: glitch-lines1 2s linear infinite;
}

.glitchLines2::after {
    top: 30%;
    animation: glitch-lines1 3s linear infinite;
}

.glitchLines2 div::before {
    top: 50%;
    animation: glitch-lines1 3s linear infinite;
}

.glitchLines2 div::after {
    top: 70%;
    animation: glitch-lines1 3s linear infinite;
}

.glitchLines2 div {
    position: relative;
    width: 100%;
    height: 100%;
}

@keyframes glitch-lines2 {
    0% {
        transform: translateX(100vw) scaleY(1);
    }
    50% {
        transform: translateX(-100vw) scaleY(2);
    }
    100% {
        transform: translateX(100vw) scaleY(1);
    }
}

@keyframes glitch-animation2 {
    0% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 1;
    }
    20% {
        transform: rotate(-45deg) translate(-5px, -5px);
        opacity: 0.8;
    }
    40% {
        transform: rotate(-45deg) translate(5px, 5px);
        opacity: 0.6;
    }
    60% {
        transform: rotate(-45deg) translate(-5px, 5px);
        opacity: 0.8;
    }
    80% {
        transform: rotate(-45deg) translate(5px, -5px);
        opacity: 0.6;
    }
    100% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 1;
    }
}

.glitchLines3 {
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Ensures lines don't interfere with other elements */
    overflow: hidden;
}

.glitchLines3::before,
.glitchLines3::after,
.glitchLines3 div::before,
.glitchLines3 div::after {
    content: '';
    position: absolute;
    width: 10%;
    height: 3px; /* Adjust line height */
    background: white;
    opacity: 0.8;
}
.glitchLines3::before {
    top: 10%;
    animation: glitch-lines1 3s linear infinite;
}

.glitchLines3::after {
    top: 30%;
    animation: glitch-lines1 3s linear infinite;
}

.glitchLines3 div::before {
    top: 50%;
    animation: glitch-lines1 3s linear infinite;
}

.glitchLines3 div::after {
    top: 70%;
    animation: glitch-lines1 3s linear infinite;
}

.glitchLines3 div {
    position: relative;
    width: 100%;
    height: 100%;
}

@keyframes glitch-lines3 {
    0% {
        transform: translateX(100vw) scaleY(1);
    }
    50% {
        transform: translateX(-100vw) scaleY(2);
    }
    100% {
        transform: translateX(100vw) scaleY(1);
    }
}

@keyframes glitch-animation3 {
    0% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 1;
    }
    20% {
        transform: rotate(-45deg) translate(-5px, -5px);
        opacity: 0.8;
    }
    40% {
        transform: rotate(-45deg) translate(5px, 5px);
        opacity: 0.6;
    }
    60% {
        transform: rotate(-45deg) translate(-5px, 5px);
        opacity: 0.8;
    }
    80% {
        transform: rotate(-45deg) translate(5px, -5px);
        opacity: 0.6;
    }
    100% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 1;
    }
}

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

.floor {
    width: 100%;
    height: 40%; /* Adjust height of the floor */
    background-color: #03ff03; /* Floor color */
    position: absolute;
    bottom: 0; /* Stick to the bottom of the container */
    transform: skew(-30deg, 0deg); /* Skew towards the upper right */
    transform-origin: bottom left; /* Skew from the bottom left corner */
    overflow: hidden; /* Ensures that pseudo-elements don't overflow */
}

.floor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0; /* Adjusted to cover the full width */
    width: 100%; /* Full width */
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 0, 234, 0.87) 0,
        rgba(3, 247, 255, 0.63) 10px,
        rgba(0, 174, 255, 0.507) 10px,
        rgba(255, 255, 255, 0) 20px
    );
    transform: skew(-30deg, 0deg); /* Skew to match the floor skew */
    transform-origin: top left; /* Skew from the top left corner */
    z-index: 1; /* Ensure it's above the background but below glitch lines */
}

.cube-container {
    perspective: 1000px; /* Adds depth to the 3D effect */
    width: 20%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.cube {
    position: relative;
    width: 100%; /* Matches the width of the container */
    height: 100%; /* Matches the height of the container */
    transform-style: preserve-3d; /* Ensures children are rendered in 3D space */
    transform: rotateX(30deg) rotateY(30deg); /* Initial rotation */
    animation: rotate 10s infinite linear; /* Animation for rotation */
}

.cube-face {
    position: absolute;
    width: 100%; /* Matches the width of the cube */
    height: 100%; /* Matches the height of the cube */
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.front  { transform: translateZ(50%); }
.back   { transform: rotateY(180deg) translateZ(50%); }
.left   { transform: rotateY(-90deg) translateZ(50%); }
.right  { transform: rotateY(180deg) translateZ(50%); }
.top    { transform: rotateX(90deg) translateZ(50%); }
.bottom { transform: rotateX(-180deg) translateZ(50%); }

.cube-face .bottom {
}

@keyframes rotate {
    from { transform: rotateX(0) rotateY(0); }
    to { transform: rotateX(360deg) rotateY(360deg); }
}

/* scene 2 css */

.glitch2Background {
    width: 500px;
    height: 400px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(270deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 1400% 1400%;
    animation: gradientShift 20s ease infinite;
  }
  
  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  #lava-lamp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
    background-size: 200% 200%;
    mix-blend-mode: overlay;
    animation: lavaMove 10s ease-in-out infinite;
  }
  
  @keyframes lavaMove {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
  }

  .blob-container {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid red;
  }
  
  .blob {
    width: 20%;
    height: 20%;
    border-radius: 50%;
    left: 0;
    right: 0;
    background: linear-gradient(45deg, #ff6b6b, #f06595, #845ef7);
    position: absolute;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    animation: blobMove 5s ease-in-out infinite, blobMorph 10s ease-in-out infinite;
  }
  
  @keyframes blobMove {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(20px, -30px); }
    50% { transform: translate(-30px, 20px); }
    75% { transform: translate(30px, 30px); }
  }
  
  @keyframes blobMorph {
    0%, 100% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
    25% { clip-path: polygon(30% 0%, 100% 30%, 70% 100%, 0% 70%); }
    50% { clip-path: polygon(50% 20%, 80% 50%, 50% 80%, 20% 50%); }
    75% { clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%); }
  }

  /* scene 2 building css */

  .buildings1 {
    background: blue;
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 0;
    z-index: 1;
  }

  .buildings1 {
    background: rgba(0, 0, 255, 0);
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: 5%;
  }

  .buildings2 {
    background: rgba(255, 255, 0, 0);
    width: 100%;
    height: 45%;
    position: absolute;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: 2%;
  }

  .buildings3 {
    background: rgba(0, 0, 255, 0);
    width: 100%;
    height: 75%;
    position: absolute;
    bottom: 0;
    z-index: 1;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: 5%;
  }

  .buildingType1 {
    height: 100%;
    width: 20%;
    background-color: rgb(255, 166, 0);
  }

  .buildingType2 {
    height: 75%;
    width: 20%;
    background-color: rgb(255, 166, 0);
  }

  .buildingType3 {
    height: 100%;
    width: 30%;
    background-color: rgba(255, 166, 0, 0.705);
}

  .buildingType4 {
    height: 75%;
    width: 40%;
    background-color: rgba(255, 166, 0, 0.733);
  }

  .buildingType5 {
    height: 120%;
    width: 20%;
    background-color: rgba(255, 166, 0, 0.664);
  }

  .cityTextDiv {
    border: 1px solid red;
    display: flex;
    flex-direction: column;
  }

  .cityText {
    text-align: center;
    color:rgb(30, 255, 0);
    font-size: 2rem;
  }

  .cityText::before {
    content: attr(data-text);
    position: absolute;
    color: rgba(255, 0, 191, 0.281);
    z-index: -1;
    animation: glitch 1s infinite;
  }

  @keyframes cityText {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-10px, -10px); }
    100% { transform: translate(10px, 10px); }
  }
  
  .glitch2Body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 5px solid blue;
  }


  /* nightclub css */


  .nightclub {
    position: relative;
    width: 400px;
    height: 500px;
    perspective: 1000px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    border: 1px solid red;
    background: linear-gradient(270deg, #ff00002a, #ffee003b, #33ff002c, #00ffea34, #8af3ea28, #1900ff28, #ff006236);
    background-size: 1400% 1400%;
    animation: gradientShift 20s ease infinite;
}

.nightclubFloor {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 1fr);
    transform: rotateX(60deg) translateZ(-100px);
}

.nightclubFloor {
    width: 90%;
    height: 30%; /* Adjust height of the floor */
    background-color: #03ff03; /* Floor color */
    position: absolute;
    bottom: 0; /* Stick to the bottom of the container */
    transform: skew(-25deg, 0deg); /* Skew towards the upper right */
    transform-origin: bottom left; /* Skew from the bottom left corner */
    overflow: hidden; /* Ensures that pseudo-elements don't overflow */
}

.nightclubFloor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0; /* Adjusted to cover the full width */
    width: 130%; /* Full width */
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(2, 0, 2, 0.87) 0,
        rgb(255, 255, 255) 10px,
        rgb(0, 0, 0) 10px,
        rgba(255, 255, 255, 0) 20px
    );
    transform: skew(-30deg, 0deg); /* Skew to match the floor skew */
    transform-origin: top left; /* Skew from the top left corner */
    z-index: 1; /* Ensure it's above the background but below glitch lines */
}

.tile {
    width: 100%;
    height: 100%;
}

.tile:nth-child(even) {
    background-color: white;
}

.tile:nth-child(odd) {
    background-color: black;
}

.nightclubBody {
    display: flex;
    flex-direction: column;

}

.disco-ball {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%) rotateX(45deg);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #33ff00 15%, #ff00c8 50%, #00f7ff 85%);
    border-radius: 50%;
    box-shadow: 0 0 30px rgb(9, 255, 1), 
                0 0 60px rgb(0, 225, 255), 
                inset 0 0 20px rgb(255, 0, 0);
    animation: rotateBall 1s linear infinite, discoLights 2s ease-in-out infinite alternate;
}

@keyframes rotateBall {
    0% {
        transform: translateX(-50%) rotateX(45deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-50%) rotateX(45deg) rotateY(360deg);
    }
}

@keyframes discoLights {
    0% {
        box-shadow: 0 0 100px rgb(0, 255, 242), 
                    0 0 60px rgb(247, 0, 255), 
                    inset 0 0 20px rgba(9, 255, 0, 0.7);
    }
    100% {
        box-shadow: 0 0 30px rgb(0, 255, 242), 
                    0 0 60px rgb(255, 0, 255), 
                    inset 0 0 20px rgb(21, 255, 0);
    }
}

.orb {
    position: absolute;
    top: 25%;
    right: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(255, 0, 255, 1), rgba(0, 255, 255, 0.5));
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5), 
                0 0 40px rgba(0, 255, 255, 0.3);
}

.orb:nth-child(1) { animation: orbit1 3s linear infinite; }
.orb:nth-child(2) { animation: orbit2 4s linear infinite; }
.orb:nth-child(3) { animation: orbit3 5s linear infinite; }
.orb:nth-child(4) { animation: orbit4 6s linear infinite; }

@keyframes orbit1 {
    0% { transform: rotate(0deg) translateX(120px) rotate(-10deg); }
    100% { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

@keyframes orbit2 {
    0% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

@keyframes orbit3 {
    0% { transform: rotate(0deg) translateX(180px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(180px) rotate(-360deg); }
}

@keyframes orbit4 {
    0% { transform: rotate(0deg) translateX(210px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(210px) rotate(-360deg); }
}

.counter {
    border: 3px solid rgba(255, 0, 255, 1);
    border-radius: 15px;
    width: 60%;
    height: 30%;
    position: absolute;
    right: 10%;
    margin: auto auto;
    top: 50%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 0, 255, 0.87) 0,
        rgb(255, 255, 255) 10px,
        rgb(0, 255, 234) 10px,
        rgba(255, 255, 255, 0) 20px
    );}

    /* bartender css */

    .bartenderDiv {
        border: 1px solid red;
        width: 400px;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bartenderFace {
        height: 75%;
        width: 75%;
        border-radius: 50%;
        border: 1px solid red;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: radial-gradient(circle, #33ff00 15%, #ff00c8 50%, #00f7ff 85%);
    border-radius: 50%;
    box-shadow: 0 0 30px rgb(9, 255, 1), 
                0 0 60px rgb(0, 225, 255), 
                inset 0 0 20px rgb(255, 0, 0);
    animation: bartenderFaceRotate 10s linear infinite, discoLights 2s ease-in-out infinite alternate;    
    }

    @keyframes bartenderFaceRotate {
        0% {
            transform: translateX(0%) rotateX(45deg) rotateY(0deg);
        }
        100% {
            transform: translateX(0%) rotateX(45deg) rotateY(360deg);
        }
    }

    .bartenderEyeDiv {
        width: 100%;
        height: 20%;
        border: 1px solid blue;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .bartenderEye {
        height: 50%;
        width: 25%;
        border-radius: 50%;
        border: 1px solid red;
        background: linear-gradient(270deg, #ff0000, #ffee00, #33ff00, #00ffea, #8af3ea, #1900ff, #ff0062);
        background-size: 1400% 1400%;
        animation: gradientShift 20s ease infinite;
    }
    

    .bartenderMouth {
        height: 50%;
        width: 25%;
        border-radius: 50%;
        border: 1px solid red;
        background: linear-gradient(270deg, #ff0000, #ffee00, #33ff00, #00ffea, #8af3ea, #1900ff, #ff0062);
        background-size: 1400% 1400%;
        animation: gradientShift 20s ease infinite;
    }
    
    #bartenderPlayerDialouge1 {
        display: flex;
        margin: auto;
        border: 3px solid rgb(9, 255, 1);
        padding: 3%;
        background-color: #f700ff46;
    }

    #bartenderPlayerDialouge2,
    #bartenderPlayerDialouge3,
    #bartenderPlayerDialouge4,
    #bartenderPlayerDialouge5,
    #bartenderPlayerDialouge6,
    #bartenderPlayerDialouge7,
    #bartenderPlayerDialouge8,
    #bartenderPlayerDialouge9 {
        display: none;
        border: 3px solid rgb(9, 255, 1);
        background-color: #f700ff46;
        padding: 3%;
    }

    #bartenderPlayerDialouge4 {
        bottom:25%;
        left: 30%;
        margin: auto;
    }

    #bartenderPlayerDialougeBox {
        border: 1px solid orange;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #bartenderResponseToPlayer2,
    #bartenderResponseToPlayer3,
    #bartenderResponseToPlayer4,
    #bartenderResponseToPlayer5,
    #bartenderResponseToPlayer6,
    #bartenderResponseToPlayer7,
    #bartenderResponseToPlayer8,
    #bartenderResponseToPlayer9 {
        display: none;
        color: red;
    }

    .bartenderFlexDiv {
        position: relative;
    }

    /* nightclub poster css */

    .nightclubWall {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .posterDiv {
        border: 1px solid red;
        width: 80%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3%;
    }

    .leftPosterDiv {
        border: 1px solid red;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 3%;
    }

    .rightPosterDiv {
        border: 1px solid red;
        width: 100%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .poster1 {
        border: 1px solid green;
        height: 100%;
        display: flex;
        flex-direction: column;
        color: white;
    }

    .poster1TopDiv {
        border: 1px solid yellow;
        height: 15%;
        width: 100%;
        position: relative;
    }

    .poster1TopDiv p {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 12px;
    }

    .poster1MidDiv {
        border: 1px solid red;
        height: 20%;
        width: 100%;
        text-align: center;
    }

    .poster1BottomDiv {
        border: 1px solid blue;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        justify-content: center;
        align-items: center;
    }
    
    .poster2 {
        border: 1px solid blue;
        height: 100%;
    }

    .poster3 {
        border: 1px solid yellow;
        height: 75%;
        width: 100%;
    }

    .posterSkull {
        border: 1px solid blue;
        height: 45%;
        width: 80%;
        position: relative;
    }

    .posterNose {
        border: 1px solid green;
        position: absolute;
        height: 30%;
        width: 100%;
        bottom: 0;
    }

    .posterJaw {
        border: 1px solid blue;
        height: 20%;
        width: 70%;
    }

/* Carousel Demo */

.corouselDiv {
    background-color: black;

}

/* Slideshow container */
.slideshow-container {
    position: relative;
    margin: auto;
    height: 100%;;
  }
  
  /* Hide the images by default */
  .mySlides {
    display: none;
  }
  
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }
  
  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px 20px 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }

  .mySlidesText {
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    width: 80%;
    margin: auto auto;
  }

  .mySlidesText h2 {
    font-size: 2rem;
  }

  .mySlides {
    border-color: 2px solid green;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .corouselDiv {
    max-width: 414px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .corouselDivBackgroundColor {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #00f7ff;
  }

  .mySlidesImage {
  }