/* ---------------------------------------- 
max
---------------------------------------- */

/* 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: hsl(168,19%,47%);
}

/* delete later */
/*div { border: dotted green 1px; }*/

.mj {
	background: hsl(168,19%,47%);
}


.soup {
	border-style: ridge;
	border-width: 50px;
	border-top-color: rgb(247,202,201);
	border-right-color: rgb(247,202,201);
	border-bottom-color: rgb(247,202,201);
	border-left-color: rgb(247,202,201);
	background-color: rgb(146,168,209)
	
}

.soup:hover {
	background-color: hsl(168,19%,47%);
	cursor: pointer;
}

.soup div {

}


.wow {
	background-color: rgb(247,202,201);
	border-style: ridge;
	border-width: 50px;
	border-top-color: rgb(146,168,209);
	border-right-color: rgb(146,168,209);
	border-bottom-color: rgb(146,168,209);
	border-left-color: rgb(146,168,209);

}

.wow:hover { 
	background-color: hsl(168,19%,47%);
	cursor: pointer;
}

/*.wow:active {
	background: url(../images/pattern.jpg);
}
*/
.wow div { 
	/*background: url(../images/pattern.jpg);
	
	border-radius: 50%;
		width: 100%;
	height: 100%;
	margin-top: 0%;
	transform: rotate(45deg);
	background-size: contain;
	background-repeat: repeat;}*/}




.wrapper { 
  height: 100%;
  width: 100%;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;

-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite;}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

.wrapper:hover {
	background-color: blue;
}


.rotate:hover
{
        -webkit-transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        transform: rotateZ(-30deg);
}

.circle:hover
{
        border-radius:50%;
}