@font-face {
    font-family: soopafresh;
    src: url(/fonts/soopafre.ttf) format("truetype");
}

@font-face {
    font-family: minecraft;
    src: url(/fonts/Minecraft.ttf) format("truetype");
}

* {
    box-sizing: border-box;
  }

@keyframes gelatine {
    from, to { transform: scale(1, 1); }
    25% { transform: scale(0.9, 1.1); }
    50% { transform: scale(1.1, 0.9); }
    75% { transform: scale(0.95, 1.05); }
  }

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }

body {
    background-image: url('https://i.pinimg.com/736x/76/d5/f1/76d5f1da63448f66a923fef02e6caceb.jpg');
    background-repeat: no-repeat;
    background-size: 105%;
    padding: 0px;
}

.header {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: #f0e7d1;
    border-style: dashed;
    border-width: 3px;
}

.headerpic {
    width: 100%;
}

.row {
    background-color: #f0e7d1;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-color: #a24719;
    border-width: 3px;
    border-style: dashed;
    position: relative;

}

.flex {
    display: flex;
    position: relative;
}

.left {
    width: 30%;
    padding-left: 5%;
    padding-right: 0%;
}

.right {
    width: 70%;
    padding-left: 0%;
    padding-right: 1%;
}

h1 {
    font-family: soopafresh;
    color: #2185a5;
}

p {
    font-family: minecraft;
    color: #a24719;
}

h2 {
    font-family: minecraft;
    color: #a24719;
}

.glub:hover {
    animation: gelatine 0.5s infinite;
}

.lefttype {
    width: 44%;
    padding-left: 5%;
    padding-right: 1%;
}

.righttype {
    width: 44%;
    padding-left: 5%;
    padding-right: 1%;
}

.anatomy {
    border-style: dashed;
    border-color: #a24719;
    padding-top: 0%;
    width: 90%;
    border-radius: 5px;
}