/* Colours used: 
    Whiteish: #eaebfe
    Light grey: b0b8ce
    Dark grey: #505a74
    Medium blue: #354c7c
    Dark blue: #022954*/

body {
  cursor: url("images/cursor.png"), auto;
  /* pointer: url("images/pointer.png"); */
  background-image: url("images/background.png");
  width: 100%;
  margin: auto;
  margin-top: 10px;
  margin-bottom:10px;
  height: 100%;
}

header  {
  background-image: url("images/headerbg.jpg");
  height: 150px;
  margin: auto;
  padding: 0px;
  border-width: 10px;
  border-style: solid;
  border-image: url("images/border.png") 20 round;
  border-radius: 10px;
  text-align: center;
  vertical-align: text-bottom;
}

#bigbox {
  background-color: white;
  border-width: 10px;
  border-style: solid;
  border-image: url("images/bigborder.png") 50 round;
  border-radius: 10px;
  width: 920px;
  margin: auto;
  padding-bottom: 20px;
  padding-right: 10px;
  padding-left: 5px;
  padding-top: 10px;
  overflow: hidden;
  height: auto;
}

#cinnamoroll {
  height: 170px;
  width: auto;
  margin-right: auto;
  position: absolute;
  left: 320px;
  top: 15px;
}

#updatelog {
  display: inline-block;
  margin-top: 30px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  width: 200px;
  height: 150px;
  overflow: auto;
}

#indexbox {
  border-width: 1px;
  height: 345px;
  border-color: black;
  border-style: inset outset outset inset;
  display: inline-block;
  width: 707px;
  margin-top: 30px;
  float: right;
  overflow: auto;
  padding: 2px;
}

#calendar {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  height: 189px;
  width: 200px;
  margin-top: 5px;
}

.button {
  background-image: url("images/buttons/navibuttons.png");
  display: inline-block;
  border: none;
  color: black;
  padding: 2px;
  text-align: center;
  height: 31px;
  width: 85px;
  margin: auto;
}

.button:hover {
  transition-duration: 0.5s;
  letter-spacing: 1px;
}

#navigation {
  width: 920px;
  height: auto;
  margin: auto;
  margin-top: 10px;
  margin-bottom: -20px;
  margin-left: auto;
  float: right;
  align-items: right;
}

#blinkiemarquee {
  height: 61px;
  padding: 2px;
  padding-top: 3px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 0px;
  border: 1px solid black;
  float: left; 
  width: 700px;
  margin-top: 5px;
}

#littlepngs {
  display: block;
  height: auto;
  float: left;
  border: 1px solid black;
  width: 200px;
  padding: 0px;
  margin-top: 5px;
  margin-right: 5px;
}

#littlepngs img {
  display: block;
}

#blinkiefooter {
  width: 915px;
  height: 20px;
  border: 1px solid black;
  float: left;
  padding: 2px;
  margin-top: 10px;
}

#chatbox {
  height: 200px;
  border: 1px solid black;
  width: 200px;
  margin-top: 10px;
  float: left;
}

#kindasmallerbox {
  border: 1px solid black;
  width: 710px;
  height: 150px;
  float: right;
  margin-top: 10px;
  margin-right: 1px;
}

#minipics {
  height: 236px;
  width: 236px;
  border: 1px solid black;
}

#buttons {
  overflow: auto;
  border: 1px solid black;
}

(`/* marquee */
.marquee {
  overflow: hidden;
  border:0;
  padding:0;
  
  /* default animations */
  --loop: infinite;
  --delay: 0s;
  --hover: unset;
}

.marquee:hover .marquee-guts {
  animation-play-state: var(--hover);
}

.marquee .marquee-guts.pausit {
  animation-play-state: paused;
}

/* scrollers */
.marquee > .marquee-guts
{
  display: block;
  width: fit-content;
  
  animation-fill-mode: both;
  animation-duration: var(--duration);
  animation-timing-function: linear;
  animation-iteration-count: var(--loop);
  animation-delay: var(--delay);
  
  /* default: .left */
  animation-name: scroll-left;
  white-space: nowrap;
}

/* animation name */
.marquee.up > .marquee-guts,
.marquee.down > .marquee-guts {
  animation-name: scroll-up;
  white-space: unset;
  width: 100%;
}

.marquee.alt > .marquee-guts {
  animation-name: alt-left;
  animation-direction: alternate;
}
.marquee.up.alt > .marquee-guts,
.marquee.down.alt > .marquee-guts {
  animation-name: alt-up;
}


.marquee.slide {
  --loop: 1;
}
.marquee.slide > .marquee-guts {
  animation-name: slide-left;
}
.marquee.slide.right > .marquee-guts {
  animation-name: slide-right;
  animation-direction: normal;
  float: right;
}
.marquee.slide.up > .marquee-guts {
  animation-name: slide-up;
}

/* to stay down */
.marquee.slide.down {
  display: flex;
  align-items: flex-end;
}
.marquee.slide.down > .marquee-guts {
  flex: none;
  animation-name: slide-down;
  animation-direction: normal;
}


/* direction */
.marquee.right > .marquee-guts,
.marquee.down > .marquee-guts {
  animation-direction: reverse;
}
.marquee.left.alt > .marquee-guts,
.marquee.up.alt > .marquee-guts {
  animation-direction: alternate;
}
.marquee.right.alt > .marquee-guts,
.marquee.down.alt > .marquee-guts {
  animation-direction: alternate-reverse;
}

.marquee-guts img {
  max-width: unset;
}


/* keyframes */
@keyframes scroll-left {
  0% {
    transform: translate( var(--p-offset) , 0);
  }
  100% {
    transform: translate( var(--s-offset) , 0);
  }
}
@keyframes scroll-up {
  0% {
    transform: translate(0, var(--p-offset) );
  }
  100% {
    transform: translate(0, var(--s-offset) );
  }
}

@keyframes alt-left {
  0% {
    transform: translate( var(--s-offset) ,0);
  }
  100% {
    transform: translate(0,0);
  }
}
@keyframes alt-up {
  0% {
    transform: translate(0, var(--s-offset) );
  }
  100% {
    transform: translate(0,0);
  }
}


@keyframes slide-left {
  0% {
    transform: translate( var(--p-offset) ,0);
  }
  100% {
    transform: translate(0,0);
  }
}
@keyframes slide-right {
  0% {
    transform: translate( var(--s-offset), 0);
  }
  100% {
    transform: translate(0,0);
  }
}

@keyframes slide-up {
  0% {
    transform: translate(0, var(--p-offset));
  }
  100% {
    transform: translate(0,0);
  }
}
@keyframes slide-down {
  0% {
    transform: translate(0, var(--s-offset));
  }
  100% {
    transform: translate(0,0);
  }
}`),

}