html, body {
    margin: 0;
    padding: 0;
    background-color: rgb(62, 5, 15);
}

/* general ****************************************************/

.title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 25px;
    color: white;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    justify-content: center;
}

.subtitle {
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    color: white;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    justify-content: center;
}

#navBar {
    font-size: 35px;
    padding-top: 20px;
    padding-left: 5%;
}

#navBar a {
    text-decoration: none;
}

li {
    list-style: none;
    display: inline;
    padding: 20px;
}

.imgContainer {
    display: flex;
    flex-direction: row;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
}

.column {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 25px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 75px;
    padding-left: 5%;
    padding-right: 5%;
}

.column img {
    width: 550px;
    object-fit: contain;
    border-radius: 10px;
}

.columnText {
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    color: white;
}

.topLayer {
    position: absolute;
    z-index: 1;
}

/* audio player **************************************************/

#audioPlayer {
    margin-top: -10px;
    padding-bottom: 25px;
}

/* who the fuck ordered a kfc breast & thighs combo ********************/

#breastThighsDiv {
    display: flex;
    position: relative;
}

#breastThighsImg:hover {
    cursor: crosshair;
}

#hornyUpdate {
    position: absolute;
    z-index: 1;
    visibility: hidden;
    width: 550px;
    margin-top: 175px;
}



/* images and gifs on the top layer ***************************************************/

#firstGIF {
    width: 85px;
    left: 110px;
}

#fandomAsMethodology {
    visibility: hidden;
    z-index: 1;
    width: 550px;
    left: 23%;
    top: 75px;
    background-color: rgb(255, 106, 186);
    padding: 30px;
}

#pinkArrow {
    margin-left: 50%;
    margin-top: 400px;
    rotate: 105deg;
    width: 140px;
}

#speakerIcon {
    margin-left: 5%;
    margin-top: 850px;
    width: 40px;
    animation: pulse 0.5s ease-in-out infinite alternate;
}

    #speakerIcon:hover {
        cursor: pointer;
    }

    @keyframes pulse {
    from {
        transform: scale(1);
        }
    to {
        transform: scale(1.15);
        }
    }

#office6 {
    cursor: pointer;
}

#march2023TextBox {
    visibility: hidden;
    width: 500px;
    background-color: white;
    padding: 30px;
    top: 1500px;
    left: 3%;
}

#march2023TextBox img{
    width: 500px;
}

#closeMarch2023Top {
    color: deeppink;
    cursor: pointer;
}

#closeMarch2023Bottom {
    color: deeppink;
    cursor: pointer;
}

#kerrang {
    position: fixed;
    top: 0;
    /* rotate: 90deg; */
    width: 100vw;
    visibility: hidden;
}

.typing-container {
    top: 3050px;
    left: 0%;
    padding: 15px;
    color: black;
    background-color: rgb(255, 106, 186);
    font-size: 1.5rem;
    font-family: monospace;
    /* white-space: nowrap; */
    overflow: hidden; /* Keep text tidy, no wrapping */
}

.cursor {
    display: inline-block;
    animation: blink 0.7s steps(1) infinite;
}

#clickGif {
    width: 100px;
    left: 4%;
    top: 3300px;
    cursor: pointer;
    filter: hue-rotate(285deg);
}

#clickGif:hover {
    transform: scale(1.1);
}

#eraseButton {
    visibility: hidden;
    top: 3000px;
    left: 4%;
    cursor: pointer;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

#goreGIF {
    width: 460px;
    border-radius: 10px;
    left: 53vw;
    top: 2210px;
    visibility: hidden;
}

#crankItDiv {
    margin: auto;
    padding: 10px;
    border-radius: 10px;
    background-color: rgb(62, 5, 15);
    color: black;
}

/* text styling inside the div */
#crankItDiv .columnText {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: rgb(94, 21, 35);
}

#crankItDiv:hover {
    cursor: pointer;
    background-color: rgb(94, 21, 35);
}


#glitterKiss {
    width: 150px;
    right: 9%;
    top: 2320px;
}

#pearlBracelet {
    width: 6vw;
    top: 1950px;
    left: 10px;
    rotate: 50deg;
}

#pearlBracelet:hover {
    cursor: crosshair;
    animation: growPearl 4s ease-in;
}

    @keyframes growPearl {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(20);
        left: 50%;
    }
    }



#cheerleader5:hover {
    cursor: pointer;
}



/* glow animations ******************************************/

.whiteGlow {
  animation: whiteGlow 0.75s ease-in-out infinite alternate;
}

@keyframes whiteGlow {
  from {
    filter: drop-shadow(0px 0px 0px rgb(255, 255, 255))
    drop-shadow(0px 0px 7px rgb(255, 255, 255))
  }
  to {
    filter: drop-shadow(0px 0px 9px rgb(255, 255, 255))
    drop-shadow(0px 0px 13px rgb(255, 255, 255))}
}

.grayGlow {
  animation: grayGlow 0.75s ease-in-out infinite alternate;
}

@keyframes grayGlow {
  from {
    filter: drop-shadow(0px 0px 0px rgb(128, 128, 128))
    drop-shadow(0px 0px 7px rgb(128, 128, 128))
  }
  to {
    filter: drop-shadow(0px 0px 9px rgb(128, 128, 128))
    drop-shadow(0px 0px 13px rgb(128, 128, 128))}
}


.blackGlow {
  animation: blackGlow 0.75s ease-in-out infinite alternate;
}

@keyframes blackGlow {
  from {
    filter: drop-shadow(0px 0px 13px rgb(0, 0, 0))
    drop-shadow(0px 0px 17px rgb(0, 0, 0))
  }
  to {
    filter: drop-shadow(0px 0px 29px rgb(0, 0, 0))
    drop-shadow(0px 0px 33px rgb(0, 0, 0))}
}