/* ---------------------------------------- 
Delaney Poitras
---------------------------------------- */

/* NOTES:

1. DO NOT use width or height properties for any parent-level divs (these are divs you will be adding classes to).
2. Use % over px for sizing interior divs
3. Remember: if you do not give dimention and style to interior divs, we will not see them. By default, divs are invisible.

*/

/* so we can tell that our file is loading */
body {
	background-color: #330000;
}

div {border: solid 0px rgb(102,0,0);
}

.blank {
	background-color: #ff8080;
	box-shadow: 15px 15px 30px black;
}

.blank {
	background-color: #4d1919;
	transform: rotate(90deg);
	transition: transform 2s;
}

.blank:hover { 
	cursor: crosshair;
	background-color: #130606;
	transform: rotate(360deg);
}

.blank div { 
	box-shadow: 15px 15px 30px black;
	background-color: #732626;
	border-radius: 0%;
	width: 75%;
	height: 100%;
	transform: rotate(90deg);
	margin-top: 0%;
	background-repeat: no-repeat;
	background-position: center;	
}
/*_____________________________________________________*/

.corner {
	box-shadow: 15px 15px 30px black;
	height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: #330000;
  animation-name: stretch;
  animation-duration: .5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(.1);
    background-color: #330000;
    border-radius: 0%;
  }
  50% {
    background-color: #ffffff;
  }
  100% {
    transform: scale(1);
    background-color: #330000;
  }
}

body,
html {
  height: 100%;
}

/*___________________________________________________*/
.first {
	box-shadow: 15px 15px 30px black;
	  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: #330000;
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 1.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(.1);
    background-color: #330000;
    border-radius: 0%;
  }
  50% {
    background-color: #ffffff;
  }
  100% {
    transform: scale(1);
    background-color: #330000;
  }
}

body,
html {
  height: 100%;
}
/*_________________________________________*/
.color {
	box-shadow: 15px 15px 30px black;
    position: center;
    background-color: #1a0008;
    width: 95%;
    height: 75%;
    /* ( 100 - width ) / 2 */
    top: 10%;
    left: 10%;
    transform: rotate(60deg);
}