/**
 * Custom theme
 */

:root {
  --font-family: "semplicitapro", sans-serif;
  --font-weight: 400;
  --form-element-spacing-vertical: 1rem;
  --form-element-spacing-horizontal: 1.25rem;

  scroll-behavior: smooth;
  height: 100%;

}

.mobile {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --font-family: "semplicitapro", serif;
  --font-weight: 500;
}


@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {

    --primary: hsl(182, 23%, 56%);
    --primary-hover: hsl(182deg 33% 66%);
    --primary-focus: hsl(182deg 33% 26%);
    --muted-color: hsl(204, 10%, 60%);
    
  }
}

@media only screen and (prefers-color-scheme: light) {
  :root {

    --primary: hsl(182, 23%, 56%);
    --primary-hover: hsl(182deg 33% 66%);
    --primary-focus: hsl(182deg 33% 26%);
    --muted-color: hsl(205deg, 10%, 60%);
  }
}



body>main {
    box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.2), 0 -3rem 3rem rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}

body>section {
  --border-radius: 0;
}

body>header {
  background-image: url('/img/back-top.webp'); /*, linear-gradient(rgba(255, 255, 255,1),  rgba(255, 255, 255,0));*/
  background-attachment: scroll;
  background-size: cover;
  background-blend-mode: soft-light;
  background-repeat: no-repeat;
  background-position: center center;
  background-position-y: calc(var(--scroll) * 50vh);
  height: 100hv;
  min-height: 100vh;
  min-height: -moz-available;
  min-height: -webkit-fill-available;
  min-height: fill-available;
  overflow: hidden;
}

#front {
  background: linear-gradient(rgba(0,0,0,0.0),  rgba(0,0,0,0.6)); 
  z-index: 0;
  position: relative; 
  left: -1rem; 
  width: 100vw;
  padding-left: var(--spacing);
}

#front> hgroup::after {
  padding-top: 3rem;
}

nav.desktop a {
  font-size: xx-large;
}


body>footer small {
  margin-bottom: 0;
  padding: 0;
  color: var(--muted-color);
  list-style: none;
}

body> footer section:last-of-type {
  margin-bottom: 0rem;
}

hgroup:after {
  display: block;
  max-width: 100px;
  margin-top: 1rem;
  border-bottom: 0.125rem solid var(--primary);
  content: "";
}

footer a svg {
  width: 2rem;
}

footer a {
  margin-right: 1rem;
}

footer a:focus {
  background-color: transparent;
}

footer a:hover {
  text-decoration: none;
}

.super-important {
  display: none;
}

@media screen and (min-width: 801px) {
  .mobile {
    display: none;
  }

  body header nav.desktop {
    display: flex;
  }
}

@media screen and (max-width: 800px) {

  :root {
    font-size: larger
  }

  #front {
    text-align: right;
  }

  body>header {
    background-image: url('/img/back-mobile.webp');
    min-height: 95vh;
  }

  body>footer {
    margin:0 auto;
    text-align: center;
    padding: 3rem;
  }

  aside.mobile input[type=checkbox].hide-input:checked+nav {
    height: 1px; /* must be 1px for aside.mobile>nav backdrop-filter to work on Safari iPhone */
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  aside.mobile {
    margin-left: -1rem;
    width: 100vw;
  }

  aside.mobile>nav {
    padding-top: 2.5rem;
    padding-right: var(--spacing);
    padding-left: var(--spacing);
    background-color: rgba(17, 25, 31, 0);
    transition: opacity 0.3s ease-in-out;
    backdrop-filter: blur(2rem) brightness(30%);
    -webkit-backdrop-filter: blur(2rem) brightness(30%);
    opacity: 1;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    text-align: right;
    height: 120%;
  }

  nav.mobile {
    padding-bottom: 1.7rem;
  }

  input.hide-input {
    position: absolute;
    left: -999em;
  }

  label.toggle {
    display: inline-block;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 3px;
    user-select: none;
  }

  .mob-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4rem;
  }

  .mob-menu-header>img {
    opacity: 0.9;
  }

  .mobile {
    display: flex;
  }

  .desktop {
    display: none;
  }
}