:root {
  --main-dark: #525252;
  --main-light: #E0E0E0;
  --main-lighter: #F1F1F1;
  --main-accent: #1faeff;
}

body {
  margin: 0;
  font-family: calibri, sans-serif;
}

.content {
  padding: 16px 10%;
}

/* header */

.header-image {
  background-image: url("../imageres/DSC_0054_crop_web.jpg");
  background-color: var(--main-accent);
  width: 100%;
  background-position: 50% 15%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 30px 0px;
}

.header-text {
  position: relative;
  text-align: center;
  background-color: rgba(0,0,0,0.3);
  margin: 0% 10%;
  padding: 1px;
}

.header-text h2 {
  color: #fff;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.4em;
  font-size: 2em;
}

/* topnav */

.topnav {
  background-color: var(--main-dark);
  display: flex;
  z-index: 9999999999999999999;
}

.topnav a {
  flex-grow: 1;
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover, a:focus {
  background-color: var(--main-light);
  color: black;
}

.active {
  background-color: var(--main-accent) !important;
  color: white !important;
}

.topnav .icon {
  display: none;
}

/* buttons */

.styledbtn {
  padding: 3px 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  font-family: calibri, sans-serif;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: white;
  color: black;
  border: 2px solid  var(--main-dark);
  border-radius: 3px;
}

.styledbtn:hover {
  border: 2px solid var(--main-accent);
}

/* inputs */

input, select, textarea, button {
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  font-family: calibri, sans-serif;
  font-size: 12pt;
  transition-duration: 0.4s;
  background-color: white;
  color: black;
  border: 2px solid  var(--main-dark);
  border-radius: 3px;
}

input[type=submit] {
  text-align: center;
  cursor: pointer;
}

input[hidden] {
  display: none !important;
}

input:hover, select:hover, textarea:hover, button:hover {
  border: 2px solid var(--main-accent);
}

input:focus, select:focus, textarea:focus, button:focus {
  border: 2px solid var(--main-accent);
}

/* hr */
hr {
  border-style: solid;
  color: var(--main-dark)
}

/* responsive */

@media screen and (max-width: 768px) {
  .header-image {
    padding: 0px;
  }
  .header-text {
    margin: 0%;
    padding: 30px;
  }
  .header-text h2 {
    font-size: 1.5em;
  }
  .content.responsive {
    padding: 67px 10%;
  }
  .topnav {
    overflow: hidden;
    display: block;
  }
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block !important;
  }
  .topnav.responsive {
    overflow: visible;
    position: absolute;
    width: 100%;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive.sticky .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: flex;
    text-align: left;
  }

  .sticky {
    max-height: 100%;
    overflow-y: auto !important;
  }
  .dropdown {
    display: none !important;
  }
  .dropdown.responsive {
    display: block !important;
  }
  .dropdown-content {
    position: relative !important;
    top: 0px !important;
    margin-bottom: -5px;
  }
  .dropbtn {
    text-align: left !important;
    width: 100%;
  }
}

/* sticky */

.sticky {
  position: fixed !important;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

/* dropdown */

.dropbtn {
  flex-grow: 1;
  background-color: var(--main-dark);
  border: none;
  cursor: pointer;
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  font-size: 17px;
  font-family: calibri, sans-serif;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: var(--main-light);
  color: black;
}

.dropdown {
flex-grow: 1;
  position: relative;
  display: inline-flex;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 51px;
  background-color: var(--main-lighter);
  width: 100%;
  overflow: auto;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  float: none;
  text-align: left;
}

.dropdown a:hover {
  background-color: var(--main-light);
}

.show {display: inline-block;}

/* twemoji */

img.emoji {
   height: 1.1em;
   width: 1.1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}