/* background and links */
html {
    background-color: #23291c;
    background-image: url(pics/backgrounds/homebackground.png);
    
}

a {
    color:#23291c;
}
a:hover {
    color: #8a9b75;
}


/* Red Snail - https://www.cursors-4u.com/cursor/red-snail */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/red-snail-c95ba663-32.webp') 32 32, auto !important;
}
/* End www.Cursors-4U.com Code */





/* Marquees */
@keyframes scroll-r2l {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.scroll-r2l {
  animation: scroll-r2l 30s linear infinite;
}

.marquee {
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    box-sizing: unset;
    width: auto;
    
}

.marquee-content {
  display: flex;
  flex-shrink: 0;
  height: 100%; /* This line is extremely important to prevent bugs on some browsers such as FireFox */
  min-width: 100%;
  position: relative;
  
}

/* Changes to this class will only affect the children
of the marquee-items, and not all of their descendants.
Make changes here if you want spaces in-between the
marquee items or other effects and styles!*/
.marquee-content > * {
  margin: 0;

}

/* Main */



img {
    display: block;
    
    max-width: 100%;
}

#todolist {
    list-style: circle;
}


ul {
    list-style-type:circle;
    justify-self: left;
}

.title {
    justify-self: center;
    max-width: 800px;
}



.container {
    background-color: #556246;
    border: dashed, 3px, #4f493f;
    border-radius: 20px;
    font-family: monospace;
    max-width: 1200;
    max-height: 780px;
    padding: 3px;
    overflow: auto;
    display: grid;
    justify-self: center;

}


}

.column1 {
max-width: 200px;
position: sticky;
top: 0%;
    
   
}

.main {
    
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    
    
}


.column4 {
    max-width: 200px;
}

/* user box */

.user {
    max-height: 250px;
    overflow:hidden;
    
    
}


#krobus {
    justify-self: center;
    max-block-size: 90px;
    border:dashed 3px #9d8131;
}

#info {
    justify-self: center;
}

.status {
   list-style-type:none;
}


/* left column */

#sticky {
    position: sticky;
    top: 0%;
}


.user, .navbox {
    background-color: antiquewhite;
    border: dashed, 3px, #9d8131;
    border-radius: 20px;
    padding: 8px;
    margin: 4px;
    
}

.navpics {
    justify-self: center;
}


/* mid */

.about,  .updates {
    background-color: #faebd7;
    border: dashed, 3px, #9d8131;
    border-radius: 20px;
    max-height: 335px;
    padding: 8px;
    margin: 4px;
    overflow: auto;
    
}

#buttons {
    background-color: antiquewhite;
    padding: 10px;
    
   
}


.marquee {
    width: auto;
    padding: 3px;
    margin: 5px;
}

.fun {
    background-color: antiquewhite;
    border: dashed, 3px, #9d8131;
    border-radius: 20px;
    max-height: 350px;
    padding: 10px;
    margin: 4px;
    
}

.art {
    overflow: auto;
    background-color: antiquewhite;
    border: dashed, 3px, #9d8131;
    border-radius: 20px;
    max-height: 430px;
    padding: 10px;
    margin: 4px;
    
    
}

.art img {
    border: solid;
    max-width: 90%;
    justify-self: center;
    margin-top: 10px;
    
}

.fun {
    overflow: auto;
}





.fanlistings {
    background-color: antiquewhite;
    border: dashed, 3px, #9d8131;
    border-radius: 20px;
    padding: 4px;
    margin: 4px;
    max-height: 100px;
    
}

.userbuttons {
   background-color: antiquewhite;
    border: dashed, 3px, #9d8131;
    border-radius: 20px;
    padding: 4px;
    margin: 4px;
    display: flex;
    flex-wrap: wrap;
    

}


.pixelfriends  {
    background-color: antiquewhite;
    border: dashed, 3px, #9d8131;
    border-radius: 20px;
    padding: 4px;
    margin: 4px;
    

    
}

.pixelfriends img {
    display: inline;
}




.music {
    background-color: antiquewhite;
    border: dashed, 3px, #9d8131;
    border-radius: 20px;
    padding: 10px;
    margin: 4px;
    overflow: auto;
    max-height: 250px;
}

.changelog img {
    max-height: 100px;
    margin-left: 30px;
}

.about, .updates, .funlinks {
    overflow: auto;
}

/* resources */

#resources, #faves, #recs {
    background-color: #faebd7;
    border: dashed, 3px, #9d8131;
    border-radius: 20px;
    max-height: 800px;
    overflow: auto;
    padding: 10px;
    margin: 4px;
}


#faves, #recs {
    
    justify-content: center;
}

/* grid */

.column1 {
    grid-column: 1 / 1;
    
}

.main {
    grid-column: 2 / 2 ;
}
    
.column4 {
    grid-column: 3 / 3;
}