/* mobile-first */
body	{
	color: 		#ccc;
	background: 	#444;
	margin: 5px;
	max-width: 690px;
	font-family: system-ui,-apple-system,"Public Sans","Segoe UI","Noto Sans",Oxygen-Sans,Ubuntu,Roboto,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
        background-image: url(penguin.png);
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: right bottom;
}

body.film {
	background: #000000;
	max-width: 100%;
	max-height: 100%;
	margin: 0px;
}

@media only screen and (min-width: 600px) {
    body {
	margin: 45px;
	max-width: 750px;
    }

    body.film {
	margin: 2%;
    }
}


/* end mobile-first */

table {
    border-collapse: collapse;
}

table, th, td{
    border: 1px solid gray;
    vertical-align: top;
}

video {
	max-width: 100%;
}

img {
    border: 0;
}

a {
    text-decoration: none;
}
a:link{
    color: #6bf;
    transition: background 0.3s ease-in-out;
}
a:visited {
    color: #6bf;
}
a:hover	{
    color: #6bf;
    background:	#555;
}

a.ltflag img {
  width:30px;
  height:20px;
  vertical-align:middle;
  border-style:solid;
  border-width:1px;
  border-color:#888888;
  transition:all 0.5s ease-in-out;
}

a.ltflag:hover img {
    transform:scale(3);
    transform-origin:top left;
    box-shadow:4px 4px 10px rgba(0,0,0,0.5);
}

em, i {
    font-style: italic;
}

sub, sup { font-size: small; }
sub { vertical-align: sub; }
sup { vertical-align: super; }

/* mobile-first */
/*code, pre {
    font-size: xx-large;
}*/

@media only screen and (min-width: 1000px) {
    code, pre {
	font-size: larger;
    }
}
/* end mobile-first */

button {
    background-color:transparent;
    color: #6bf;
    border:1px solid;
}
button:hover {
    background-color:transparent;
    color: #f88;
}
button:disabled {
    background-color:transparent;
    border:1px solid #888;
    color: #888;
}


#flickr img {
    padding:5px;
}