/* Basics & Typography */

@font-face {
	font-family: 'Lausanne';
  src: url('lausanne.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

html { 
  font-family: 'Lausanne', Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 1;
  cursor: none;
}

body {
	color: #000;
	width:100%;
  height:100%;
  overflow: hidden;
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

body a:link, body a:visited {
	color: #000;
	text-decoration: none;
}
body a:hover, body a:active {
	cursor: none;
	text-decoration: underline;
}

#content {
  position: absolute;
  height: 100%;
}

#profile_less, #profile_more {
	position: relative;
	height: calc(100vh - 7rem);
	overflow-y: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  margin-left: 4rem;
  margin-right: 4rem;
}

*::-moz-selection { background: #000; color: #fff; }
*::selection { background: #000; color: #fff; }

p {
}

h1 {
	font-family: 'Lausanne', Helvetica, Arial, sans-serif;
	font-size: 11em;
	font-weight: normal;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

#fixed {
	position: relative;
}

#scrollable {
	position: relative;
	height: 23rem;
	overflow-y: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  scroll-snap-type: y mandatory;
}

#scrollable::-webkit-scrollbar {
  display: none;
}

#scrollable h1 {
  scroll-snap-align: start;
  margin-bottom: 1em;
}

#marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 8rem;
  overflow: hidden;
}

#nav {
	position: absolute;
	display: flex;
	height: 4rem;
	margin-top: 1.5rem;
	overflow: hidden;
	-ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  scroll-snap-type: y mandatory; 	
  white-space: nowrap;
  will-change: transform;
  animation: marquee 30s linear infinite;
}
	
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

#nav a:link {
	color: #000;
	font-size: 2.5em;
	text-decoration: none;
	text-align: center;
	padding: 0.25em 0.5em;
	margin: 0 0.25em;
	border: 2px solid;
	border-radius: 2em;
	-webkit-border-radius: 2em;
}
#nav a:visited {
	background: #FFF;
	color: #000;
}
#nav a:hover {
	background: #000;
	color: #FFF;
}

sup {
	font-size: 2rem;
	vertical-align: text;
	position: relative;
	top: -6rem;
	left: -1.8rem;
}


#retype {
	display:  inline-block;
	max-width: max-content;
	width: 2rem;
  animation: typing-erase 4s linear infinite;
  overflow: hidden; 
  border-right: .01em solid #000;
  white-space: nowrap; 
}
#retype::after {
  content: "";
  animation: change-text 40s linear infinite;
}

@keyframes typing-erase {
  0% { width: 0 }
  40% { width: 100% }
  50%, 100% {width: 0 }
}

@keyframes change-text {
	0% { content:"visual"; }
  10% { content:"graphic"; }
  20% { content:"digital"; }
  30% { content:"ummm"; }
  40% { content:"type"; }
  50% { content:"visual"; }
  60% { content:"multidisciiiiiii"; }
  70% { content:"graphic"; }
  80% { content:"!@#$%&"; }
  100% { content:"type"; }
}

#sidebar {
	position: fixed;
	right: 6rem;
	top: 4rem;
	font-size: 2em;
	transform-origin: top right;
	transform: rotate(-90deg);
}

#more_less {

}

#cursor {
	position: absolute;
  pointer-events: none;
}

#cursor__circle {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: difference;
  z-index: 1000;
}

#cursor__circle circle {
  fill: white;
  stroke: black;
}

.inverted { color: #fff;	}
.inverted::-moz-selection { background: #000; color: #fff; }
.inverted::selection { background: #000; color: #fff; }

.hidden {display: none;}

body.dark {
	background: #111;
	color: #fff;
}
body.dark a:link, body.dark a:visited {
	color: #fff;
	text-decoration: none;
}
body.dark a:hover, body.dark a:active {
	cursor: none;
	text-decoration: underline;
}

body.dark *::-moz-selection { background: #fff; color: #111; }
body.dark *::selection { background: #fff; color: #111; }

body.dark #retype {
  border-right: .01em solid #fff;
}

body.dark #nav a:link {
	background: #111;
	color: #fff;
}
body.dark #nav a:visited {
	background: #111;
	color: #fff;
}
body.dark #nav a:hover {
	background: #fff;
	color: #222;
}

body.dark .inverted { color: #111;	}
body.dark .inverted::-moz-selection { background: #fff; color: #111; }
body.dark .inverted::selection { background: #fff; color: #111; }