@import "destroy.css";

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body
{
    font-family: arial, sans-serif;
    text-align: center;
    margin: auto;
    color: #0f0f0f;
    background-color: #f0f0ff;
    max-width: 60em;
}

.note
{
    font-size: 10px;    
}

.block
{
    display: inline-block;
}

.centered
{
    text-align: center
}

#container
{
    margin: 0.5em;
    text-align: left;
    position: relative;
}

#header
{
    font-family: "destroyregular", "Arial Black"; 
/*    font-family: "Lucida Console"; */
    padding: 1.25em;
    padding-right: 0;
    margin: 0.5em;
    text-align: left;
/*    background-color: #d0d0ff; */
/*    background-color: #020202; */
    text-color: #fefefe;
/*        border-radius: 25px; */
}

#header a:link { color: #fefefe; }
#header a:visited { color: #fefefe; }
#header a:hover { color: #fefefe; }
#header a:active { color: #fefefe; }

#header .block 
{
    padding: 0.5em;
    vertical-align: middle;
    margin: auto;
}

#header h1
{
    font-size: 3em;
}

.title_block
{
    font-size: 2em;
    padding: 0.5em;
    padding-left: 0.2em;
    margin: auto;
}

.fancy_text
{
    font-family: "destroyregular", "Arial Black"; 
}

#footer
{
    clear:both;
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

a:link    {
    /* Applies to all unvisited links */
    text-decoration:  none;
} 
a:visited {
    /* Applies to all visited links */
    text-decoration:  none;
} 
a:hover   {
    /* Applies to links under the pointer */
    text-decoration:  underline;
} 
a:active  {
    /* Applies to activated links */
    text-decoration:  underline;
} 

/* full size conditional layout */
@media screen and ( min-width: 52em ) {
    .title_block { display: inline-block; }
}

/* mid size - between full and mobile */
@media screen and ( max-width: 52em ) and ( min-width: 39em ) {
    #header { text-align: center; }
}

/* mobile size conditional layout */
@media screen and ( max-width: 39em ) {
    .title_block { display: block; }
    #header .block { display: block; }
}

@media (prefers-color-scheme: dark) {
  html, img, video, iframe {
    filter: invert(1);
  }
  body {
    background-color: #f0f0ff;
  }
  a {
    filter: invert(1);
  }
  a:link {
    color: #9999ff;
  }
  a:visited {
    color: #854AbB;
  }
}