/*don't look at my code idk what i'm doing*/
html{
  cursor: url("/mm.gif"), auto;
  box-sizing:border-box;
}


@media only screen and (max-width: 768px) {
  
}


@media only screen and (min-width: 0px) {
  
body{
  background-color: #FFCADD;
  background-image:url(/kirbybg_upscaled.png);
  background-repeat: repeat;
  background-size:cover;
  background-attachment: fixed;
  color: pink;
  text-align:center;
  margin: 0 auto;
  height:100vh;
  }

 p{
  font-size:18px;
 }
 
 h1{
  font-family: "Cheri", arial, sans-serif;
  font-size:80px;
  line-height:100px;
  margin-top:40px;
  background-image: linear-gradient(135deg, rgba(253,88,204,.9) 20%, rgba(254,173,87,.9) 40%, rgba(195,254,87,.9) 60%, rgba(87,251,254,.9) 80%); 
  background-clip: text;
  color: transparent;
  filter: drop-shadow(2px 2px #fff);

 }
 
 h2{
  font-family:  "cartographer", arial, sans-serif;
  font-size:20px;
  color: #2cb2f5;
  text-align:left;
  padding: 0 0 10px 15px;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #0f92d4;
 }
 
 h2:after {
  content: ' \2740';
}

 a{
   color:#0c73a7;
  font-size:18px;
  text-decoration:none;
  display: inline-block; 
  transition: .2s ease; 
 }

 a:hover {
  color:#90e3fc;
  cursor: url("/mmh.gif"), pointer;
  transform: translateY(-20%);
 }
 
 s{
   color:#0c73a7;
 }
 
  .grid-container{
  grid-template-columns:17em 45em 15em;
  grid-template-rows: 150px 50px 600px 600px 100px ;
  margin-top:-10px;
  gap:0px;
  display:grid;
  justify-content:center;
  margin:0 auto;
  width:58.5%;
  height:100%;
  line-height:1em;
  color:#391470;
  box-sizing:border-box;
  font-family: "rainy", arial, sans-serif;
 }
 
  .header{
  grid-column: 1 / 4;
  grid-row: 1 / 1;
  overflow:hidden;
 }
 
 .something{
  grid-column: 2 / 4;
  grid-row: 2 / 2;
  border:2px #fc74c1 solid;
  border-radius: 0px 20px 0 0;
 }


.stuff{
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  text-align:center;
  padding:15px 20px;
 }

.stuff a{
  font-size:28px;
  font-family:"fluffykitten";
 }
 
 .stuff a:hover{
   color:#90e3fc;
 }

/* main section */ 
 .main{
  grid-column:2 / 4;
  grid-row: 3 / 6;
  grid-template-columns: 66% 33%;
  grid-template-rows: repeat(10, 10%);
  column-gap:10px;
  display:grid;
  overflow:hidden;
  position:relative; 
  backdrop-filter: blur(10px);
  padding:10px;
  border-radius: 0 0 20px 0;
  box-shadow: 15px 5px 30px 0 rgba(31, 38, 135, .7);
 }
 
 .main p{
   font-size:20px;
 }

 
 .hello{
   z-index:3;
   grid-column: 1;
   grid-row: 1 / 4;
   line-height:15px;
   overflow:hidden;
 }
 
 .hellotxt{
   background: rgba(247, 163, 210, 0.5);
   border-radius:15px 15px 10px 10px;
   background-image:url(https://foollovers.com/mat/t-frame/frame09-c/back01.png),url(https://foollovers.com/mat/t-frame/frame09-c/back01.png);
   background-repeat:no-repeat,no-repeat;
   background-position:left top,right bottom; 
 }


 .mybutton{
  z-index:3;
 grid-column: 2;
   grid-row: 1;
   
 }
 
 .update{
  grid-column: 2;
  grid-row: 3 / 5;

 }
 
 .middle{
   grid-column: 1;
   grid-row: 4;
   margin-top:-15px;
 }
.neighbors{
   z-index:3;
   grid-column: 2;
   grid-row: 6;
   
 }
 
 .neighborscontent{
   padding:10px;
   border-radius: 0 0 10px 10px;
   background-color:rgba(97, 202, 250, 0.5);
 }
 
 .aside{
   border-radius: 0 0 10px 10px;
   background-color:rgba(247, 168, 64, 0.5);
 }
 
 .green{
   z-index:3;
   grid-column:1;
   grid-row: 6 / 9;
   text-align:left;
 }
 
 .greencontent{
   border-radius: 0 0 10px 10px;
   background-color:rgba(116, 252, 88, 0.5);
 }

 .sanriobb{
   grid-column:2;
   grid-row: 7;
 }


 .jesus{
   grid-column: 1;
   grid-row:10;
}

.computerbob{
  grid-column: 2;
  grid-row:10;
  margin-top: -190px;
  margin-left:-40px;
  z-index:3;
}
 
  .wii{
   margin-top:5px;
 }
 
 #wii{
   z-index:999;
   margin: 0 auto;
   overflow:Scroll;
 }

 .updatecontent{
  background-color:rgba(252, 225, 86, 0.5);
  overflow:scroll;
  overflow-x:hidden;
  margin:0 auto;
  height: 100%;
  border-radius: 0 0 10px 10px;
  -ms-overflow-style: none; 
  scrollbar-width: none;  
 }
 
 .update::-webkit-scrollbar {
  display: none;
} 

 #littlechristine{
  float:left;
  width:30%;
  height:auto;
 }

 #text{
  position:relative;
  padding-right:10px;
  padding-left:10px;
 }
 
 /*end main*/

 #flower{
   width:20px;
   height:20px;
 }

 .nav{
  grid-row: 2 / 6;
  overflow:hidden;
  text-align:left;
  background: rgb(77,228,255);
  background: linear-gradient(0deg, rgba(77,228,255, 80%) 38%, rgba(183,168,253, 80%) 67%, rgba(181,247,149, 80%) 79%, rgba(253,162,133, 80%) 98%);
  text-decoration:none;
  backdrop-filter: blur(5px);
  padding-top:10px;
  box-shadow: -5px 5px 30px 0 rgba(31, 38, 135, .7);
  
 }
 
 .nav a, .nav s{
  line-height:1.5em;
  font-family:"fluffykitten", "poetsen-one", sans-serif;
  font-size:22px;
 }
 
 
 .nav h2{
  text-align:center;
 }
 
 ul > li{
  display:block;
   padding-left:1em;
 }
 
 ul{
  padding:0;
  margin:0;
 }
 
 li{
  margin: 0 6px 6px 6px;
  padding-top:0.2em;
  background: rgb(213,255,254);
  -webkit-box-shadow: 2px 2px 2px 0px rgba(65,137,176,1);
  -moz-box-shadow: 2px 2px 2px 0px rgba(65,137,176,1);
  box-shadow: 2px 2px 2px 0px rgba(65,137,176,1);
  border-radius:10px;
 }
 
 #rb{
   text-align:center;
   font-size:30px;
 }
 
 #comments{
   padding-left:5px;
 }
 
    
 
 #gd, #drank, #hk81, #luka, #counter{
  text-align:center;
  display: block;
  margin-left: auto;
  margin-right: auto;
 }

.main2{
  grid-row: 3 / 6;
  grid-column: 3 / 4;
  border:2px #fc3da9 solid;
  background: rgb(134,206,254);
  background: linear-gradient(0deg, rgba(134,206,254, 60%) 38%, rgba(230,168,253, 60%) 65%, rgba(255,88,216, 60%) 91%); 
 }
 

 .footer{
  grid-column: 1 / 4;
  grid-row: 6 / 6;
  text-align: center;
  justify-content:center;
  display:flex;
 }
 
 #patrick{
   right:30px;
   top:0px;
   width:10%;
 }

#bondiblue{
  right:20px;
  bottom:2px;
  width:20%;
}

#strawberry{
  left:20px;
  bottom:25px;
  width:15%;
}

#carmella{
  left:-80px;
  top:120px;
  z-index:-1;
  width:29%;
 }

#frostina{
  right:5px;
  top:100px;
  width:21%;
  z-index:-1;
 }
 
 #bottombob{
   left:150px;
   bottom:0px;
   width:20%;
 }
  
 #carmella, #frostina, #bondiblue, #strawberry, #patrick, #bottombob{
   position:fixed;
 }
 
 #bondiblue, #strawberry, #bottombob, #patrick{
   z-index: 999;
 }

#desk, #mobilelist, #comments2, .buttons2{
   display:none;
 }



}



@media only screen and (max-width: 1700px) {
 #carmella{
   width:25%;
 }
 
 #frostina{
   width:18%;
 }
 
 #strawberry, #bondiblue{
   display:none;
 }
 
 #bottombob{
   left:0px;
 }
 
 .grid-container{
   grid-template-columns: 15em 35em 18em}
}




@font-face{
font-family:'BILLO';
src: url(/BILLO___.TTF); 
}

@font-face{
font-family:'fluffykitten';
src: url(/fonts/FluffyKitten.ttf); 
}


@font-face{
font-family:'rainy';
src: url(/rainyhearts.ttf);
}

@font-face {
font-family: poetsen-one;
src: url(https://dl.dropbox.com/s/qaj1ln02jlrxf64/PoetsenOne-Regular.ttf);
}

@font-face {
font-family: cartographer;
src: url(/fonts/cartographer.ttf);
}

 ::-webkit-scrollbar {
  width: 3px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #7e34a3;
}

::-webkit-scrollbar-thumb:hover {
  background: #7e34a3;
} 


@keyframes marquee {
  from { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}

@keyframes marquee2 {
  from { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}



   /*.buttons{
  grid-column-start:1;
  grid-column-end:4;
  grid-row-start:6;
  grid-row-end:6;
  display:flex;
  align-items:center;
  overflow:visible;
  justify-content:space-between;
 } */