/* DEFAULT STYLES, ALL MEDIA */

@font-face {
  font-family: "PoiretOne";
  src: url('/fonts/poiret-one-v8-latin-regular.eot');
  src: url('/fonts/poiret-one-v8-latin-regular.ttf') format('truetype');
}

.center { text-align: center; }
.tar { text-align: right; }
.fll { float: left; margin: 0 1em 0 0; }
.flr { float: right; margin: 0 0 0 1em; }
.cll { clear: left; }
.clr { clear: right; }
.clb { clear: both; }

body {
  margin: 0;
  padding: 0;
  font-size: calc(10px + .5vw);
  font-family: "PoiretOne",Roboto,Ubuntu, "Segoe UI",Verdana,Arial,sans-serif;
  font-weight: 300;  color: silver;
}
body *:focus { outline: none; text-shadow: 0 0 10px #EEF; }

header {
  background: url("/img/Image by standret on Freepik.jpg") top right no-repeat #000000;
  background-size: cover;
  height: 36vh;
}
header h1 { margin: 0; padding: 0; }
header h1 img {
  margin: 10% 0 0 10%;
  padding: 0;
  border-radius: 10px;
  box-shadow: 0 0 1em;
  filter: drop-shadow(0 0 2vw black);
  color: black;
  }
header h1 span { display: none; }
header nav { width: 100%; background: rgba(0,0,0,.666); padding: 0; margin: 0; font-size: 110%; }


main {
  padding: 2em;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  color:#222;
  font-family: Roboto,Ubuntu, "Segoe UI",Verdana,Arial,sans-serif;
  }

footer {
  box-shadow: rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  padding: 3em;
  background: #E0E0D1;
  color: #333;
  font-family: Roboto,Ubuntu, "Segoe UI",Verdana,Arial,sans-serif;
  font-size: 90%;
  }
footer .innerdiv {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: baseline;
  }
footer h2 img { position: relative; left: 0; top: .5em; margin: 0 1em 0 0; height: 2em; width: 2em; }
footer div.col { min-width: 20em; text-align: center; }
footer div.col_full { width: 100%;  color: #333; }
footer a.button {
  text-decoration: none;
  background: #EEE;
  padding: 0 1em 1em 1em;
  border: 1px solid white;
  border-radius: 3em;
  display: inline-block;
  width: 66%;
}
/*footer a.extern { background: #76C2AF; }*/
footer a.button img { position: relative; left: 0; top: .5em; height: 2em; width: 2em; margin-right: 1ex; }
footer table {
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 auto;
  }
footer table td { padding: 0 1em; }
footer table img { width: 4em; }

#booking { text-align: center; width: 100%; margin: 0; padding: 3ex 0; }
#booking a:link, #booking a:visited {
  display: inline-block;
  color: white;
  font-size: 150%;
  font-weight: bold;
  background: rgba(0,0,0,.75) url(/img/1day.png) center left no-repeat;
  background-size: contain;
  border-radius: 1ex;
  border: 3px solid transparent;
  padding: 2ex 2em 2ex 4em;
  text-decoration: none;
}
#booking a:active, #booking a:hover, #booking a:focus { border-color: #FC2; }

/* STYLES FOR BIG SCREENS */
@media only screen and (min-width: 700px) {
  header { height:100vh; position: relative; }
  header h1 img { width: 8em; height: 8em; }

  nav {
    text-align: right;
    z-index: 900;
    transition: all 1s ease;
  }
  nav span { display: none; }
  nav a:link,
  nav a:visited {
    text-decoration: none;
    color: #DDC;
    font-weight: bold;
    font-size: 150%;
    display: inline-block;
    margin: 1ex 1em;
  }
  nav a:active,
  nav a:hover { text-decoration: underline; color: white; }

  nav.sticky {
    position: fixed;
    top: 0;
    bottom: auto;
    font-size: 90%;
    background: #222;
    box-shadow: 0 0 1em black;
    transition: all 1s ease;
  }

  main section {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  main section h2 { width: 100%; }
  main section article { max-width: 45vw; }
}


/* STYLES ONLY FOR MOBILE */
@media only screen and (max-width: 699px) {
  header h1 img { width: 3em; height: 3em; margin: 2ex; filter: none;}
  nav {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
    z-index: 1000;
    align-items: stretch;
    top: 10vh !important;
  }
  nav span { display: block; position: absolute; top: 0; right: 1em; font-size: 500%; color: white; }
  nav a:link,
  nav a:visited {
    text-decoration: none;
    color: #333;
    background: white;
    font-weight: bold;
    font-size: 150%;
    text-align: center;
    width: 100%;
    margin: auto;
    padding: 5vh 0;
    border-bottom: 1px solid #333;
    flex: 1;
    display: none!important;
    }
  nav a:active,
  nav a:hover { text-decoration: underline; color: white; }

}
#E404 h1, #E404 h2, #E404 p { font-family: "PoiretOne"; text-align: center; }

#E404 details {
  border-block-end: 1px solid #000;
  margin-block: 1ex;
  padding-block: 1ex;
}
#E404 summary {
  /* Pin the custom marker to the container */
  position: relative;
  /* Register summary as an anchor element */
  anchor-name: --summary;
  &::marker {
    content: "";
  }
  &::before,
  &::after {
    /* Custom marker dimensions */
    content: "";
    border-block-start: 3px solid orangered;
    height: 0;
    width: 1rem;

    /* Positions the lines */
    inset-block-start: 50%;
    inset-inline-end: 0;

    /* Anchor the shape to the summary */
    position: absolute;
    position-anchor: --summary;
    position-area: top end;
  }
  /* Rotate just the ::after line to create a "+"" shape */
  &::after {
    transform: rotate(90deg);
    transform-origin: 50%;
  }
}
/* Rotate the line when open */
#E404 details[open] summary::after {
  transform: rotate(0deg);
}
#E404 h1 {
  font: 130px "PoiretOne",Roboto,Ubuntu, "Segoe UI",Verdana,Arial,sans-serif;
  font-weight: 100;
  color: silver;
  background: url("/img/kitt.gif") center left no-repeat #000223;
  background-size: contain;
  padding: 0 20px 0 0;
  margin: 0;
  text-align: right;
  }
#E404 h2 { font-size: 65px; }