html {
     
     background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 156, 0.7)), 
                url('superstars.gif');
     background-attachment: fixed;
    background-size: 15%;
    image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  overflow-x: hidden;
  
}
 
p {

    font-size: 20px; 
}

h1 {
     font-family: "Lacquer", system-ui;
    font-size: 60px;
    Color: rgb(63, 235, 25);
    -webkit-text-stroke: 6px  rgb(226, 5, 160);
    paint-order: stroke fill;
}

h2 {
   font-family: "Inknut Antiqua", serif;
  font-weight: 600;
  font-style: normal;
  color: rgb(210, 249, 255);
  font-size: 40px;
  -webkit-text-stroke: 8px  rgb(0, 17, 48);
  paint-order: stroke fill;
}

#introanim {
    top: 0px;
    left: 0px;
    width: 250%;
    height: 250%;
    position: fixed;
   
    animation: reveal 4s linear normal;
    animation-fill-mode: forwards;

    
}

.container {
    margin-left: 10%;
    padding: 10px;
     margin-right: 10%;
    background-color: transparent;
    border-color: transparent;
    display: grid;
    grid-template-areas: 
    "header header"
     "intro intro"
     "gifts  prizes"
     "seasons seasons"
     "burrow burrow";
     grid-template-columns: 1.5fr 2fr;
    
}

.deco{
    position: absolute;
    right: 30px;
    top: -30px;
}


.div1 {
    color: rgb(255, 65, 169);
    margin: 20px;
    padding: 50px;
    position: relative;
    border-radius: 10%;
    border: 8px solid rgb(237, 22, 180);
    background-color: rgb(5, 0, 58);;
}

.package {

    position: absolute;
    width: 300px ;
    height: 300px;
    background-size: 110%;
   
    
}

.package:hover {
    width: 470px;
    height: 470px;
    background-size: 100%;
 z-index: 69;
  /* animation-name: reveal ;
    animation-timing-function: linear;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-direction:normal ;
   
    */
}

.throughout {
    position: absolute;
    width: 1300px;
    left: -100px;
}

.header {
    padding: 20px;
    /* position: relative; */
    background-image: linear-gradient(red,green);
    grid-area: header;
    background-repeat:no-repeat;
    background-image: url("XYSHRINE.png");
    background-size: 100%;
    height: 300px;
}


#specificdumbidtomaketextsmallerforonespecificdivdespitethefactthaticouldjustwriteastyle {
    font-size: 20px;
    position: relative;
    -webkit-text-stroke: 4px black;
    top: -30px;
}

#gifts {
    grid-area: gifts;
    border-color: rgb(13, 205, 10);
    background-color: rgb(147, 5, 5);
    color: rgb(13, 205, 10); 

}

#presents {
     position: relative;
    grid-area: prizes;
     display: grid;
    grid-template-areas:
    "gift1 gift2"
    "gift3 gift4"
    ;
    grid-template-columns: 1fr 1fr;
    
}

#seasons {
    grid-area: seasons;
    animation: change 17s linear infinite normal;
    height: 700px;
    border: 8px solid rgb(36, 0, 0);
    padding-top: 10px;
}

#intro {
    position: relative;
    grid-area: intro;
}

#flowers {
    position: absolute;
    width: 90%;
    left: 5%;
    top: -13%;
}

#texts{
    position:absolute;
    width: 20%;
    right: 10%;
    top: 70%;

}

#burrow {

    margin-top: 100px;
    position: relative;
    right: 400px;
    grid-area: burrow;
    width: 160%;
      height: 800%;
    background-color: rgb(92, 50, 19);
  
    background-image: url("ourburrow.png");
    background-size: 60%;
    background-repeat: no-repeat;
    background-position-x: 50%;
}


#xygift {
    width: 300px;
   
}

#gift1 {
     background-image: url("xygift.gif");
    grid-area: "gift1";
    top: 150px;
    left: 140px;
    transform:translate(-50%,-50%);
}

#gift1:hover {
    background-image: url("insgift.png");
}

#gift2 {
    background-image: url("xygift(1).gif");
    grid-area: "gift2";
    right: 140px;
    top: 150px;
  
    transform:translate(50%,-50%);
}

#gift2:hover {
    background-image: url("insgift1.png");
}

#gift3 {
     background-image: url("xygift(2).gif");
    grid-area: "gift3";
    bottom: 150px;
    left: 140px;
   
    transform:translate(-50%,50%);
}

#gift3:hover {
    background-image: url("insgift2.png");
}

#gift4 {
     background-image: url("xygift(3).gif");
    grid-area: "gift3";
    bottom: 150px;
    right: 140px;

     transform:translate(50%,50%);
}

#gift4:hover {
    background-image: url("insgift3.png");
}



/* @keyframes reveal {
    0%{ width: 470px; }
    100%{ width: 470px;}
} */


@keyframes change {
    0%  { background:  #c1bdff;}
    25% { background:   #82ffa1;}
    50% { background:  #ffd26a;}
    75% { background:  #ff8a63;}
    100%  { background:  #c1bdff;}
}


@keyframes reveal {
0% {background-color: rgba(255, 255, 255, 0.975); height: 200%}
99% {background-color: rgba(0, 0, 0, 0); height: 200%}
100% {height: 0%}
}