/*
	A submission for ARV-228 Grid System Project
		My Design Title: 1360 Grid System
		My Name is: Zaide Palacios
		My rotation animation solution references "A Robot Name Jimmy"
			– Designed by @guitrasher
			– Development by @jimmyking
			– http://meltmedia.com"
	 All associated graphics copyright 2021, by me, Zaide Palacios.
 /////  FONT CITATIONS
		All Google Fonts are released under licenses which do not require 
			them to be cited. 
		All Adobe Fonts library are cleared for both personal and commercial use (Broadway Font).
/////  CSS CITATIONS 
 	This CSS file is released under the Creative Commons License - 
		- http://creativecommons.org/licenses/by-nc-sa/4.0/  /* 
 	License Allows: adaptations and commercial use, but requires share-and-share alike and attribution to Zaide Palacios 
/////  SWOOPY CITATIONS
/*
	Copyright (c) 2021 by 許友誠 (https://codepen.io/dgmvnhjy/pen/RwbjEwQ)
/////  ICON CITATIONS 
	Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
  	License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)	
*/
/*	This CSS file accompanies my 1360 Grid System Project */
/*Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@300&display=swap');
@font-face {
  font-family: Broadway;
  src: url("../font/BROADW.TTF");
}
/*CSS*/
body {
  background-color: palevioletred;
  background-color: rgba(219, 112, 147, 0.50);
  background-attachment: fixed;
  color: #333;
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 14px;
  height: 100%;
  margin: 10px auto;
  padding: 10px 0;
}
a {
  color: #fff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.wrapper {
    padding-top:7px;
  height: 850px;
  border-radius: 10px;
}
h1, h2, h3, h4, h5, h6 {
  color: gold;
  font-family: 'Broadway', cursive;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  padding: 10px 0;
}
h1 {
  font-size: 36px;
}
h2 {
  font-size: 30px;
}
header {
  margin-bottom: 0;
  padding-bottom: 0;
}
header nav {
  margin-top: 145px;
}
nav ul li a {
  text-decoration: none;
  font-family: 'Broadway', sans-serif;
  font-size: 24px;
  line-height:1.1em;
  margin-top: 10px;
  vertical-align: middle;
}
ul {
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
li {
  list-style-type: none;
  height: 85px;
  overflow: hidden;
  text-align: center;
}
li > span {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  transition: 0.5s;
}
li > span:nth-child(1) {
  color: cornflowerblue;
  background-color: rgba(255, 255, 255, 0.3);
  font-size: 48px;
  padding-top: 10px;
}
li > span:nth-child(2) {
  background-color: cornflowerblue;
}
li:hover span {
  transform: translateY(-100%);
}
p {
  color: #020278;
  border: 2px solid #020278;
  overflow: hidden;
  margin: 10px auto;
  padding: 10px 0;
  text-align: center;
  background-color: rgba(100, 149, 237, 0.40);
  box-sizing: border-box;
}
img{
	border: thin solid darkblue;
}
.gs-17molecule::before {
  content: '';
  height: 250px;
  padding-top: 15px;
  background-image: url("../img/gs-img-17-molecule.png");
  display: block;
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 220px;
  animation-name: spin;
  animation-timing-function: linear;
  animation-duration: 10s;
  /*animation-iteration-count: infinite;*/
}
/*animation*/
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
  /*	end animation  */
}
.gs-17molecule h1 {
  font-family: Broadway, sans-serif;
  font-size: 46px;
  line-height: 4.2em;
  margin-top: -275px;
}
.gs-17molecule h1:hover {
  text-decoration: underline;
}
button.btn-big {
  background-color: gold;
  color: palevioletred;
  cursor: pointer;
  text-align: center;
  font-size: 30px;
  border-radius: 15px;
  box-shadow: 0 9px #FFBD0B;
  height: 75px;
margin: -50px 0 0;
border: thin solid #ffbd0f;
}
button:hover {
  text-decoration: underline;
  background-color: #FFC278;
  box-shadow: 0 9px #FCA22B;
}

#bdsidebar, #ydsidebar, #pdsidebar, #gdsidebar, #prpsidebar, #ogsidebar, #lgdsidebar, #dbdsidebar, #lpdsidebar, #dodsidebar, #mainContent, #mainContentimg {
  height: 100%;
  min-height: 500px;
  display: inline-block;
}
#bdsidebar {
  background-color: lightgoldenrodyellow;
  background-color: rgba(250, 250, 210, 0.80);
  background-image: url("../img/gs-img-blue-dude.png");
  background-repeat: no-repeat;
  background-size: 280px 475px;
  background-position: center center;
}
#ydsidebar {
  background-color: lightgoldenrodyellow;
  background-color: rgba(250, 250, 210, 0.80);
  background-image: url("../img/gs-img-yellow-dude.png");
  background-repeat: no-repeat;
  background-size: 165px 475px;
  background-position: center center;
}
#pdsidebar {
  background-color: lightgoldenrodyellow;
  background-color: rgba(250, 250, 210, 0.80);
  background-image: url("../img/gs-img-pink-dude.png");
  background-repeat: no-repeat;
  background-size: 280px 475px;
  background-position: center center;
}
#gdsidebar {
  background-color: lightgoldenrodyellow;
  background-color: rgba(250, 250, 210, 0.80);
  background-image: url("../img/gs-img-green-dude.png");
  background-repeat: no-repeat;
  background-size: 280px 475px;
  background-position: center center;
}
#prpsidebar {
  background-color: lightgoldenrodyellow;
  background-color: rgba(250, 250, 210, 0.80);
  background-image: url("../img/gs-img-purple-dude.png");
  background-repeat: no-repeat;
  background-size: 280px 475px;
  background-position: center center;
}
#ogsidebar {
  background-color: lightgoldenrodyellow;
  background-color: rgba(250, 250, 210, 0.80);
  background-image: url("../img/gs-img-orange-dude.png");
  background-repeat: no-repeat;
  background-size: 280px 475px;
  background-position: center center;
}
#lgdsidebar {
  background-color: lightgoldenrodyellow;
  background-color: rgba(250, 250, 210, 0.80);
  background-image: url("../img/gs-img-lg-alien.png");
  background-repeat: no-repeat;
  background-size: 280px 475px;
  background-position: center center;
}
#dbdsidebar {
  background-color: lightgoldenrodyellow;
  background-color: rgba(250, 250, 210, 0.80);
  background-image: url("../img/gs-img-darkb-alien.png");
  background-repeat: no-repeat;
  background-size: 280px 475px;
  background-position: center center;
}
#lpdsidebar {
  background-color: lightgoldenrodyellow;
  background-color: rgba(250, 250, 210, 0.80);
  background-image: url("../img/gs-img-lp-dude.png");
  background-repeat: no-repeat;
  background-size: 280px 475px;
  background-position: center center;
}
#dodsidebar {
  background-color: lightgoldenrodyellow;
  background-color: rgba(250, 250, 210, 0.80);
  background-image: url("../img/gs-img-dark-orange-dude.png");
  background-repeat: no-repeat;
  background-size: 280px 475px;
  background-position: center center;
}
#mainContent {
  background-color: #FED0D8;
}
.footer {
  margin: 0;
  padding: 0;
}