@charset 'UTF-8';

@font-face {
	font-family: 'Dosis';
	src: url('font/Dosis-VariableFont_wght.ttf');
}

@font-face {
	font-family: 'Dosis200';
	src: url('font/static/Dosis200-ExtraLight.ttf');
}

@font-face {
	font-family: 'Dosis300';
	src: url('font/static/Dosis300-Light.ttf');
}

@font-face {
	font-family: 'Dosis400';
	src: url('font/static/Dosis400-Regular.ttf');
}

@font-face {
	font-family: 'Dosis500';
	src: url('font/static/Dosis500-Medium.ttf');
}

@font-face {
	font-family: 'Dosis600';
	src: url('font/static/Dosis600-SemiBold.ttf');
}

@font-face {
	font-family: 'Dosis700';
	src: url('font/static/Dosis700-Bold.ttf');
}

@font-face {
	font-family: 'Dosis800';
	src: url('font/static/Dosis800-ExtraBold.ttf');
}

@font-face {
    font-family: 'Dongle-Light';
    src: url('font/subset-Dongle-Light.eot');
    src: url('font/subset-Dongle-Light.eot?#iefix') format('embedded-opentype'),
        url('font/subset-Dongle-Light.woff2') format('woff2'),
        url('font/subset-Dongle-Light.woff') format('woff'),
        url('font/subset-Dongle-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body
{
    margin: 0 auto;
    max-width: 95vw;
    min-width: 480px;
    min-height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('../images/bg01.jpg');
    background-color: #fafaf0;
    font-family: 'Dosis200', 'Dosis', sans-serif;
    font-size: 0.8em;
    letter-spacing: 0.5px;
    line-height: 1.2em;
    color: #393939;
    text-shadow: 0 0 0.5px rgba(58,58,58,0.5);
    -webkit-text-stroke: 0.25px;
}

.container {
    display: grid;
    grid-template-columns: minmax(480px, auto);
    grid-template-rows: auto;
    grid-template-areas:
        "logo"
        "title"
        "body"
        "footer";
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: stretch;
}

.logo {grid-area: logo; text-align: center; width: 100vw;}
.title {grid-area: title; text-align:center; width: 100vw;}
.body {grid-area: body; text-align: center; width: 100vw;}
.footer {grid-area: footer; text-align: center; width: 100vw; font-size: 0.8em;}

h1 {font-family: 'Dosis600'; font-size: 2em; margin-top:2em;}
img {max-width:90%;}

hr {
    background-color: #acacac;
    border: none;
    height: 1px;
}

a {
    color: #ff7000;
    font-family: 'Dosis200';
    text-shadow: 0 0 0.5px rgba(255,255,255,0.5);
    -moz-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
    -webkit-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
    -o-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
    -ms-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
    transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
    text-decoration: none;
    border-bottom: dotted 1px rgba(255,112,0,0.5);
}

    a:hover {border-bottom-color: rgba(0,0,0,0);}