@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

:root {
--bg-color: #7760C1;
--topbar-color: #A996E4;
--sidebar-color: #C0B5E6;
}

#headline
{
background-color: var(---topbar-color);
}

bodys {
background: linear-gradient(270deg, purple, #00039f);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite;
}

body {
  background: linear-gradient(to right, blue 0%, black 35%, indigo 50%, #cc0000 65%, blue 100%);
  background-size: 10000px 100%;
  animation: bg 60s ease-in infinite;
}

@keyframes bg {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 10000px;
  }
}

#leftBlock
{
background: var(---sidebar-color);
}
	
	
.label
{
position:absolute;
top:1px;
right:1px;
background:black;
color:white;
font-size:1em;
padding:0.1em;
text-shadow: 0px 0px #fff !important;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
body,html
	{
	font-family: 'Fredoka One', cursive;color:white;text-shadow: 1px 1px 1px #000;
	}
	
textarea
{
    resize:none;
	width:80%;
 height:15em;
	font-size:1.2em;
	font-family: 'Fredoka One', cursive;
	-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-shadow: 1px 1px #FFF;
color: black;
background:white;
border: 3px white solid;
-webkit-box-shadow: 0px 0px 11px 5px lightgray;
box-shadow: 0px 0px 11px 5px lightgray;
padding:10px;
}

.glow
{
font-family: 'Fredoka One', cursive;
background:white;
border: 3px white solid;
-webkit-box-shadow: 0px 0px 11px 5px lightgray;
box-shadow: 0px 0px 11px 5px lightgray;	
}
	
.grid-container {
display: grid;
position:relative;
grid-template-columns: 47.5% 47.5%;
grid-gap: 5%;
grid-row-gap: 1em;
padding: 3%;
}
	
.grid-item {
	
	position:relative;
  padding: 1.5em;
  font-size: 2em;
	margin:1px;
  text-align: center;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-shadow: 1px 1px #FFF;
color: black;
/*box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
border: 3px #0F0 solid;
-webkit-box-shadow: 0px 0px 11px 5px #3DFF0B;
box-shadow: 0px 0px 11px 5px #3DFF0B;*/
}

	
#group0 > .front, #group8 > .front, #group16 > .front, #group24 > .front,
#group32 > .front, #group40 > .front, #group47 > .front, #group55 > .front,

#group0 > .back, #group8 > .back, #group16 > .back, #group24 > .back,
#group32 > .back, #group40 > .back, #group47 > .back, #group55 > .back
{
background:#0F0;
border: 3px #0F0 solid;
-webkit-box-shadow: 0px 0px 11px 5px #0F0;
box-shadow: 0px 0px 11px 5px #0F0;
width:100%;
}


#group1 > .front, #group9 > .front, #group17 > .front, #group25 > .front,
#group33 > .front, #group41 > .front, #group48 > .front, #group56 > .front,
#group1 > .back, #group9 > .back, #group17 > .back, #group25 > .back,
#group33 > .back, #group41 > .back, #group48 > .back, #group56 > .back
{
background:red;
border: 3px red solid;
-webkit-box-shadow: 0px 0px 11px 5px red;
box-shadow: 0px 0px 11px 5px red;
	width:100%;
}

#group2 > .front, #group10 > .front, #group18 > .front, #group26 > .front,
#group34 > .front, #group42 > .front, #group49 > .front, #group57 > .front,
#group2 > .back, #group10 > .back, #group18 > .back, #group26 > .back,
#group34 > .back, #group42 > .back, #group49 > .back, #group57 > .back
{
background:aqua;
border: 3px aqua solid;
-webkit-box-shadow: 0px 0px 11px 5px aqua;
box-shadow: 0px 0px 11px 5px aqua;
	width:100%;
}
	
#group3 > .front, #group11 > .front, #group19 > .front, #group27 > .front,
#group35 > .front, #group43 > .front, #group51 > .front, #group59 > .front,
#group3 > .back, #group11 > .back, #group19 > .back, #group27 > .back,
#group35 > .back, #group43 > .back, #group51 > .back, #group59 > .back
{
background:yellow;
border: 3px yellow solid;
-webkit-box-shadow: 0px 0px 11px 5px yellow;
box-shadow: 0px 0px 11px 5px yellow;
	width:100%;
}
	

#group4 > .front, #group12 > .front, #group20 > .front, #group28 > .front,
#group36 > .front, #group44 > .front, #group52 > .front, #group60 > .front,
#group4 > .back, #group12 > .back, #group20 > .back, #group28 > .back,
#group36 > .back, #group44 > .back, #group52 > .back, #group60 > .back
{
background:white;
border: 3px white solid;
-webkit-box-shadow: 0px 0px 11px 5px white;
box-shadow: 0px 0px 11px 5px white;
	
}
	
#group5 > .front, #group13 > .front, #group21 > .front, #group29 > .front,
#group37 > .front, #group45 > .front, #group53 > .front, #group61 > .front,
#group5 > .back, #group13 > .back, #group21 > .back, #group29 > .back,
#group37 > .back, #group45 > .back, #group53 > .back, #group61 > .back
{
background:magenta;
border: 3px magenta solid;
-webkit-box-shadow: 0px 0px 11px 5px magenta;
box-shadow: 0px 0px 11px 5px magenta;
	width:100%;
}
	
#group6 > .front, #group14 > .front, #group22 > .front, #group30 > .front,
#group38 > .front, #group46 > .front, #group54 > .front, #group62 > .front,
#group6 > .back, #group14 > .back, #group22 > .back, #group30 > .back,
#group38 > .back, #group46 > .back, #group54 > .back, #group62 > .back
{
background:orange;
border: 3px orange solid;
-webkit-box-shadow: 0px 0px 11px 5px orange;
box-shadow: 0px 0px 11px 5px orange;
	width:100%;
}
	
#group7 > .front, #group15 > .front, #group23 > .front, #group31 > .front,
#group39 > .front, #group47 > .front, #group55 > .front, #group63 > .front,
#group7 > .back, #group15 > .back, #group23 > .back, #group31 > .back,
#group39 > .back, #group47 > .back, #group55 > .back, #group63 > .back
{
background:silver;
border: 3px silver solid;
-webkit-box-shadow: 0px 0px 11px 5px silver;
box-shadow: 0px 0px 11px 5px silver;
	width:100%;
}
	

	
#wrapper 
{
display: flex;
	z-index:2;
}

#left {
flex: 0 0 25%;
padding-left:2em;
margin-top:-2em;
}

#right {
  flex: 1;
padding:2em;
}
	
	
.front, .back
{
text-overflow: ellipsis;
 /* Required for text-overflow to do anything */
 white-space: nowrap;
  overflow: hidden;
}



@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}