
main > section:nth-of-type(1){
	display:grid;
  	grid-auto-columns:21em;  
	grid-template-rows:min-content 4em 12em ;
	place-content: center;

	font-family: Absolut,arial,sans-serif;
	text-align:center;
	text-transform: uppercase;
	color:var(--blue);
	background-image: url("../images/BornToRemixWithCardboard.png");
	width: 100%;
}

main > section:nth-of-type(1) h2{
	display: grid;
	grid-row-start: 1;
	grid-column-start: 1;
	
	font-size: 4.5em ;
	color:var(--blue);
	line-height: 80%;
	text-align: center;	
	margin-top: .3em;
	
}

main > section:nth-of-type(1) em{
	font-family: AbsolutHandWritten,arial,sans-serif;
}
main > section:nth-of-type(1) em{
	font-family: AbsolutHandWritten,arial,sans-serif;
}

main > section:nth-of-type(1) h3{
	display: grid;
	grid-column-start: 1;
	grid-row-start: 2;
	
	font-size: 1.4em;
	line-height: 80%;
	margin: .7em 2.9em;
}

main > section:nth-of-type(1) a{
	align-self: start;
	justify-self: center;
	grid-column-start: 1;
	grid-row-start: 3;
	cursor: pointer;
	font-family: Absolutbold,arial,sans-serif;
	font-size: .6em;
	color:var(--white);
	background-color:transparent;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: .1em .1em .3em var(--Shadow-color);
	border:none;
	padding: .4em 0;
	width:20%;
}

main > section:nth-of-type(1) a:hover{
	scale: 1.2;
	background-color: var(--blue);

}

main > section:nth-of-type(1) a:focus{
	scale:1.2;
	color: var(--blue);
	background-color: var(--white);  
}
main > section:nth-of-type(1) img{
	z-index:100;
	grid-column-start: 1;
	grid-row-start: 1;
	grid-row-end: 4;
	justify-self:end ;
	align-self: end;
	width: 6em;
}

main > section:nth-of-type(1) img:hover{
	scale: 1.15;
	transform: translate(0 -.7em);
	transition: .6s;

}

main > section:nth-of-type(2){
	display:grid;
	grid-row-start: 1;
	grid-column-start: 1;
	position: relative;
	z-index: 100;
	
	font-family: Absolut,arial,sans-serif;
	color:var(--whiteCollab);
	text-align:center;
}

main > section:nth-of-type(2) img{
	width: 100%;
}


main > section:nth-of-type(2) p{
	position: absolute;
	left:1em;
	right:1em;
	bottom:7em;

	font-size: .7em;
	font-family: Absolutnormal,arial,sans-serif;
}

main > section:nth-of-type(2) h2{
	position: absolute;
	left:.5em;
	right:.5em;
	bottom: .4em;

	font-family: Absolut,arial,sans-serif;
	font-size: 2.5em;
	line-height: 80%;
	text-transform: uppercase;
   }

   main > section:nth-of-type(2) h2::first-line{
	font-family: Absolut,arial,sans-serif;
	text-transform: uppercase;
   }

   main > section:nth-of-type(3){
    display: grid;
   
   }

   @keyframes text-animation {
	0%{
		transform:rotate(-8deg);
	}
	50%{
		color: var(--blue);
	}
	100%{
		transform:rotate(8deg);
	}
}
   
   main > section:nth-of-type(3) h2{
    display: grid;
    place-items: center;

    font-family: AbsolutHandwritten,arial,sans-serif;
    font-size: 2.5em;
    color: var(--black);
    line-height: 80%;
	margin-top: 1em;

	animation-name:text-animation;
  	animation-duration: 3.5s;
  	animation-iteration-count:infinite;
	animation-direction: alternate;
    
   }

@media (prefers-reduced-motion: reduce){
	main > section:nth-of-type(3) h2{
		animation:unset;
	}
}

   main > section:nth-of-type(3) strong{
    font-family: Absolut, arial,sans-serif;
   }

   section:nth-of-type(3) >  ul{
     background-image: none;
     overflow-x:auto;
	 display:flex;
	 gap: 1em;
	 padding-top: 5em;
	 padding-bottom: 2em;
	 text-decoration: none;
	list-style-type: none ;
   }

   section:nth-of-type(3) > ul li a{
    display:grid;
    flex-direction:column-reverse;
	grid-template-columns: 10em;
	text-decoration: none;
	list-style: none;

   }

	section:nth-of-type(3) > ul li a:visited{
	color:var(--black);
   }

   section:nth-of-type(3) > ul li a:hover{
	scale: 1.15;
	transform: translate(0 -.7em) ;
	transition: .3s;
   }
   
   section:nth-of-type(3) > ul li a:focus{
	scale: 1;
	transform:translate(0 -.7em);
	background-color: var(--footer);
   }

   section:nth-of-type(3) > ul a h3{
	grid-row-start: 2;
	justify-self: center;
	align-self: center;
	
    font-family: Absolutbold,arial,sans-serif;
    font-size: .9em;
	color: var(--black);
	text-align: center;
    padding:2em .5em;
	height: 5em;
   }
   
   section:nth-of-type(3) > ul a img{
	grid-row-start: 1;
	justify-self: center;
	align-self: center;
    width: 5em;
   }

   main > section:nth-of-type(4){
	display:grid;
  	grid-auto-columns:20em;  
  	place-content: center;
	grid-template-rows:min-content 4em 14em ;
		
	font-family: Absolut,arial,sans-serif;
	text-align:center;
	text-transform: uppercase;

	background-image: url("../images/Explore_our_one_source.JPG");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
   }

   main > section:nth-of-type(4) h2{
	display: grid;
	grid-row-start: 1;
	grid-column-start: 1;

	font-family: Absolut,arial,sans-serif;
	font-size: 2.5rem ;
	color:var(--yellow);
	line-height: 80%;
	text-align: center;
	margin-top: .3em;
   }
   
   main > section:nth-of-type(4) h2 strong{
	font-family: AbsolutHandWritten,arial,sans-serif;
   }
   
   main >  section:nth-of-type(4) button{
	grid-column-start: 1;
	align-self: start;
	justify-self: center;
	cursor: pointer;
	font-family: Absolutmedium,arial,sans-serif;
	font-size: 1em;
	color:var(--white);
	background-color:transparent;
	text-transform: uppercase;
	border:none;
	padding: 1em 0;
   }

   main >  section:nth-of-type(4) button:hover{
	scale: 1.1;
	color: var(--yellow);
	border-radius: .5em;
	transition: .3s;
   }

   main >  section:nth-of-type(4) button:focus{
	color: var(--black);
	background-color: var(--white);
	border-radius: .5em;
	padding: .3em;
	transition: .3s;
   }

   main > section:nth-of-type(4) button::after{
	content: "  ▹";
	
  }


  main > section:nth-of-type(5){
    display: grid;
   }

   
   main > section:nth-of-type(5) h2{
    display: grid;
    place-items: center;
    font-family: AbsolutHandwritten,arial,sans-serif;
    font-size: 2.5em;
    color: var(--black);
    line-height: 80%;
	margin-top: 1em;
   }


   main > section:nth-of-type(5) strong{
    font-family: Absolut, arial,sans-serif;
   }

section:nth-of-type(5) > ul{
	cursor: pointer;
	display:flex;
    background-image: none;
    overflow-x:auto;
	padding: 4em 0 ;
   }

   section:nth-of-type(5) > ul li{
    display:grid;
	grid-template-columns: 12em;
	grid-template-rows: 10em 3em;
	justify-self: center;
	align-self: center;
   }
   section:nth-of-type(5) > ul li img:hover{
	scale: 1.2;
	transform:translate(0 -.7em);
	transition: .3s;
   }

   section:nth-of-type(5) > ul h3{
	grid-row-start: 2;
	font-family: Absolutbold,arial,sans-serif;
    font-size: 1em;
	color: var(--black);
	text-align: center;
    padding: 1em;
   }
   
   section:nth-of-type(5) > ul img{
	grid-row-start: 1;
	justify-self: center;
	align-self: end;
	width: 5.5em;
	
   }
   section:nth-of-type(5) > ul a{
	grid-row-start: 3;
	justify-self: center;
	align-self: center;
	font-family: Absolutregular,Arial, sans-serif;
	font-size: 1em;
	color: var(--blue);
	text-decoration: none;
   }

   section:nth-of-type(5) > ul a:visited{
	color: var(--blue);
   }

   section:nth-of-type(5) > ul a:hover{
	text-decoration: underline;
   }


   section:nth-of-type(5) > ul a::after{
	content: " →";
  }

  	section:nth-of-type(5) > ul a:focus{
	text-decoration: underline;
	color: var(--black);
   }

  section:nth-of-type(6) {
	display:grid;
	position: relative;
	font-family: Absolut,arial,sans-serif;
	color:var(--white);
	text-align: center;
	line-height: 80%;
  }

  section:nth-of-type(6) h2{
	position: absolute;
	top:.4em;
	left:.3em;
	right: .3em;
	font-family: Absolut,arial,sans-serif;
	font-size: 2.5em;
	line-height: 80%;
	text-transform: uppercase;
   }

   section:nth-of-type(6) img{
	width: 100%;
}

section:nth-of-type(6) button{
	position: absolute;
	align-self: start;
	justify-self: center;
	top: 9em;
	cursor: pointer;
	font-family: Absolutmedium,arial,sans-serif;
	font-size: .8em;
	text-transform: uppercase;
	color:var(--white);
	background-color:transparent;
	border:none;
	
	padding: 1em 0;
	margin-top: 1em;
}

main >  section:nth-of-type(6) button:hover{
	scale: 1.2;
	transition: .3s;
	font-family: Absolutbold;
	padding: .5em;
   }

main >  section:nth-of-type(6) button:focus{
	scale: 1.2;
	font-family: Absolutbold;
	color: var(--blue);
	background-color: var(--white);
	border-radius: .5em;
	padding: .5em .5em;
	
}

section:nth-of-type(6) > button::after{
	content: "  ▹";
  }

main > div{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	color: var(--black);
	padding-top: 3em;
	

}
div > section{
	display: grid;
	row-gap: 1em;
	align-self: center;
	justify-self: center;

}
div > section h4{
	grid-row-start: 2;
	font-family: Absolutmedium, Arial,sans-serif;
	font-size: .8em;
	width: 13em;
	height: 4em;
	padding-left: 1em;
	line-height: 135%;
	
}

div > section:nth-of-type(1) h4{
	height:3em;
}
div > section:nth-of-type(2) h4{
	height:3em;
}

div > section:nth-of-type(2) h4, section:nth-of-type(4) h4{
	padding-left: 1.8em;
}
div > section:nth-of-type(2) a, section:nth-of-type(4) a{
	padding-left: 1.6em;
}

div > section img{
	grid-row-start: 1;
	justify-self: center;
	width: 8.5em;
	height: 8.5em;
}

div > section a{
	grid-row-start: 3;
	font-family: Absolutregular,Arial, sans-serif;
	font-size: .9em;
	color: var(--blue);
	text-decoration: none;
	
	height: 5em;
	padding-bottom: 2em;
	padding-left: 1em;
}

div > section a:hover{
	text-decoration: underline;
}

div > section a:focus{
	color: var(--black);
	text-decoration: underline;
}

div > section a::after{
	content: " →";
  }

main > img{
	padding: 2em 0 0 0;
	width: 100%;
}

form{ 
	font-family: Absolutregular, Arial, sans-serif;
	text-align: center;
	color:var(--white);
	background-color: var(--blue);
	width: 100%;
	padding: 1em 2em;
}

form h5{
	font-size: 1.5em;
	padding-bottom: 1.5em;
}

h5 strong{
	font-family: Absolut,Arial, sans-serif;
	font-size: 1.5em;
}
form div{
	display: grid;
	grid-template-columns: 6.5em 10em;
	padding-bottom: 1em;
}

form label{
	padding: .5em 0;
	text-align: left;
}
form input{
	padding:.1em;
}

form > input{
	cursor: pointer;
	font-size: 1.2em;
	font-family: Absolutbold;
	color: var(--black);
	background-color: var(--button);
	border: none;
	padding: .5em 1em;
	margin: 1em;
	
}

form > input:hover{
	scale:1.2;
	text-decoration: underline;
}

form > input:focus{
	color: var(--white);
	background-color: var(--blue);
	border: solid var(--white) .1em;
	text-decoration: underline;
}

