:root {
  --fontsize: 2.5vw;
  --main: #948eaf;
  --backg: #524a7c;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #948eae;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #534a7b;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #302b48;
}

@font-face{
	font-family: "Commodore 64";
	src: url(Commodore-64.ttf);
}
html{ margin: 0; height: 100%; }
body { background: var(--backg); color: var(--main); font-family: "Commodore 64"; font-size: var(--fontsize); margin: 0; border-radius: 0px; box-sizing: border-box; width: 100%; }
a { }
a:link { color: var(--main); }
a:active { color: #e40a2d; }
a:visited { color: var(--main); }
a:hover { color: #82bec6; }
p { margin: 0; word-break: break-all; }
h1 { line-height: 4vw; word-spacing: 9px; text-align: center; font-weight: normal; font-size: var(--fontsize); }
h2 { text-align: center; /* font-size: 24px; */ font-size: var(--fontsize);}
h3 { color: #ffffff; text-align: center; }
.right { text-align: right; }
/*div.red { color: #e40a2d; }*/
div.white { color: #ffffff; }
div.end { margin-top: 50px; text-align: center; }
table.main { border: 0px; margin-left: auto; margin-right: auto; margin-bottom: 3vw; }
table.main td { border: 0px; padding: 3px; font-size: var(--fontsize); }
table.sec { border: 1px solid #b4c8d2; border-collapse: collapse; margin-left: auto; margin-right: auto; }
table.sec td { border: 1px solid #b4c8d2; padding: 3px; }
tr{opacity:1; animation: blink 0.2s calc(var(--n)*1s) 1 forwards;}
div.dot {height: 2vw; width: 2vw; background-color: var(--main); margin-top: 0px; animation: dot 0.6s infinite }
tr:first-child * {opacity:1; animation: flash 0.66s calc(var(--n)*1s + 0.25s) 4 forwards;}
.border { margin: 0; height: 100%; width: 100%; box-sizing: border-box; border: 10vmin solid var(--main); position: fixed; top: 0; overflow: hidden; }
.content { width: calc(100% - 20vmin); height: calc(100% - 20vmin); overflow: auto; position: fixed; top: 10vmin; right: 10vmin; }
iframe { height: 100%; width: 100%; border: none; }
.back { position: fixed; bottom: 0; color: #534a7b; font-size: 5vmin; }

@keyframes 
	blink {50% { opacity: 0.2; } }

@keyframes
	flash {
		0% { color: var(--main); }
		20% { color: #8faba5; }
		40% { color: #3f389e; }
		45% { color: #844f91; }
		50% { color: #844f91; }
		55% { color: #3f389e; }
		75% { color: var(--main); }
		85% { color: #8faba5; }
		100% { color: var(--main); }
}
@keyframes 
	dot {0% { opacity: 0; } 49.9% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
		

@media only screen and (max-device-width: 425px) {
    table.main td { border: 0px; padding: 3px; font-size: 2.5vh; line-height: 6vh; }
}

@media only screen and (max-device-width: 768px) {
    table.main td { border: 0px; padding: 3px; font-size: 2.5vh; line-height: 5vh; }
}