@font-face {
  font-display: swap;
  font-family: 'Bricolage Grotesque 96pt LowEMBox';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/BricolageGrotesque96ptLowEMBoxRegular.eot');
  src: url('../fonts/BricolageGrotesque96ptLowEMBoxRegular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/BricolageGrotesque96ptLowEMBoxRegular.woff2') format('woff2'),
       url('../fonts/BricolageGrotesque96ptLowEMBoxRegular.woff') format('woff'),
       url('../fonts/BricolageGrotesque96ptLowEMBoxRegular.ttf') format('truetype'),
       url('../fonts/BricolageGrotesque96ptLowEMBoxRegular.svg#BricolageGrotesque96ptLowEMBoxRegular') format('svg');
}


@media screen and (min-width: 640px){
    .flex-container {
        display: flex;
    }    
}


@keyframes move-bg {
  0%,
  100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 0%;
  }
}

html, body {
	font-family: 'Bricolage Grotesque 96pt LowEMBox'; 
}

html {
	  overflow: hidden;
	  height: 100vh;
}

body {
	background-color: black;
	margin: 0;
	overflow: scroll;
	height: 100vh;
}

@media (prefers-reduced-motion: no-preference) {
  .project {
	animation: fade-in-out linear both;
	animation-timeline: view();
	animation-range: cover 0% cover 100%;
	}
	
	@keyframes fade-in-out {
	15% {
        opacity: 0;
    }
    30%, 60% {
        opacity: 1;
    }
    85% {
        opacity: 0;
    }}
	
	
.hero {
    padding-left: 1.0em;
    padding-right: 0.8em;
    padding-top: 0.1em;
	background: linear-gradient(75deg, #a4a4a4, #c4c4c4, #e6e6e6, #c4c4c4, #a4a4a4);
	background-size: 300%;
    animation: move-bg 90s ease infinite;
}

p {
	font-family: 'Bricolage Grotesque 96pt LowEMBox', "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: normal;
	font-size: calc(7px + (10 - 7) * ((100vw - 320px) / (1600 - 320)));
	line-height: 200%;
	letter-spacing: 1.5%;
	}

p span.kanji {
 font-size: calc(14px + (14 - 14) * ((100vw - 320px) / (1600 - 320)));
}

.plus {
	padding-top: 0.8em;
	padding-bottom: 1.8em;
    padding-left: 0.8em;
	background: linear-gradient(75deg, #202020, #404040, #101010, #404040, #202020);
	background-size: 300%;
    animation: move-bg 90s ease infinite;
	}

	@keyframes fade-in {
	  from {opacity: 0;}
	  to {opacity: 1;}
}

a:link {
  text-decoration: none;
  color: #b4b4b4;
}
a:visited {
  text-decoration: none;
  color: #b4b4b4;
}
a:hover {
  color: black;
}
a.end:link {
  text-decoration: none;
  color: black;
}
a.end:visited {
  text-decoration: none;
  color: black;
}
a.end:hover {
  color: #b4b4b4;
}
a.book:link {
  text-decoration: underline;
  color: black;
}
a.book:visited {
  text-decoration: underline;
  color: black;
}
a.book:hover {
  color: #7d7d7d;
}

#vcard {
	position: fixed;
	left: 20px;
	top: calc(40px + (30 - 40) * ((100vw - 320px) / (1600 - 320)));
	z-index: 10000;
	width: 98%;
	}

#vcard h1 {
	font-family: 'Bricolage Grotesque 96pt LowEMBox', sans-serif;
    font-weight: normal;
	font-size: calc(20px + (80 - 20) * ((100vw - 320px) / (1600 - 320)));
	letter-spacing: 0.6rem;
	line-height: 155%;
	background: linear-gradient(90deg, transparent, #c4c4c4, transparent, transparent, #d4d4d4, transparent);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: move-bg 60s ease infinite;
	background-clip: text;
	background-size: 1000%;
	color: transparent;
	display: inline-block;
	text-align: left;
	pointer-events: none; 
}

#vcard2 {
	position: fixed;
	left: 24px;
	top: 20px;
	z-index: 10000;
	width: 75%;
	}

#vcard2 h1 {
	font-family: 'Bricolage Grotesque 96pt LowEMBox', sans-serif;
    font-weight: normal;
	font-size: calc(7px + (9 - 7) * ((100vw - 320px) / (1600 - 320)));
	letter-spacing: 0.01rem;
	line-height: 185%;
	color: #b4b4b4;
}

#cw {
	position: fixed;
	right: 10px;
	top: 20px;
	z-index: 10000;
	}

.bild-container {
  flex: 1;
  position: relative;
  }

.bild-container img {
  display: block;
  width: 100%;
  height: auto;
  }

.ID-container {
  flex: 1;
  width: 100%;
  position: relative;
  }

.ID-container img {
  display: block;
  width: 100%;
  height: auto;
  }

div {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
  overflow-y: scroll; 
}

div::-webkit-scrollbar {
  display: none; 
}

#ID {
	position: fixed;
	left: 3%;
	right: 3%;
	top: 0.5%;
	background-color: #c4c4c4;
	padding: 1.2em 1.5em;
	z-index: 10000;
	width: 80%;
	height: 85%;
	}

#ID h1 {
	font: 'Bricolage Grotesque 96pt LowEMBox', sans-serif;
	font-weight: normal;
	font-size: calc(20px + (75 - 20) * ((100vw - 320px) / (1600 - 320)));
	letter-spacing: 0.4rem;
	line-height: 160%;
	padding: 0em 0em;
	}

#ID h2 {
	font: 'Bricolage Grotesque 96pt LowEMBox', sans-serif;
	font-weight: normal;
	font-size: calc(9px + (12 - 9) * ((100vw - 320px) / (1600 - 320)));
	letter-spacing: 1%;
	line-height: 180%;
	}

#ID p {
	column-width: 300px;
    column-gap: 3em;
	font: 'Bricolage Grotesque 96pt LowEMBox', sans-serif;
	font-weight: normal;
	font-size: calc(8px + (10 - 8) * ((100vw - 320px) / (1600 - 320)));
	letter-spacing: 1%;
	line-height: 200%;
	}
	
#IM {
	position: fixed;
	left: 5%;
	right: 5%;
	top: 1%;
	background-color: #c4c4c4;
	padding: 1.2em 1.5em;
	z-index: 10000;
	width: 55%;
	height: 90%;
	}

#IM h2 {
	font: 'Bricolage Grotesque 96pt LowEMBox', sans-serif;
	font-weight: normal;
	font-size: calc(10px + (14 - 10) * ((100vw - 320px) / (1600 - 320)));
	letter-spacing: 1%;
	line-height: 180%;
	}

#IM p {
	font: 'Bricolage Grotesque 96pt LowEMBox', sans-serif;
	font-weight: normal;
	font-size: calc(7px + (8 - 7) * ((100vw - 320px) / (1600 - 320)));
	letter-spacing: 1%;
	line-height: 200%;
	}

button {
  font: 'Bricolage Grotesque 96pt LowEMBox', sans-serif;
  font-weight: normal;
  align-items: center;
  padding: 4px 4px 4px 4px;
  border-radius: 18px;
  font-size: calc(10px + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
  color: black;
  background-color: transparent;
  border: 1px solid #1A1A1A;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.cw {
  font: 'Bricolage Grotesque 96pt LowEMBox', sans-serif;
  font-weight: normal;
  align-items: center;
  padding: 4px 4px 4px 4px;
  border-radius: 14px;
  font-size: calc(10px + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
  color: #b4b4b4;
  background-color: transparent;
  border: 1px solid #b4b4b4;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button:hover {
	background-color:black;
	color: #b4b4b4;
}
button:active {
	position:relative;
	top:1px;
}
.cw:hover {
	background-color:#b4b4b4;
	color: black;
}

:popover-open {
  padding: 12px;
  transition: opacity 1;
  opacity: 1;
  border: none;
  background: #b4b4b4;

  &::backdrop {
    background: rgba(0,0,0,0.5);
    transition: opacity 0.5s;
    opacity: 1;
  }

  @starting-style {
    opacity: 0;

    &::backdrop {
      opacity: 0;
    }
  }