/* Fonts */
@font-face { font-family: Overpass; src: url(../fonts/Overpass-Regular.ttf); }
@font-face { font-family: Squares; src: url(../fonts/Squares-Bold-Free.otf); }

/* Custom colors */
:root {
  --color1: black;
  --color2: white;
  --color3: brown;
  --color4: dimgrey;
  --color5: gainsboro;
  --color6: darksalmon;
}

/* HTML tags */
* { box-sizing: border-box; }
html {  background: var(--color5); }
body { margin: 0; padding: 0; line-height: 1.2; font-family: Overpass, Arial, sans-serif; font-size: calc(0.8em + 0.4vmax); color: var(--color4); background: var(--color2); }
h1, h2, h3 { margin: 15px 0; color: var(--color1); }
a { color: inherit; text-decoration: underline solid var(--color6); }
a:hover { background: var(--color6); color: var(--color1);}
ul{ list-style-type:square; }
input, button, textarea { font-family: inherit; font-size: inherit; }
pre { background-color: var(--color5); padding: 5px 15px; font-style: italic; white-space: pre-wrap; }
label { display: block; font-weight: bold; float: left; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--color5); }
th, td { padding: 10px 15px; text-align: left; }
input, textarea { display: block; padding: 10px 5px; width: 100%; font-family: inherit; border: none; border: 1px solid var(--color5); background: var(--color2); }
textarea { height: 20vh; }
input[type=submit], button { width: inherit; padding: 10px 30px; background: var(--color3); color: var(--color2); cursor: pointer; border:none; display: initial; }
input[type=submit]:hover, button:hover { text-decoration: underline; } 
::placeholder { color: var(--color4); }
pre { padding: 5px 15px; font-style: italic; white-space: pre-wrap; }
:required  { border: 1px solid red; }

/* Classes */
.container { margin: 0 auto; max-width: 1200px; }
.header { color: var(--color2); background: var(--color3); padding: 15px; font-weight: bold; position: sticky; top: 0; z-index: 500; font-size: 120%; }
.logo { font-family: Squares, Fantasy; }
.logo2 { color: var(--color6); }
.logo:before { content: '\23F1  '; }
.hide-large { display: none; }
.footer { text-align: center; font-size: 80%; color: var(--color4); padding: 4vh 15px; background: var(--color5); }
.helptext { opacity: 0.6; font-style: italic; }
.hero { position: relative; text-align: center; color: var(--color2); object-fit: cover; height: 85vh; background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../img/time.jpg); background-size: cover; background-position: center; }
.centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3vmax; }

/* Grid */
.flex-container { display: flex; flex-wrap: wrap; }
.flex-col-1 { flex: 8.33%; }
.flex-col-2 { flex: 16.66%; }
.flex-col-3 { flex: 25%; }
.flex-col-4 { flex: 33.33%; }
.flex-col-5 { flex: 41.66%; }
.flex-col-6 { flex: 50%; }
.flex-col-7 { flex: 58.33%; }
.flex-col-8 { flex: 66.66%; }
.flex-col-9 { flex: 75%; }
.flex-col-10 { flex: 83.33%; }
.flex-col-11 { flex: 91.66%; }
.flex-col-12 { flex: 100%; }
[class*="flex-col-"] { padding: 15px; }

/* Sidenav */
.sidenav { height: 100%; width: 0; position: fixed; z-index: 1500; top: 0; right: 0; background: var(--color1); overflow-x: hidden; padding-top: 60px; font-size: 120%; }
.sidenav a { padding: 5px 20px; text-decoration: none; color: var(--color2); display: block; transition: 0.3s; margin: 10px; text-align: center; }
.sidenav a:hover { text-decoration: underline; background: none; }
.closebtn { position: absolute; top: 0; right: 25px; margin-left: 50px; font-size: 150%; color: var(--color2); cursor: pointer; }
.openbt { position: absolute; top: 15px; right: 15px; cursor:pointer; }

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px; }
  .sidenav a {font-size: 18px; }
}

/* Media query */
@media only screen and (max-width: 600px) {
	[class*="flex-col-"] { flex: 100%;}
	.show-large { display: none; }
	.hide-large { display: block; }
	.hero { height: 65vh; }
}