@import "fonts/fonts.css";

:root{
  --font-size-body: 14pt;
  --font-size-small: 10pt;
  --font-size-header: 18pt;
  --font-size-footer: 18pt;
  --font-size-works: 35pt;
  --font-size-news: 14pt;
  --font-size-about: 14pt;
  --icon-size: 1.6em;
  --margin-large: 50px;
  --margin-normal: 20px;
  --margin-small: 10px;
}

@media screen and (min-width: 1024px) {
  :root{
    --font-size-body: 20pt;
    --font-size-small: 14pt;
    --font-size-header: 32pt;
    --font-size-footer: 32pt;
    --font-size-works: 40pt;
    --font-size-news: 20pt;
    --font-size-about: 20pt;
  }
}

@media screen and (min-width: 1200px) {
  :root{
    --font-size-header: 40pt;
    --font-size-footer: 40pt;
    --font-size-works: 70pt;
  }
}

@media screen and (min-width: 1920px) {
  :root{
    --font-size-header: 50pt;
    --font-size-footer: 50pt;
    --font-size-works: 85pt;
  }
}

.desktop {
  display: none;
}

body{
  font-family: Hiragino Favorit, sans-serif;
  font-size: var(--font-size-body);
  margin-top: var(--margin-large);
  font-kerning: normal;
  color: black;
  cursor: url(Pointer.cur), default;
}

body.zh{

}

a:link, a:visited{
  color: inherit;
  cursor: url(Hover.cur), pointer;
}

button{
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  cursor: url(Hover.cur), pointer;
  line-height: 1em;
  color: inherit;
}

header{
  position: fixed;
  top: 0;
  z-index: 999;
  font-size: var(--font-size-header);
  line-height: 1em;
}

header h1 {
  font-size: 1em;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

footer {
  font-size: var(--font-size-footer);
  letter-spacing: -0.04em;
  width: 100%;
}

header a,
footer a{
  text-decoration: none;
}

.languages ul{
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.languages li{
  display: inline-block;
  margin: 0;
}

.languages li:not(.active) a{
  color: #bbb;
}

.languages li:first-child a:after{
  content: '/';
}

.main-menu ul{
  list-style: none;
}

.menu-toggle{
  font-size: 1em;
  color: transparent;
}

.menu-toggle label{
  font-size: 0;
}

.menu-toggle:before {
  content: '';
  background-image: url('./icons/open.png');
  background-size: var(--icon-size);
  display: block;
  mix-blend-mode: multiply;
  height: 1em;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  top: -10px;
}

.menu-open .menu-toggle:before{
  background-image: url('./icons/close.png');
}

.header-mobile{
  display: grid;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  padding: var(--margin-small);
  z-index: 999;
  grid-template-columns: 1fr 100px;
  box-sizing: border-box;
}

.header-mobile .languages{
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  text-align: right;
}

.footer-mobile{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
}

.en .footer-mobile{
  bottom: -0.175em;
}

.footer-mobile .menu-open,
.footer-mobile .menu-close{
  display: block;
  width: 100%;
  text-align: center;
  letter-spacing: -0.04em;
}

.footer-mobile .menu{
  position: absolute;
  left: 0;
  width: 100vw;
  height: 25vh;
  background: #ffffff;
  z-index: -1;
  bottom: -60vh;
  transition: bottom .5s;
}

.footer-mobile.menu-open .menu{
  bottom: 0;
}

.footer-mobile .menu-close{
  display: none;
}

.footer-mobile.menu-open .menu-close{
  display: block;
}

.footer-mobile.menu-open .menu-open{
  display: none;
}

.footer-mobile ul{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 var(--margin-small);
  padding: 0;
  text-align: center;
  border-bottom: 1pt solid #000000;
}

.footer-mobile li{
  display: inline-block;
}

.footer-mobile .impressum{
  position: absolute;
  right: var(--margin-small);
  top: calc(var(--font-size-footer) * 1.4);
  font-size: var(--font-size-small);
}


button.home.desktop{
  font-size: var(--font-size-footer);
  letter-spacing: -0.04em;
  color: transparent;
  position: fixed;
  right: 0;
  top: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  overflow: visible;
  z-index: 999;
}

button.home.desktop:before{
  content: '';
  background-image: url('./icons/x.png');
  background-size: var(--icon-size);
  background-position: center;
  position: absolute;
  top: 20px;
  right: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  mix-blend-mode: multiply;
}

.content{
  padding: var(--margin-small);
}

.shadow img{
  filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.5));
}

@media screen and (min-width: 1024px) {
  body{
    margin-top: 0;
  }
  .mobile{
    display: none;
  }
  .desktop{
    display: block;
  }

  footer {
    position: fixed;
    z-index: 999;
    bottom: -.15em;
    left: 0;
  }

  .footer-desktop{
    display: grid;
    grid-template-columns: 1fr var(--icon-size);
    grid-template-rows: 1em;
    position: relative;
  }

  .footer-desktop .impressum{
    position: absolute;
    right: 0;
    bottom: -.45em;
    letter-spacing: -0.01em;
    font-size: var(--font-size-small);
  }

  .footer-desktop .menu{
    display: block;
    position: relative;
    opacity: 0;
    transition: opacity .5s;
    line-height: 1em;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 0;
    grid-column-end: 2;
  }

  .footer-desktop.menu-open .menu{
    opacity: 1;
  }

  .footer-desktop .menu-toggle{
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
  }

  .footer-desktop .languages{
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .footer-desktop .main-menu ul{
    width: 14em;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0;
  }

  .zh .footer-desktop .main-menu ul{
    width: 11em;
    position: relative;
    top: -0.125em;
  }

  .content{
    padding: var(--margin-normal);
  }
}