:root {
  --font: 'at_osmosebold','Arial','Helvetica Neue', sans-serif;
  --font_aux_1: 'at_osmoselight','Arial','Helvetica Neue', sans-serif;
  --font_aux_2: 'at_osmosemedium','Arial','Helvetica Neue', sans-serif;
  --white: rgb(255,255,255);
  --black: rgb(32,32,32);
  --blue: rgb(20,50,255);
  --red: rgb(255,32,32);
  --green: rgb(32,255,32);
  --gray: rgb(235,235,235);
  --orange: rgb(255,100,10);
}
.icon {
  position: fixed; z-index: 3;
}
body {
	
  font-family: var(--font);
  text-transform: lowercase;
	background-color: var(--white);
	color: var(--black);
  height: 100%;
  width: 100%;
}

#date {
  color: var(--black);
  font-size: 8px;
}

.header{
  position: relative;
  top: 72px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  width: 100vw;
  height: 100vh;
}
.header a{ font-family: 'atosmose-medium';font-size: 36px; }
.header a:after { content:' 🌍 '; }
.header a:hover {
  text-decoration: none;
  filter: blur(3px);
  text-decoration: none;
  letter-spacing: .72px;
  text-shadow: 4px 24px 2px var(--black);
}

.links {
  position: absolute;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 16px;
  z-index:2;
  
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 1.5s;
}

.projects {
  top: 0px;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 28px;
}

h1 {
	font-size: 54px;
  text-transform: lowercase;
  line-height: 120px;
}

h2{ margin: 8px; font-size: 24px; }
h2.acronym{ margin: 8px; font-size: 60px; }
h2.acronym:hover { text-transform: lowercase; }

a{
  font-family: var(--font_aux_1);
  text-decoration: none;
  color: var(--black);
  font-size: 32px;
  margin: 4px;
  transition: background-color,  text-decoration, letter-spacing 2.5s;
  
}
a:hover{ 
   
  color: var(--black);
  background-color: rgb(245,255,10);
  filter: blur(3px);
  text-decoration: none;
  letter-spacing: .72px;
  text-shadow: 4px 24px 2px var(--black);
  animation-name:pulse;
  animation-duration: 1.24s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes pulse {
  from { opacity:0; }
  to { opacity: 100; }
}

@keyframes scroll {
  0% { left: -100%; }
  100% { left: 100%; }
}
@keyframes rotate {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateX(180deg); }
}

@keyframes scale {
  0% { transform: scale(1); }
  100% { transform: scale(.2); }
}