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

body {background:#7EAF4E;
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;
padding: 2px;}

.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%)}
}

.backgrounds {z-index: -1;}

.g {position: absolute;
top: 226px;
right: -94px;
animation: inout ease-in-out alternate infinite 3s;}

.a {z-index: -1;
  position: absolute;
top:400px;
left:-77px;
animation: inout ease-in-out alternate infinite 2.5s;
}

.m {z-index: -1;
position: absolute;
top: 50px;
left: 636px;
animation: inout ease-in-out alternate infinite 4s;}



.f {z-index: -1;
position: absolute;
bottom: 30px;
left: 755px;
animation: inout ease-in-out alternate infinite 2s;}


@keyframes inout {
  0% {scale: 60%; opacity: 0%;}
  100% {scale: 100%; opacity: 100%;}
}