@font-face {font-family: dos; src: url('/files/fonts/PerfectDOSWin.ttf');}
@font-face {font-family: title; src: url('/files/fonts/alagard.ttf');}
:root { /* CGA COLLOR PALLETE */
    --cga_black:#000000;
    --cga_white:#ffffff;
    --cga_light_gray:#aaaaaa;
    --cga_dark_gray:#555555;
    --cga_yellow:#ffff55;
    --cga_brown:#aa5500;
    --cga_light_red:#ff5555;
    --cga_dark_red:#aa0000;
    --cga_light_green:#55ff55;
    --cga_dark_green:#00aa00;
    --cga_light_cyan:#55ffff;
    --cga_dark_cyan:#00aaaa;
    --cga_light_blue:#5555ff;
    --cga_dark_blue:#0000aa;
    --cga_light_magenta:#ff55ff;
    --cga_dark_magenta:#aa00aa;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes color-change {
    from {color: var(--cga_dark_green);}
    to {color: var(--cga_light_green); text-shadow: 0px 0px 1.5px var(--cga_light_green);}
}
/* Firefox < 16 */
@-moz-keyframes color-change {
    from {color: var(--cga_dark_green);}
    to {color: var(--cga_light_green); text-shadow: 0px 0px 1.5px var(--cga_light_green);}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes color-change {
    from {color: var(--cga_dark_green);}
    to {color: var(--cga_light_green); text-shadow: 0px 0px 1.5px var(--cga_light_green);}
}
/* Internet Explorer */
@-ms-keyframes color-change {
    from {color: var(--cga_dark_green);}
    to {color: var(--cga_light_green); text-shadow: 0px 0px 1.5px var(--cga_light_green);}
}
/* Opera < 12.1 */
@-o-keyframes color-change {
    from {color: var(--cga_dark_green);}
    to {color: var(--cga_light_green); text-shadow: 0px 0px 1.5px var(--cga_light_green);}
}

#fade {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#fade2 {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-webkit-animation-delay: 1.2s;
-webkit-animation-fill-mode: backwards;
-moz-animation: fadein 2s; /* Firefox < 16 */
-moz-animation-delay: 1.2s;
-moz-animation-fill-mode: backwards;
-ms-animation: fadein 2s; /* Internet Explorer */
-ms-animation-delay: 1.2s;
-ms-animation-fill-mode: backwards;
-o-animation: fadein 2s; /* Opera < 12.1 */
-o-animation-delay: 1.2s;
-o-animation-fill-mode: backwards;
animation: fadein 2s;
animation-delay: 1.2s;
animation-fill-mode: backwards;
}
#fade3 {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-webkit-animation-delay: 2.4s;
-webkit-animation-fill-mode: backwards;
-moz-animation: fadein 2s; /* Firefox < 16 */
-moz-animation-delay: 2.4s;
-moz-animation-fill-mode: backwards;
-ms-animation: fadein 2s; /* Internet Explorer */
-ms-animation-delay: 2.4s;
-ms-animation-fill-mode: backwards;
-o-animation: fadein 2s; /* Opera < 12.1 */
-o-animation-delay: 2.4s;
-o-animation-fill-mode: backwards;
animation: fadein 2s;
animation-delay: 2.4s;
animation-fill-mode: backwards;
}
#update {
-webkit-animation: color-change; /* Safari, Chrome and Opera > 12.1 */
-webkit-animation-duration: 1s;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
-moz-animation: color-change; /* Firefox < 16 */
-moz-animation-duration: 1s;
-moz-animation-direction: alternate;
-moz-animation-iteration-count: infinite;
-ms-animation: color-change; /* Internet Explorer */
-ms-animation-duration: 1s;
-ms-animation-direction: alternate;
-ms-animation-iteration-count: infinite;
-o-animation: color-change; /* Opera < 12.1 */
-o-animation-duration: 1s;
-o-animation-direction: alternate;
-o-animation-iteration-count: infinite;
animation: color-change;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
#general {
    margin: auto;
    width: 750px;
}
#tabbing {
    margin-left: 40px;
    margin-right: 40px;
}
#gamecolumns {
    column-count: 3;
}
#gamecolumns p {
    margin: 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}
a.coloring {
    color: var(--cga_white);
    text-decoration: none;
    -webkit-transition: all 200ms ease-out; /* Safari, Chrome and Opera > 12.1 */
       -moz-transition: all 200ms ease-out; /* Firefox < 16 */
        -ms-transition: all 200ms ease-out; /* Internet Explorer */
         -o-transition: all 200ms ease-out; /* Opera < 12.1 */
            transition: all 200ms ease-out;
}

a.coloring:hover {
    color: var(--cga_light_magenta);
    text-decoration: none;

}
body {
    background-color: black;
    color: white;
    font-size: 18px;
    font-family: "dos";
}
p.title {
    font-family: "title";
    font-size: 72px;
    color: var(--cga_light_magenta);
}
p.subtitle {
    font-size: 32px;
    margin-top: -12px;
    margin-bottom: -12px;
    margin-left: -20px;
}
p.indentation {
    margin-left: 30px;
}
a {
    color: #ffffff;
    text-decoration: none;
}
a.normal {
    color: #ffffff;
    text-decoration: none;
    -webkit-transition: all 200ms ease-out; /* Safari, Chrome and Opera > 12.1 */
       -moz-transition: all 200ms ease-out; /* Firefox < 16 */
        -ms-transition: all 200ms ease-out; /* Internet Explorer */
         -o-transition: all 200ms ease-out; /* Opera < 12.1 */
            transition: all 200ms ease-out;
}
a.normal:hover {
    color: #ffffff;
    text-decoration: none;
    text-shadow: 0px 0px 5px var(--cga_dark_magenta);
}
hr {
    border-color: #ffffff;
}
ul {
    list-style-type: none;
}
