html {
    background-color: #c1a79e;
    background-image:url("pics/backgrounds/tinybunnybg.gif");
}

a{
    color: #072c07;
}

/* Cute Sprout Pot - https://www.cursors-4u.com/cursor/cute-sprout-pot */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/cute-sprout-pot-d577fe14-32.webp') 32 32, auto !important;
}
/* End www.Cursors-4U.com Code */





/* main */

.container {
    max-width: 1000px;
    background-color: antiquewhite;
    border: #3c2c1d, 5px, dashed;
    border-radius: 25px;
    margin: auto;
    padding: 5px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 200px minmax(0, 1fr);
}

.title img {
  max-width: 800px;
  align-content: center;
}

.bigscroll {
    width: auto;
    height: 500px;
    line-height: 3em;
    overflow: auto;
    padding: 10px;
    margin: 5px;
    border: 2px dashed #3c2c1d;
    border-radius: 25px;
    line-height: 20px;
    font-family: monospace;
    background-color: white;

}

.about, .entries, .piclog {
    max-width: 200px;
    max-height: 200px;
    font-family: monospace;
    background-color: white;
    border: dashed #3c2c1d 2px;
    border-radius: 25px;
    padding: 8px;
    margin: 5px
    
}



.piclog {
    max-width: 200px;
    height: 150px;
    overflow: auto;
    padding: 8px;
    justify-items: center;
    border: 2px dashed #3c2c1d;

}

.piclog img {
  margin: 15px;
}

img {
    border-radius: 20px;
    
}

h3 {
    text-align: center;
    
}

/* navigation */


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ffffff;
}

ul li {
  float: left;
}

ul li a {
  display: block;
  color: #3c2c1d;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #e3cdc5;
}



/* 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;

}




/* grid */

.title {
    grid-column: 1 / 3;
    grid-row: 1 / 1;
}

.marquee {
    grid-column:  1 / 3;
    grid-row: 2 / 2;
    
}

.nav {
    grid-column: 1 / 3;
    grid-row: 3 / 3;
}

.main {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    
}
.side {
    grid-column: 1 / 1;
    grid-row: 4 / 5;
    
}

.footer {
    grid-column: 1 / 3;
    grid-row: 5 / 5;
}