h10 {
  font-size: 40px;
  color:Blue;
}

body {
    /*stop the animatoin from jumping and have a perifct loop.*/
  
    background-color: black;
    color: lightgray;
    text-align: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    position: relative;
    image-rendering: pixelated;
    /*background-repeat: no-repeat;*/
}
        .background {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: -1;
          background-image:  url("elements/backgroundsnow.png");
        }
        
        .background--1 {
          background-size: auto;
          animation: moveBackground1 10s linear infinite;
        }
        
        .background--2 {
          background-size: 128px;
          animation: moveBackground2 10s linear infinite;
        }
        
        .background--3 {
          background-size: 192px;
          animation: moveBackground3 10s linear infinite;
        }
        
        .background--4 {
          background-size: 256px;
          animation: moveBackground4 10s linear infinite;
        }
        
        .background--5 {
          background-size: 320px;
          animation: moveBackground5 10s linear infinite;
        }
        
        @keyframes moveBackground0 {
        
          0% { background-position: 0px 0px; }
        
          100% { background-position: 0px 0px; }
        }
        
        @keyframes moveBackground1 {
        
          0% { background-position: 0px 0px; }
        
          100% { background-position: -25px 100px; } 
        }
        
        
        @keyframes moveBackground2 {
        
          0% { background-position: 0px 0px; }
        
          100% { background-position: -50px 200px; } 
        }
        
        
        @keyframes moveBackground3 {
        
          0% { background-position: 0px 0px; }
        
          100% { background-position: -77px 300px; } 
        }
        
        
        @keyframes moveBackground4 {
        
          0% { background-position: 0px 0px; }
        
          100% { background-position: -100px 400px; } 
        }
        
        
        @keyframes moveBackground5 {
        
          0% { background-position: 0px 0px; }
        
          100% { background-position: -125px 500px; } 
        }
        
        .welcome {
            width:fit-content;
            display: flex;
            align-items: center;
            justify-content:center;
            padding:20px;
            background:purple;
            margin: 0 auto;
        }
        
        .pixlated {
            image-rendering: pixelated;
        }
        
        .butfab {
            display: inline-block;
            position: relative;
            height: 250px;
            transition: transform .5s ease-in-out;
        }
        
        .butfab:hover {
            transform: translateY(50px) ;
        }
        
        .headfabric {
            position: relative;
            width: 100px;
        }
        
        .hedfabtxt{
            font-size: 25px;
            position: absolute;
            rotate: 90deg;
            text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
            color: orange;
            top: 35px;
            left: 0;
            right: 0;
        }
        
        .headbutton {
            position: absolute;
            display: block;
            bottom: 0;
            left: 0;
            right: 0;
            font-size: larger;
            cursor: pointer;
            transition: transform .5s ease-in-out;
        }
        
        .headbutton img {
            display: cover;
        }
        
        .headbutton:hover{
            transform: rotate(45deg);
        }
        
        
        .footer {
            background: url('elements/snowfooter.png') repeat-x;
            width: 100%;
            height: 78px;
            margin-top: auto;
        }