body {
    
    width: 100%;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    background-color: rgb(62, 62, 62);
    text-align: center;
    box-sizing: border-box;
}

.whoamibg{

    width: 100%;
    min-height: 100vh;

    background-image: url("images/whoamibg.gif");
    background-size: cover;
    background-attachment: fixed;

}

.Title{

    color: white;

}

.social-icons {

    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 10px 10%;
}

.lastfm,
.steam {
    line-height: 0;
}

.lastfm img,
.steam img {
    width: 50px;
    height: 50px;
}

.topbar{

    
    margin: 1% auto;
    max-width: 900px;
    width: 90%;

    border-radius: 1%;
    border-style: dotted;
    border-color: rgba(255, 255, 255, 0.296);
    background-color: rgba(200, 200, 200, 0.101);

}

.cat-top {
    position: absolute;
    top: 10%;
    left: -100px;
    animation: walkAcross 20s linear infinite; /* Animation properties */
}

@keyframes walkAcross {
    0% {
        left: -100px; /* Start position */
    }
    100% {
        left: 100%; /* End position */
    }
}

.page-nav{



}

.safehouselink{

    margin-bottom: 3%;

}

.introtext{

    margin: auto;
    max-width: 1200px;
    width: 90%;

    border-radius: 1%;
    border-style: dotted;
    border-color: rgba(255, 255, 255, 0.296);
    background-color: rgba(200, 200, 200, 0.101);

    color: white;

}

.maintext{

    margin: 15px auto;
    max-width: 1200px;
    width: 90%;

    border-radius: 1%;
    border-style: dotted;
    border-color: rgba(255, 255, 255, 0.296);
    background-color: rgba(200, 200, 200, 0.101);

    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    color: white;

}


/* this is for making hyrplinks light up on hover*/

a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: rgb(181, 154, 255);
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}

.cherrycrushpics{
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    justify-content: center;
    align-items: flex-start;
    margin: 1% 2%;
}

.cherrycrushpics img{
    width: 40%;
    height: auto;
    display: block;
    border-style: dotted;
}

.santapodcars {
  margin: 50px auto;

  max-width: 700px;
  width: 90%;
  aspect-ratio: 7 / 4;
  overflow: hidden;
  border: 3px dotted;

  position: relative;
}

.driftgif {

  border: 3px dotted;
  max-width: 700px;
  width: 90%;
  aspect-ratio: 6 / 3;
  height: auto;
  margin: 0 auto;

}

.driftgif img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.blinkies{

display: inline-block;

}

.blinkies img {
  width: 20%;
  height: 20%;
  object-fit: cover;
}















.photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: round 64s infinite;
  opacity: 0;
}

@keyframes round {
  6.25% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
}
-webkit-@keyframes round {
  25% {
    opacity: 1;
    -webkit-opacity: 1;
  }
  40% {
    opacity: 0;
    -webkit-opacity: 0;
  }
}

img:nth-child(1) {
  animation-delay: 60s;
}
 
img:nth-child(2) {
  animation-delay: 56s;
}
 
img:nth-child(3) {
  animation-delay: 52s;
}
 
img:nth-child(4) {
  animation-delay: 48s;
}

img:nth-child(5) {
  animation-delay: 44s;
}
 
img:nth-child(6) {
  animation-delay: 40s;
}
 
img:nth-child(7) {
  animation-delay: 36s;
}
 
img:nth-child(8) {
  animation-delay: 32s;
}

img:nth-child(9) {
  animation-delay: 28s;
}
 
img:nth-child(10) {
  animation-delay: 24s;
}
 
img:nth-child(11) {
  animation-delay: 20s;
}
 
img:nth-child(12) {
  animation-delay: 16s;
}

img:nth-child(13) {
  animation-delay: 12s;
}
 
img:nth-child(14) {
  animation-delay: 8s;
}
 
img:nth-child(15) {
  animation-delay: 4s;
}
 
img:nth-child(16) {
  animation-delay: 0;
}




@media (max-width: 600px) {
  .cherrycrushpics img {
    width: 90%;
  }
}