body {
    background-image: url("../ass/snowcity.jpg");
    background-size: cover;    /* Choose: cover / contain / 200% / etc */
    background-repeat: stretch;
    image-rendering: pixelated;
    image-rendering: crisp-edges;  /* fallback */
}




header {
width: 70;
margin:auto;
margin-top: -10%;
margin-bottom: 7%;
text-align: center;


animation-name: floating; 
animation-duration: 3s; 
animation-iteration-count: infinite; 
animation-timing-function: ease-in-out;
} 

@keyframes floating { 
0% { 
transform: translate(0,  0px); 
} 

50%  { 
transform: translate(0, 15px); 
} 

100%   {
transform: translate(0, -0px); 
} 
}     
    
.container {
    width: 80%;
    margin: auto;
    margin-left: 13%;
    margin-top: 5%;
}
.xmasbutton {
    width: 30%;
    margin: auto;
    margin-bottom: -90px;
}

h1 {
    font-family: cursive;
    color: aliceblue;
}


.icons {
    width: 32%;
}


.icons:hover{
  transition: all 0.5s;
 scale: 1.1;
filter: drop-shadow(0 0 10px #ffb6ff) drop-shadow(0 0 20px #ffb6ff);
}     
    

.bubberfly {
    width: 6%;
}

.miniheader {
     display: flex;
    justify-content: space-between; /* left, center, right spacing */
    align-items: center;   
    text-align: center;        /* vertically align text/images if needed */
    width: 100%;                   /* full width container */
    padding: 0 0%;     
    margin: auto;       
}

.miniheader h3{
    margin: 0;
    color:aliceblue;
}

#sideleft{
    float: left;
    width: 20%;
    height: 80vh; /* full viewport height */
    margin-right: -30%;
    
}

#sideright{
    float: right;
    width: 20%;
    height: 80vh; /* full viewport height */
    margin-left: -30%;
   
}



lol {}
  
  lol,
  .img2 {
    /* album's cover image u can change the size! */
    position: relative;
    width: 100px;
    height: 100px;
    background-color: black;
    color: black;
    z-index: 999;
  }

  .img1 {
    /* cd image u can change the size too */
    position: absolute;
    width:auto;
    height:90px;
    left: 65px;
    z-index: 800;
    -webkit-animation: spin 2s linear infinite;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
  }

  .img1 hover {
    cursor: help;
  }

  @-moz-keyframes spin {
    100% {
      -moz-transform: rotate(360deg);
    }
  }

  @-webkit-keyframes spin {
    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @keyframes spin {
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  .img1:hover {
    /* this makes the cd stop spinning when hovering! */
    -webkit-animation: pop 0.3s ease;
  }

  h2 {
    position: relative;
    margin-right: -100px;
    margin-bottom: -100px;
    font-size: smaller;
  }