body {
    background-image: url(backgrounds/stars3.gif);
    background-size:250px;
    cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur116.cur), auto;
}
::selection {
    color:rgb(255, 251, 0);
  text-shadow: 2px 1px 2px rgb(255, 251, 137), -1px -2px 5px rgb(175, 255, 121);
  background-color: transparent;
}
.mainbox {
    max-width:90%;
    margin: 10px auto;
    display: grid;
    row-gap:20px;
    grid-template-columns: 220px minmax(0, 1fr) 220px;
    position:relative;
}
p {
    color:rgb(189, 225, 255);
    font-size:20px;
    font-family:Verdana;
}
img {
    max-width: 100%;
}
p :link {
        color:rgb(255, 253, 142);
  text-shadow: 1px 1px 2px rgb(255, 251, 137), -1px -1px 5px rgb(175, 255, 121);
  background-color: transparent;
}
header{
grid-row: 2 / 3;
grid-column: 1 / 4;
position:relative;
}
h1 {
font-family:Irish;
    font-size:100px;
    text-align: center;
     background-image: linear-gradient(180deg,rgb(175, 255, 121) 1%, rgb(255, 222, 73) 67%, rgb(255, 139, 49) 100%);
    color: transparent;
    background-clip: text;
        text-shadow: 5px 5px 10px rgba(222, 253, 44, 0.293);
        margin:0%; }
h2 {
    font-family:verdana;
    font: size 25px;
    color:rgb(180, 229, 255);
}
h3 {
    font-family:Irish;
    font-size:30px;
    text-align: center;
    color:rgb(240, 84, 201);
     text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
               1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
    margin:10px 0px;
}
main h3 {
      font-family:Irish;
    font-size:35px;
    color:rgb(19, 52, 109);
     text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
               1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}

nav {
    margin:auto;
    height:35px;
    width:max-content;
text-align: center;
background: #182a8f;
background: linear-gradient(90deg,rgba(24, 42, 143, 0.202) 0%, rgba(97, 160, 255, 0.705) 50%, rgba(29, 41, 204, 0.35) 100%);
border-radius: 20px;
grid-row: 1 / 2;
grid-column: 1 / 4;
}
nav a {
    margin:0%;
    text-decoration: none;
    font-size: 30px;
    color:aliceblue;
    padding:0px 30px;
    font-family: Dyna;
}
nav a:hover {
    color: rgb(255, 219, 103);
    text-shadow: 2px 1px 2px rgb(0, 29, 115), -1px -2px 5px rgb(175, 255, 121);
}
main {
grid-row: 3 / 4;
grid-column: 2 / 3;
height:max-content;
position:relative;
background:transparent url(/images/bolibompaljushorisont.gif) repeat-x scroll;
}
main p {
    padding-left: 20px;
}
.enter {
      width:max-content;
    margin-left:50px;
}
.general {
    position: absolute;
    overflow:auto;
    top: 1%;
    right:0px;
    width:43%;
    height:15%;
    padding:30px 60px;
    background-repeat: no-repeat;
    background-size: contain;
    background-size: 100% 100%;
    background-image: url(/images/frame.png)
}
.general p {
    font-family: Verdana;
    font-size:15px;
}
#me {
    width:35%;
    margin-top: 60px;
border-width: 15px;
          border-style: solid;
          border-image: url("https://file.garden/ZZ2PUl9MPilKgIvB/collection/borders/xnxzti-1.png") 8 fill round;
transform: rotate(-4deg);
      
}
.general p {
    color:#092853;
}
.TV {
    position: relative;
}
.intv {
    position: absolute;
    width:33%;
    height:43%;
    overflow-y:scroll;
    top:100px;
    left:66px;
    display:flex;
    flex-wrap:wrap;
    align-content: flex-start;
    row-gap: 5px;
    column-gap: 5px;
}
.TV p {
      text-shadow: 1px 1px 5px #61caea, -1px -1px 5px rgb(104, 197, 223);
      font-family:VCR;
      top:51px;
      margin-left:18%;
      position:absolute;
}
.intv img {
    margin-top:3px;
    width:32%;
}
.favourites {
    width:35%;
    height:15%;
    position: absolute;
    overflow: auto;
    top:25%;
    right:10px;
    padding:30px 60px;
    background-repeat: no-repeat;
    background-size: contain;
    background-size: 100% 100%;
    background-image: url(/images/frame.png) 
}
.favourites p {
        color:#092853;
        font-size: 15px;
        line-height: 1.6;
}
.books {
    background-color: #fff;
    height:190px;
}
.books img {
    width:13%;
    padding-top:13px;
}
.musiccooltext {
position: relative;
}
#cd {
      animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}
#musicdog {
position:absolute;
top:1280px;
right:40px;
transform: rotate(4deg);
border-width: 10px;
border-style: solid;
border-image: url("https://file.garden/ZZ2PUl9MPilKgIvB/collection/borders/xnxzti-1.png") 8 fill round;

}
.mymusictaste {
    width:35%;
    height:13%;
    overflow: auto;
    position: absolute;
    top:73%;
    right:0px;
    padding:30px 60px;
    background-repeat: no-repeat;
    background-size: contain;
    background-size: 100% 100%;
    background-image: url(/images/frame.png) 
}
.mymusictaste p {
    font-size: 14px;
    color: #092853;
}
.funbox {
    border-bottom:3px solid rgb(38, 83, 11);
    border-top:3px dotted white;
    height:172px;
    display:flex;
    background:transparent url(/images/dandelions.png) repeat-x;
    background-position: center bottom;
    background-size:250px;
}
.funbox p {
    color:white;
    font-size:16px;
}
.likesbox {
    background-image: url(/backgrounds/cyanbg.gif);
    border:10px outset rgb(113, 237, 229);
    height: 240px;
    overflow:scroll;
}
.likesbox h3 {
    margin:2px;
    color:#004c68;
}
li {
  color:rgb(0, 62, 117);
    font-size:20px;
    font-family:Dyna;
    margin-bottom: 5px;
    margin-right:5px;
    font-size: 15px;
}
ul {
    padding-left:20px;
}
footer {
grid-row: 4 / 5;
grid-column: 1 / 4;
background: #182a8f;
background: linear-gradient(90deg,rgba(24, 42, 143, 0.202) 0%, rgba(97, 160, 255, 0.705) 50%, rgba(29, 41, 204, 0.35) 100%);
}
leftsidebar {
    padding-right:20px;
    grid-row: 3 / 4;
grid-column: 1 / 2;
height:max-content;
position:relative;
background:transparent url("https://blob.gifcities.org/gifcities/ATF6BJR37SZMKCYZLWTIBYVKYOCXCANQ.gif") repeat-y scroll 205px;
}
leftsidebar img {
    width:100%;
    object-fit: contain;
}
rightsidebar {
    height:max-content;
    padding-left:20px;
    grid-row: 3 / 4;
grid-column: 3 / 4;
background:transparent url("https://blob.gifcities.org/gifcities/ATF6BJR37SZMKCYZLWTIBYVKYOCXCANQ.gif") repeat-y scroll 0px 205px;
}
rightsidebar img {
    width:100%;
    object-fit: contain;
}
.stamps{
    display:flex;
    flex-wrap:wrap;
    align-content: flex-start;
    column-gap: 6px;
    row-gap:6px;
    width:210px;
    
}
@font-face {
    font-family: VCR;
    src: url(/fonts/VCR.ttf);
}

@font-face {
    font-family:Dyna;
    src: url(/fonts/DynaPuff-VariableFont_wdth\,wght.ttf);
}
@font-face {
    font-family:Irish;
    src: url(/fonts/IrishGrover-Regular.ttf);
}
@font-face {
    font-family:Delius;
    src: url(/fonts/Delius-Regular.ttf);
}

.subtitle {
    top:86px;
    left:33%;
    position:absolute;
    font-size: 13px;
    font-family: Dyna;
}
.twod {
    position:fixed;
    height: 200px;
    right: 20px;
    bottom:0px;
}
.intro {
     margin: auto;
  width: 50%;
  text-align:center;
  border:1px solid white;
  }
  #spacehouse {
    position:absolute;
    right:20px;
    top:150px;
  }
  .album {
    position: relative;
    width: 120px;
    background-color: black;
    color: black;
    z-index: 999;
  }

  .cd {
    position: absolute;
    width:118px;
    height:118px;
    right:3%;
    z-index: 800;
     animation: spin 4s linear infinite;
    transition: transform 0.3s ease;
  }

  .cd:hover{
    cursor: pointer;
    animation:pop 0.3s ease;
  }
.results p, .results h1 {
    font-family:verdana;
    font-size:20px;
    color:#0080c5;
    text-align:center;
  }
  

  @keyframes spin {
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  /* Responsive adjustments for larger screens */
  @media (min-width: 1600px) {
  .mainbox {
    max-width: 80%;
    grid-template-columns: 260px minmax(0, 1fr) 260px;
  }

  h1 {
    font-size: 120px;
  }

  p {
    font-size: 22px;
  }

  nav a {
    font-size: 32px;
    padding: 0 40px;
  }

  #me {
    width: 30%;
  }

  .general, .favourites, .mymusictaste {
    width: 45%;
    right: 5%;
    background-size: 100% 100%;
  }

  .intv img {
    width: 30%;
  }
}

/* For *really* big monitors */
@media (min-width: 2000px) {
  .mainbox {
    max-width: 70%;
  }

  h1 {
    font-size: 140px;
  }

  #me {
    width: 25%;
  }

  p {
    font-size: 24px;
  }
}