:root {
    --window-text-color: rgb(131, 13, 115);
    --window-border-color: lightblue;
    --window-bg-color: white;
    --window-shadow-color: rgba(80,20,255,0.2);
}

/* Custom font definitions */
@font-face {
    font-family: 'FreePixel';
    src: url(fonts/FreePixel.ttf);
}

@font-face {
    font-family: 'IBM_BIOS';
    src: url(fonts/IBM_BIOS.woff);
}

@font-face {
    font-family: 'Mom Typewriter';
    src: url(fonts/Mom_typewriter.ttf);
}

/* Animation keyframes */
@keyframes rainbow {
    0%   {color: #F00;}
    17%  {color: #FF0;}
    33%  {color: #0F0;}
    50%  {color: #0FF;}
    66%  {color: #00F;}
    83%  {color: #F0F;}
    100% {color: #F00;}
}

@keyframes blink {
    0%   {color: #F00;}
    100% {color: #00F;}
}

/* Body background and default settings */
body {
    color: var(--window-text-color);
    font-family: 'FreePixel', 'Courier New', Courier, monospace;
    image-rendering: pixelated;
    background-image: url(img/textures/wallpaper.png);
    padding: 1rem 0 1rem 0;
    margin: 0;
}

/* Main content, body and background styles */
.window {
    max-width: 55em;
    width: fit-content;
    margin: auto;
    padding: 1ch 1ch 1ch 1ch;
    line-height: 1.5;
    color: var(--window-text-color);
    border: 2px solid var(--window-border-color);
    background-color: var(--window-bg-color);
    padding: 4px;
    box-shadow: 4px 4px var(--window-shadow-color);
}

.title {
    border: var(--window-border-color) 1px solid;
    font-family: "IBM_BIOS";
    font-size: 17px;
    height: 22px;
    padding-bottom: 2px;
}
.title::before {
    content: url(img/window_icon.png);
    height: 1ch;
    float: left;
    padding-right: 2px;
}
.title::after {
    content: url(img/window_buttons.png);
    height: 1ch;
    float: right;
}

.content {
  border: var(--window-border-color) 2px solid;
  font-size: 17px;
  margin-top: 4px;
  padding: 4px;
}

/* Rainbow Site Title */
header h1 {
    color: pink;
    margin: 0;
    font-size: 2.5em;
    animation: rainbow 5s infinite;
}

/* Headings need to be fancy */
h1 {
    text-shadow: 2px 2px #210f3f;
    text-align: center;
}
h2 {
    text-shadow: 2px 2px #210f3f;
    text-align: center;
}
h3 {
    text-shadow: 2px 2px #210f3f;
}

/* Other common tags */
a {
    color: rgb(122, 107, 192);
    text-decoration: none;
}
a:hover, a:active {
    font-weight: bold;
}

table {
    width: 100%;
    text-align: center;
    font-weight: bold;
}

td {
    border-bottom: 4px ridge grey;
}

strong {
    animation:blink 2s infinite alternate;
}

time {
    color: grey;
    font-family: monospace;
}

/* Images */

img { max-width: 100% }

figure {
    display: block;
    margin: auto;
    padding: 1ch;
    max-width: fit-content;
    clear: both;
    text-align: center;
}
figure img { /* frame around figure */
    border: 10px ridge purple;
    border-radius: 1ch;
}

figcaption {
    background: linear-gradient(#222, black);
    color: grey;
    text-align: center;
    font-style: italic;
    line-height: 1em;
    border: 4px ridge pink;
    border-radius: 10px;
    padding: 1ch 0;
}

.title-figure img { border-color: rgb(255, 0, 140); }
.title-figure figcaption { border-color: darkred; }

/* For image dump pages */
.img-dump {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.img-dump > img {
    display: block;
    padding: 1ch 1ch;
    max-width: 50%;
    box-sizing: border-box;
}

.icon { height: 1em; } /* For custom emoticons */

.rainbow { animation: rainbow 5s infinite; }

/* Media queries for floating right-figure */
@media (width >= 55em) {
    .right-figure {
        max-height: 100%;
		float: right;
    }
}