:root {
--background-dark: #005cbc;
--background-light: #eee;
--background-mob: #202;
--highlight: #fd9;
--accent: #005cbc22;
--accent2: #fff;
--accent3: #fff;
--white-text: #ffe;
--dark-text: #332;
--sans-text: Helvetica;
--serif-text: Optima;
--shadow: 0 0 .5rem #005cbc;
--shadow-des: 0 0 .5rem #3325;

}

@keyframes slideFromTop {
  0% {
    transform: translateY(-50%) translateX(-20%) rotate(-12deg);
    filter: blur(.5rem);
  }
  100% {
    transform: translateY(0) rotate(0deg);
    filter: blur(0);
  }
}

@keyframes deBlur {
  0% { 
    filter: blur(.5rem); 
    transform: rotate(15deg) translateY(50%);
  }
  100%  { 
    filter: blur(0); 
    transform: rotate(-2deg) translateY(-50%);
  }
}

body {
  background: var(--background-light);
  -webkit-text-size-adjust: 100%;
  font-family: var(--serif-text);
  color: var(--dark-text);
  padding: 0;
}

a {
  color: var(--background-dark);
  text-decoration: none;
} a:hover {
  text-decoration: underline;
}

container {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: scroll;
  font-size: 1.15rem;
}

page {
  display: block;
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  padding: 1rem;
  padding-bottom: 5rem;
}

h1 {
  display: block;
  top: 0;
  font-size: 2.25rem;
  font-weight: 100;
  background: var(--background-light);
}

h2 {
  font-size: 1.25rem;
  font-weight: 100;
  line-height: 1.4rem;
  border-bottom: 1px solid var(--dark-text);
  padding-bottom: .25rem;
}

h3 {
  font-size: 1.4rem;
  font-weight: 200;
  line-height: 1.65rem;
  border-bottom: 1px solid var(--dark-text);
  padding-bottom: .25rem;
}

h2, h3, block, icon, design {
  margin-bottom: 2rem;
}

block {
  display: block;
  background: var(--highlight);
  color: var(--dark-text);
  padding: 1rem;
  width: fit-content;
}

icon, name {
  display: block;
  padding: 1rem;
  background: var(--accent);
  cursor: pointer;
  transition: .3s;
}

icon:hover {
  box-shadow: var(--shadow);
}

icon label, design label { 
  display: block;
  font-weight: 600;
  margin-bottom: .5rem;
  cursor: pointer;
  transition: .5s;
}

icon:hover label, design:hover label {
  color: var(--background-dark);
}

description, p, name { 
  line-height: 1.5rem;
  margin-block: 0;
  margin-bottom: 1rem;
}

icon img {
  width: 4.5rem;
  height: 4.5rem;
  box-shadow: none;
  float: left;
  margin: 0;
  margin-right: 1rem;
}

icon em {
  display: block;
  padding-top: .5rem;
  font-size: .9rem;
  line-height: 1.2rem;
}

icon a.pub {
  display: block;
  color: #000;
  margin-bottom: 1rem;
  margin-left: 1rem;
  text-indent: -1rem;
} icon a.pub:hover {
  color: var(--background-dark);
} icon a.pub:last-of-type {
  margin-bottom: 0;
}

visions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
}

design {
  display: inline-block;
  position: relative;
  padding: 1rem;
  background: var(--accent2);
  width: calc(50% - 3rem);
  cursor: zoom-in;
  transition: transform .5s;
} design.active {
  width: 100%;
  cursor: zoom-out;
}

design:not(.active):hover {
  transform: rotate(-4deg);
  box-shadow: var(--shadow-des);
}

design:nth-of-type(2n):not(.active):hover {
  transform: rotate(4deg);
  box-shadow: var(--shadow-des);
}

design img {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0;
}

design img.deets {
  display: none;
} design.active img.deets {
  display: block;
}

name {
  background: var(--accent3);
  cursor: default;
}