html, body {
    margin: 0px;
    padding: 0px;
    
}

html {
    background-size: 40px 40px;
    background-position : left 0px top -15px;
    background-color: rgba(90,184,205,1);
    background-image: 
        linear-gradient(to right, #6cc8ce 4px, transparent 1px),
        linear-gradient(to bottom, #6cc8ce 4px, transparent 1px);
    
}

body {
    transform: scale(.8,.8);
    width: 86%;
    left: 6em;
    position: absolute;
    top: -8em;
}

img {
    position: relative;
    z-index: 1;
    
}

h1 {
    position: relative;
    color: white;
    font-size: 3em;
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
    padding: .25em 3em;
    border-radius: 2em;
    margin-left: 5em;
    margin-right: 5em;

}

.textbox {
    position: relative;
    color: white;
    border-style: solid;
    border-color: white;
    border-width: .1em;
    outline: black solid .25em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;

    background-color: #413d2c;
    background-image: linear-gradient(to bottom, #413d2c, #1c1a19);
    margin-left: 5em;
    margin-right: 5em;
}

.center {
    margin: auto;
    position: relative;
    text-align: center;
    
}

.rarity {
    margin-left: 1em;
    margin-right: 1em;
    max-width:90%;
    max-height:90%;
}

.back {
    position: absolute;
    top: 0px;
    left: 0px;
    max-width:90%;
    max-height:90%;
}

.grid {
    display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr) ); 
        
  }


.meow {


}

@media (max-width : 800px) {
    h1 {
        font-size: 24px;

    }
    .back {
        transform: scale(.5, .5);
        margin-top: -30px;
        margin-left: -30px;
    }

    .textbox {
        padding-left: 1em;
        padding-right: 1em;

    }
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
      }
    
}

@keyframes MoveUpDown {
    0%, 20%, 50%, 80%, 100% {transform: translateY(15);} 
   40% {transform: translateY(-20px);} 
 
  }