@import url("https://use.typekit.net/oib2nnq.css");

body {background:#B24B4B;
overflow: hidden;}

h1 {font-family: "panel-sans", sans-serif;
font-weight: 900;
font-style: normal;
color: white;
font-size: 70px;
max-width: 400px;
grid-column: 1/2;
margin-left: 100px;
margin-bottom: 0px;}

.rainbow {display:flex; flex-direction: row;
  grid-column: 3/4;
  margin-top: -50px;
  margin-right: 50px;
}

.red {background-color: #B24B4B; 
width: 70px;
height: 200px;
animation: slideup 1s forwards;}

.red:hover {animation: slidedown 1s forwards;}

@keyframes slidedown {
  0% {transform:translatey(0%)}
    100%{transform:translatey(10%)}
}
@keyframes slideup {
  0% {transform:translatey(10%)}
    100%{transform:translatey(0%)}
}


.orange {background-color: #E58F48; 
width: 70px;
height: 200px;}
.yellow {background-color: #EDE972; 
width: 70px;
height: 200px;}
.green {background-color:#7EAF4E;
width: 70px;
height: 200px;
 animation: slideup 1s forwards;}

.green:hover{animation: slidedown 1s forwards;}


.blue {background-color: #3B5789; 
width: 70px;
height: 200px;}
.purple {background-color: #5C3668;
width: 70px;
height: 200px; animation: slideup 1s forwards; }
.purple:hover{animation: slidedown 1s forwards;}

h2 {font-family: panel-sans, sans-serif;
font-weight: 900;
font-style: normal;
max-width: 200px;
font-size: 48px;}

p{color: white;font-family: panel-sans, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 37px;
column-count: 2;}

.main{max-width: 1130px;
margin-left: 270px;}

.header {display: grid;
grid-template-columns: 1fr 2fr 1fr;}

.banner {background-image: url("images/homeb.png");
width: 298px;
height: 152px;
background-size: 290px;
background-repeat: no-repeat;
margin-bottom: -88px;
margin-top: -42px;
margin-left: -76px;
animation:slideout 1s ease-in-out backwards;}

@keyframes slideout {
  0% {transform:translatex(20%)}
    100%{transform:translatex(0%)}
}

.banner:hover {animation: slidein 1s ease-in-out forwards;}

@keyframes slidein {
  0% {transform:translatex(0%)}
    100%{transform:translatex(20%)}
}



.dino {z-index: -1;
position: absolute;
left: -192px;
top: 376px;
animation: dino 2s infinite ease-in-out alternate;}

@keyframes dino {0%{transform:rotate(0deg)}
  100%{transform:rotate(10deg)}}

.tail {
  position:absolute;top: 432px;
right: 0px;
z-index: -1;}