@font-face {
    font-family: 'Cardo';
    src: url('/assets/font/Cardo-Bold.woff2') format('woff2'),
        url('/assets/font/Cardo-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cardo';
    src: url('/assets/font/Cardo-Italic.woff2') format('woff2'),
        url('/assets/font/Cardo-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cardo';
    src: url('/assets/font/Cardo-Regular.woff2') format('woff2'),
        url('/assets/font/Cardo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {
    font-family: Cardo;
    font-weight: normal;
}

h1, h2, h3, h4, h5, h6, li, a {
    font-style: italic;
    font-weight: normal;
}

h2 { padding-bottom: 1em; }

header > hr { background: black; }

a { text-decoration: none; }

loader {
    width: 100%;
    height: 100%;
    background-color: white;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    z-index: 99;
}
loader > img {
    position: absolute;
    top: 50%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    z-index: 100;
}

/* navigation */
header { position: relative; }

header:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.08;
    background-image: url('../assets/enmossed_background_transparent.png');
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: center;
    background-size: 25%;
}

nav {
    text-align: center;
    position: relative;
}

nav li { margin-right: .5em; }

@media (hover: hover) {
    nav a:not(.home):not(.active):after {
        content: "";
        display: block;
        width: 0%;
        margin: 0 auto;
        padding-top: 0.6em;
        border-bottom: thin solid black;
        transition: .5s;
    }

    nav a:not(.home):hover:after { width: 100%; }
}

nav a.active:not(.home):after {
    content: "";
    display: block;
    width: 100%;
    margin: 0 auto;
    padding-top: 0.6em;
    border-bottom: thin solid black;
}

nav a, nav a:hover, nav a:visited { color: black; }

nav img {
    vertical-align: middle;
    display: inline;
}

/* info */
dt ~ dd { display: inline-block; }

a.info, a.info:visited {
  color: black;
  text-decoration: underline;
}

a.info:active, a.info:hover {
  color: black;
  text-decoration: underline;
  font-weight: bold;
}

article a, article a:visited {
  color: black;
  text-decoration: underline;
}

article a:active, article a:hover {
  color: black;
  text-decoration: underline;
  font-weight: bold;
}

/* contact */
form { max-width: 100%; }

/* upcoming */
dt ~ dd > p { display: inherit; }

/* releases */
div input[type="checkbox"] {
    position: absolute;
    left: -100vw;
    opacity: 0;
}
div label {
    animation: sweep .7s ease-in-out;
    cursor: pointer;
    display: inline-block;
    font-weight: normal;
    border-bottom: thin solid black;
    font-style: italic;
    margin-bottom: 1em;
}
div label:hover {
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    border-bottom: thin solid black;
    font-style: italic;
    margin-bottom: 1em;
}
div input[type="checkbox"] ~ div {
    max-height: 0em;
    visibility: collapse;
}

div input[type="checkbox"]:checked ~ div {
    animation: sweep .7s ease-in-out;
    max-height: 100%;
    visibility: visible;
}

@keyframes sweep {
    0%    {opacity: 0; max-height: 0; }
    100%  {opacity: 1; max-height: 100%; }
}

@media ( min-width: 600px )  {
    nav { padding-top: 2em; }

    nav li { margin-right: 1em; }

    header:before { background-position-x: 54.2%; }

    header hr { margin: 3.4em 0 0 0; }

    body>header {
        margin-bottom: 0; !important;
    }

    div input[type="checkbox"]:checked ~ div { margin-left: 2em; }
}
@media ( max-width: 600px )  {
    header:before {
      background-position-x: 54.2%;
      background-size: 100%;
    }
}