/*
  specify the scroll x (or y) with the width (or height) of the images
  In this case, the image dimension is :
  width: 1920px;
  height: 808px;
*/

@font-face {
  font-family: omorifont; /* set name */
  src: url(https://mintymutt.neocities.org/omorifont.ttf); /* url of the font */}

@keyframes bgScroll {
  0% {
    background-position : 0px 0px
  }
  100% {
    background-position : 0px -1440px
  }
}

@keyframes autoScroll {
  0% {
    transform: translateY(0%);
  }
  50%{
    transform: translateY(-1500%);}
  100% {
    transform: translateY(0%);
  }
}


.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto auto;
  margin: 0.5em;
  gap: 0.5em;
}

.something{order:1; justify-self:left; align-self:start;}
.bojack{order:2; justify-self: center;}
.blinkies{order:3; justify-self: right; place-content: center;  height: 8em; overflow: hidden;}
.menu{order:4;}
.main{order:5;}
.ufo{order:6;}
.stuff{order:7;}
.footer{order:10; grid-column-start:4; grid-column: 1/span 3;}

.blinkies img{display: block; animation: autoScroll 20s linear infinite;}
.ufo img{width: 100%; height: 100%; object-fit: cover; }


.unfinished{ margin: 5px;
            padding:5px;
            font-size: 2rem;
            color:white;
            text-align: center;
             border: solid white;
             background-color: black;
             font-family: omorifont;}
             
             

body {
  cursor: url('cursors/basil.png') auto;
  
  display:block;
  background-size: cover;
  
  
  background-image:url("https://mintymutt.neocities.org/headspace.png");
  animation: bgScroll 40s linear infinite;
  
  margin:0;
  padding:0;
  
}