<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&amp;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 &gt; .front, #group8 &gt; .front, #group16 &gt; .front, #group24 &gt; .front,
#group32 &gt; .front, #group40 &gt; .front, #group47 &gt; .front, #group55 &gt; .front,

#group0 &gt; .back, #group8 &gt; .back, #group16 &gt; .back, #group24 &gt; .back,
#group32 &gt; .back, #group40 &gt; .back, #group47 &gt; .back, #group55 &gt; .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 &gt; .front, #group9 &gt; .front, #group17 &gt; .front, #group25 &gt; .front,
#group33 &gt; .front, #group41 &gt; .front, #group48 &gt; .front, #group56 &gt; .front,
#group1 &gt; .back, #group9 &gt; .back, #group17 &gt; .back, #group25 &gt; .back,
#group33 &gt; .back, #group41 &gt; .back, #group48 &gt; .back, #group56 &gt; .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 &gt; .front, #group10 &gt; .front, #group18 &gt; .front, #group26 &gt; .front,
#group34 &gt; .front, #group42 &gt; .front, #group49 &gt; .front, #group57 &gt; .front,
#group2 &gt; .back, #group10 &gt; .back, #group18 &gt; .back, #group26 &gt; .back,
#group34 &gt; .back, #group42 &gt; .back, #group49 &gt; .back, #group57 &gt; .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 &gt; .front, #group11 &gt; .front, #group19 &gt; .front, #group27 &gt; .front,
#group35 &gt; .front, #group43 &gt; .front, #group51 &gt; .front, #group59 &gt; .front,
#group3 &gt; .back, #group11 &gt; .back, #group19 &gt; .back, #group27 &gt; .back,
#group35 &gt; .back, #group43 &gt; .back, #group51 &gt; .back, #group59 &gt; .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 &gt; .front, #group12 &gt; .front, #group20 &gt; .front, #group28 &gt; .front,
#group36 &gt; .front, #group44 &gt; .front, #group52 &gt; .front, #group60 &gt; .front,
#group4 &gt; .back, #group12 &gt; .back, #group20 &gt; .back, #group28 &gt; .back,
#group36 &gt; .back, #group44 &gt; .back, #group52 &gt; .back, #group60 &gt; .back
{
background:white;
border: 3px white solid;
-webkit-box-shadow: 0px 0px 11px 5px white;
box-shadow: 0px 0px 11px 5px white;
	
}
	
#group5 &gt; .front, #group13 &gt; .front, #group21 &gt; .front, #group29 &gt; .front,
#group37 &gt; .front, #group45 &gt; .front, #group53 &gt; .front, #group61 &gt; .front,
#group5 &gt; .back, #group13 &gt; .back, #group21 &gt; .back, #group29 &gt; .back,
#group37 &gt; .back, #group45 &gt; .back, #group53 &gt; .back, #group61 &gt; .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 &gt; .front, #group14 &gt; .front, #group22 &gt; .front, #group30 &gt; .front,
#group38 &gt; .front, #group46 &gt; .front, #group54 &gt; .front, #group62 &gt; .front,
#group6 &gt; .back, #group14 &gt; .back, #group22 &gt; .back, #group30 &gt; .back,
#group38 &gt; .back, #group46 &gt; .back, #group54 &gt; .back, #group62 &gt; .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 &gt; .front, #group15 &gt; .front, #group23 &gt; .front, #group31 &gt; .front,
#group39 &gt; .front, #group47 &gt; .front, #group55 &gt; .front, #group63 &gt; .front,
#group7 &gt; .back, #group15 &gt; .back, #group23 &gt; .back, #group31 &gt; .back,
#group39 &gt; .back, #group47 &gt; .back, #group55 &gt; .back, #group63 &gt; .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%}
}</pre></body></html>