@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap');

body {
	font-family: 'Roboto Condensed', sans-serif;
	width: 100%;
	text-align: center;
	background-image: linear-gradient(45deg,
	rgba(255,0,0, 0.4) 20%,
	rgba(0,0,255, 0.4) 20%, rgba(0,0,255, 0.4) 40%,
	rgba(255,215,0, 0.4) 40%, rgba(255,215,0, 0.4) 60%,
	rgba(0,255,0, 0.4) 60%, rgba(0,255,0, 0.4) 80%,
	rgba(255,255,0, 0.4) 80%);
	background-attachment: fixed;
}

p {
	text-align: left;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  background-color: transparent;
}

.cube {
	background-color: transparent;
	position: relative;
	border-radius: 5%;
	margin: 2vw;
	margin-bottom: 8vw;

	/*width: 20vw;
	height: 20vw;*/

}

.cubie {
	border-color: black;
	border-style: solid;
	border-width: 0vw;
	border-radius: 20%;
	position: absolute;
	border: 0.5vw;
	border-color: black;
	border-style: solid;
	margin: -0.5vw;
	background-color: gray;
	/*
	width: 25%;
	height: 25%;
	*/
}

.onwhite {
	background-color: white;
}
.ongreen {
	background-color: green;
}
.on {
	background-color: yellow;
}
.onbottom {
	border-bottom-color: yellow;
}
.onright {
	border-right-color: yellow;
}
.ontop {
	border-top-color: yellow;
}
.onleft {
	border-left-color: yellow;
}
.leftred{
	border-left-color: red;
}
.leftgreen{
	border-left-color: green;
}
.rightorange{
	border-right-color: orange;
}
.rightgreen{
	border-right-color: green;
}
.rightred{
	border-right-color: red;
}
.topblue{
	border-top-color: blue
}
.toporange{
	border-top-color: orange
}
.bottomorange{
	border-bottom-color: orange;
}
.bottomred{
	border-bottom-color: red;
}
.leftorange{
	border-left-color: orange;
}
.bottomgreen {
	border-bottom-color: green;
}
.bottomblue {
	border-bottom-color: blue;
}
.bottomwhite {
	border-bottom-color: white;
}
.topgreen {
	border-top-color: green;
}
.upper {
	top: 2%;
}
.middle {
	top: 29%;
}
.down {
	top: 56%;
}
.left {
	left: 10%;
}
.center {
	left: 37%;
}
.right {
	left: 64%;
}
.algorithm {
	position: absolute;
	top: 85%;
	width: 100%;
	font-size: 3vw;
}
.small {
	font-size: 2vw;
}
.sexy {
	color: red;
}
.sune {
	color: blue;
}
.antisune {
	color: green;
}

a {
    text-decoration: none;
}

a:hover {
    color:green;
    transition-duration: 0.5s;
}

.close {
	position: absolute;
	right: 32px;
	top: 32px;
	width: 32px;
	height: 32px;
	opacity: 0.3;
  }
  .close:hover {
	opacity: 1;
  }
  .close:before, .close:after {
	position: absolute;
	left: 15px;
	content: ' ';
	height: 33px;
	width: 2px;
	background-color: #333;
  }
  .close:before {
	transform: rotate(45deg);
  }
  .close:after {
	transform: rotate(-45deg);
  }