@font-face {
  font-family: 'Shrikhand';
  font-style: normal;
  font-weight: 400;
  src: url('shrikhand.woff2') format('woff2');
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700;
  src: url('bigshoulders.woff2') format('woff2');
}

@font-face {
    font-family:"Atkinson";
    src: url("atkinson/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2") format("woff2"), 
    url("atkinson/WOFF/Atkinson-Hyperlegible-Regular-102.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:"Atkinson";
    src: url("atkinson/WOFF2/Atkinson-Hyperlegible-Bold-102a.woff2") format("woff2"), 
    url("atkinson/WOFF/Atkinson-Hyperlegible-Bold-102.woff") format("woff");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family:"Atkinson";
    src: url("atkinson/WOFF2/Atkinson-Hyperlegible-Italic-102a.woff2") format("woff2"), 
    url("atkinson/WOFF/Atkinson-Hyperlegible-Italic-102.woff") format("woff");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family:"Atkinson";
    src: url("atkinson/WOFF2/Atkinson-Hyperlegible-BoldItalic-102a.woff2") format("woff2"), 
    url("atkinson/WOFF/Atkinson-Hyperlegible-BoldItalic-102.woff") format("woff");
    font-weight: bold;
    font-style: italic;
}


:root {
	--color:#302624;
	--background:#ebeae5;

    --header:#247506;
    --headercolor:#FFF;
    --subtitle:#f4da36;
    --shadow:rgb(0,0,0,0.3);
    
    --navborder:#ee3a11;
    --navhover:#f4da36;
	
	--link:#ad4505;
	--linkhover:#7c3904;
	
	--formbg:#ebeae5;
	--formcolor:#302624;
	
	--accentbg:#dfddd4;
	--hr: #247506;
}


/* ------ The rest of the code starts here ------- */

* { margin: 0; padding: 0; transition: color 0.5s ease, background 0.5s ease, border 0.5s ease;}
img { margin:5px; max-width:100%; height:auto; }

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--background);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

a.hidden {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
 
a.hidden:focus {
    position:static;
    width:auto;
    height:auto;
}

body { 
	color:var(--color);
	background:var(--background);
	font: 1.3rem 'Atkinson', sans-serif; 
}

#container {
	padding:20px;
	width:calc(90% - 40px);
	max-width:800px;
	margin:auto;
}

#main-header {
    text-align:center;
    width:100%;
    background:var(--header);
    font: 5rem 'Shrikhand', sans-serif;
    padding:20px 0 20px 0;
}

.title {
    color:var(--headercolor);
    line-height:1;
    text-shadow: 3px 3px 0px var(--shadow);
    z-index:2;
}

.subtitle {
    font:.5em 'Big Shoulders Display', sans-serif;
    text-transform:uppercase;
    z-index:5;
    color:var(--subtitle);
    font-style:italic;
}

#main-header nav {
    font:.4em 'Big Shoulders Display', sans-serif;
}

#main-header nav li {
    display:inline-block;
    margin:.2em;
}

#main-header a {
    color:var(--headercolor);
    border-bottom:2px solid var(--navborder);
    text-decoration:none;
}

#main-header a:hover, #main-header a:focus {
    border-bottom:4px solid var(--navhover);
}

main a {
	color:var(--link);
}

main a:hover, main a:focus {
	color: var(--linkhover);
}

p {
	margin:10px 0px 10px 0px;
	line-height:1.5;
}

main h1 {
	font: 2.5em 'Shrikhand', sans-serif;
	margin: 5px 0 5px 0;
    line-height:1;
}

main h2 {
	margin: 10px 0 10px 0;
	font: 1.9em 'Atkinson', sans-serif;
}

main h3 {
	margin:10px 0 10px 0;
	font: 1.5em 'Atkinson', sans-serif;
}

main h4 {
	font: 0.9em Georgia, Times New Roman, serif;
	font-style:italic;
	margin:5px 0 20px 0;
}

.badge {
    flex:0 0 6em;
    width:6em;
    min-height:100px;
    background:var(--link);
    font: 1.5em 'Big Shoulders Display', sans-serif;
    border-radius:50%;
    display:flex;
    padding:20px;
    align-items:center;
    transition: transform 0.5s ease;
    margin:5px;
    text-align:center;
}

.badge:hover, .badge:focus {
    transform: rotate(-5deg);
    transition: transform 0.5s ease;
}

.badge a {
    text-decoration:none;
    display:inline-block;
    color: var(--headercolor);
}

.badge a:hover, .badge a:focus {
    color: var(--headercolor);
}

.btn {
    background: var(--formbg);  
    color: var(--formcolor);
    font: 1.3rem 'Atkinson', sans-serif; 
    border: 1px solid var(--hr); 
    padding: 10px; 
    margin: 10px;
    display:inline-block;
    text-decoration:none;
}

.btn:hover, .btn:focus {
    background: var(--formcolor);
    color:var(--formbg);
    cursor:pointer;
}

.gridcontainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
    margin:auto;
}

.galleryitem {
    padding:5px;
}

main input, textarea, select, button { 
	background: var(--formbg);  
	color: var(--formcolor);
	font: 12pt sans-serif; 
	border: 1px solid var(--hr); 
	padding: 5px; 
	margin: 5px;
	border-radius:5px;
}

main textarea {
	width:90%;
}

input[type="submit"], input[type="reset"] {
	font-size:13pt;
	background:var(--accentbg);
}

input[type="submit"]:hover, input[type="reset"]:hover {
	background:var(--hr);
	cursor:pointer;
}

main ul, ol { 
	list-style-position: outside;
	margin: 8px 0 8px 20px;
}

main li {
	margin:5px 0 5px 0;
	line-height:1.5;
}

main summary {
	cursor:pointer;
	margin: 5px 0px 5px 0px;
}

main details {
	padding:10px;
	background:var(--accentbg);
	margin:5px 0 5px 0;
    border-radius:5px;
}

main hr {
	border:0.5px solid var(--hr);
    margin:20px auto 20px auto;
}

main pre {
	padding:10px;
	background:var(--accentbg);
	margin:10px auto 10px auto;
	border-radius:5px;
	overflow:auto;
}

#main-footer {
	text-align:center;
	border-top: 0.5px solid var(--hr);
	margin-top:10px;
	padding:10px;
}

@media screen and (max-width:600px) {
    #main-header {
        font-size:3.5rem;
        line-height:1;
    }
    
    .badge {
        font-size:1.2em;
    }
    
    main h1 {
        font-size: 2em;
    }
    
    main h2 {
        font-size: 1.6em;
    }
    
    main h3 {
        font-size: 1.3em;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color:#ebeae5;
        --background:#302624;

        --header:#247506;
        --headercolor:#FFF;
        --subtitle:#f4da36;
        --shadow:rgb(0,0,0,0.3);
        
        --navborder:#ee3a11;
        --navhover:#f4da36;
        
        --link:#ec6b1c;
        --linkhover:#fb8a45;
        
        --formbg:#302624;
        --formcolor:#ebeae5;
        
        --accentbg:#281f1d;
        --hr: #838668;
    }
    
    .badge {
        background:#8f3904;
    }


	main img {
		opacity:0.6;
	}
	
	main img:hover {
		opacity:1;
	}

	main a img:hover {
		opacity:1;
	}
}