*
{
font-family:Lato,Helvetica,Swiss,Arial;
font-weight:normal;
font-size:100%;
margin:0;
padding:0;
outline:none;
text-align:center;
color:White;
}
html, body
{
height:100%;
}
body
{
display:flex;
flex-direction:column;
background-image:url('Images/Background.png');
background-position:left top;
background-repeat:repeat;
background-size:1.5em;
background-color:#523538;
background-attachment:fixed;
}
banner-header /* custom tag for full width header container. */
{
width:100%;
display:block;
position:relative;
overflow:hidden;
flex-shrink:0;
}
header, section, main
{
padding:1em;
margin-top:0.5em;
margin-left:7%;
margin-right:7%;
border-radius:0.5em;
background-color:rgba(0,0,0,0.35);
backdrop-filter:blur(1px);
transition:background-color 1s;
}
header:hover, section:hover, main:hover
{
background-color:rgba(0,0,0,0.65);
}
main
{
flex-grow:1;
display:flex;
flex:1;
min-height:0px;
}
main-container /* custom tag for clipping main contents on overflow. */
{
display:block;
overflow:clip;
flex:1;
}
h1
{
font-size:2em;
font-weight:bold;
}
h2
{
font-size:1.4em;
}
h3
{
font-size:1.2em;
font-weight:bold;
}
h4
{
font-size:1.1em;
font-style:italic;
}
h5
{
font-size:1.1em;
font-weight:bold;
text-align:left;
padding:0.25em;
}
p
{
font-size:0.8em;
padding:0.25em;
text-align:left;
}
small
{
font-size:0.6em
}
time
{
font-size:1.5em;
text-align:left;
margin-left:auto;
margin-right:0.5em;
}
a
{
color:pink;
font-style:italic;
text-decoration:none;
text-align:left;
}
a:visited
{
color:hotpink;
}
a:hover
{
color:magenta;
}
a:active
{
color:magenta;
text-decoration:underline;
}
@media screen and (min-width:1px)
{
body {font-size:70%}
}
@media screen and (min-width:300px)
{
body {font-size:80%}
}
@media screen and (min-width:500px)
{
body {font-size:85%}
}
@media screen and (min-width:600px)
{
body {font-size:90%}
}
@media screen and (min-width:700px)
{
body {font-size:95%}
}
@media screen and (min-width:800px)
{
body {font-size:100%}
}
@media screen and (min-width:900px)
{
body {font-size:125%}
}
@media screen and (min-width:1200px)
{
body {font-size:150%}
}
@media screen and (min-width:1400px)
{
body {font-size:175%}
}
@media screen and (min-width:1600px)
{
body {font-size:200%}
}
@media screen and (min-width:1800px)
{
body {font-size:225%}
}
@media screen and (min-width:2000px)
{
body {font-size:250%}
}
@media screen and (min-width:2250px)
{
body {font-size:300%}
}
@media screen and (min-width:2500px)
{
body {font-size:400%}
}
@font-face
{
font-family:Lato;
src:url('Fonts/Lato-Regular.ttf');
}
@font-face
{
font-family:Lato;
font-weight:bold;
src:url('Fonts/Lato-SemiBold.ttf');
}