/* quicksand-regular - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local(''), url("quicksand-v24-latin-regular.woff2") format('woff2') /* Chrome 26+, Opera 23+, Firefox 39+ */;
}
/* quicksand-500 - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  src: local(''), url("quicksand-v24-latin-500.woff2") format('woff2') /* Chrome 26+, Opera 23+, Firefox 39+ */;
}
/* quicksand-700 - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: local(''), url("quicksand-v24-latin-700.woff2") format('woff2') /* Chrome 26+, Opera 23+, Firefox 39+ */;
}
.colors {
  --color-theme: #ff6d26;
  --color-theme-2: rgba(255,109,38,0.5);
  --color-primary: #fff;
  --color-secondary: #eee;
  --color-tertiary: #dfdfdf;
  --color-text: #000;
  color: var(--color-text);
  scrollbar-color: var(--color-theme) transparent;
  scrollbar-width: thin;
  animation: backgroundFrom 1s 1s backwards;
  background-color: var(--color-tertiary);
}
.colors .resume-preview .absolute {
  border: none;
}
.colors .resume-preview .absolute::after {
  opacity: 0;
}
.colors p {
  font-weight: 400;
}
#themeToggle {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  z-index: 100;
}
#themeToggle + label {
  position: absolute;
  top: -200px;
  left: 5vw;
  width: 40px;
  height: 265px;
  z-index: 100;
  text-align: center;
  color: #808080;
  transition: transform 0.3s cubic-bezier(0, 2, 1, 1);
  cursor: pointer;
  animation: lightSwitch 0.9s 1.2s backwards cubic-bezier(0.5, 1.6, 0.46, 0.83);
}
#themeToggle + label svg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: inherit;
  transition: transform 0.7s cubic-bezier(0, 1.4, 1, 1);
}
#themeToggle + label::before {
  content: "";
  position: absolute;
  bottom: 40px;
  margin-left: -1.5px;
  width: 3px;
  height: 100px;
  border-radius: 100px;
  color: inherit;
  border-left: 3px dashed currentColor;
}
#themeToggle + label:hover,
#themeToggle:focus-visible + label {
  transform: translateY(10px) !important;
}
#themeToggle + label:active,
#themeToggle:focus-visible + label {
  transition: transform 0.4s cubic-bezier(0, 1.56, 1, 1);
  transform: translateY(25px) !important;
  filter: brightness(2);
}
#themeToggle + label:active svg,
#themeToggle:focus-visible + label svg {
  transform: rotate(1turn);
  transition: transform 0.1s;
}
#themeToggle + label:active ~ .colors,
#themeToggle:focus-visible + label ~ .colors {
  filter: brightness(0.8);
  transition: filter 0.2s, transform 0.4s cubic-bezier(0, 2, 1, 1) !important;
}
#themeToggle:checked + label {
  color: #ffa500;
}
#themeToggle:checked ~ .colors {
  --color-theme: #e11cb0;
  --color-theme-2: rgba(225,28,176,0.5);
  --color-primary: #261b2d;
  --color-secondary: #131c27;
  --color-tertiary: #121a24;
  --color-text: rgba(255,255,255,0.8);
}
#themeToggle:checked ~ .colors .resume-preview .absolute {
  border: 4px solid var(--color-theme-2);
}
#themeToggle:checked ~ .colors .resume-preview .absolute::after {
  opacity: 0.8;
}
#themeToggle:checked ~ .colors p {
  font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  .colors {
    --color-theme: #e11cb0;
    --color-theme-2: rgba(225,28,176,0.5);
    --color-primary: #261b2d;
    --color-secondary: #131c27;
    --color-tertiary: #121a24;
    --color-text: rgba(255,255,255,0.8);
  }
  .colors .resume-preview .absolute {
    border: 4px solid var(--color-theme-2);
  }
  .colors .resume-preview .absolute::after {
    opacity: 0.8;
  }
  .colors p {
    font-weight: 500;
  }
  #themeToggle:checked ~ .colors {
    --color-theme: #ff6d26;
    --color-theme-2: rgba(255,109,38,0.5);
    --color-primary: #fff;
    --color-secondary: #eee;
    --color-tertiary: #dfdfdf;
    --color-text: #000;
  }
  #themeToggle:checked ~ .colors .resume-preview .absolute {
    border: none;
  }
  #themeToggle:checked ~ .colors .resume-preview .absolute::after {
    opacity: 0;
  }
  #themeToggle:checked ~ .colors p {
    font-weight: 400;
  }
}
html {
  overflow-x: hidden;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
}
body {
  margin: 0;
  overflow-x: clip;
  font-family: "Quicksand", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-display: swap;
  background-color: #333;
}
div,
img {
  box-sizing: border-box;
}
*,
*::before,
::after {
  transition: background 0.1s, border 0.2s;
}
.chip,
.button,
.thumbnail {
  transition: all 0.4s, transform 0.2s;
}
:focus,
.card:focus-within .thumbnail,
a.chip:hover,
.button:hover {
  box-shadow: 0 0 16px 2px var(--color-theme);
  outline: 1px solid var(--color-theme);
  outline-offset: 4px;
  transition: all 0.4s, transform 0.2s;
}
:focus:focus,
.card:focus-within .thumbnail:focus,
a.chip:hover:focus,
.button:hover:focus {
  transition: all 0.4s, transform 0.2s;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0.4em 0;
  color: var(--color-text);
  transition: color 0.1s;
}
p,
li {
  line-height: 1.8;
  transition: transform 0.2s;
}
::selection {
  background-color: var(--color-theme-2);
}
a {
  color: var(--color-theme);
  text-underline-offset: 0.3em;
  transition: text-underline-offset 0.1s;
}
a:hover {
  text-underline-offset: 0.5em;
}
a::selection {
  background-color: unset;
}
a svg {
  height: 1em;
  width: 1em;
}
h1 {
  font-size: 1.8em;
}
h2 {
  font-size: 1.4em;
}
h2 small {
  font-size: 0.5em;
}
section {
  width: 100%;
}
img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.button {
  padding: 0.4em 0.8em;
  background-color: var(--color-theme);
  border-radius: 6px;
  text-decoration: none;
  color: #fff;
  text-align: center;
  transition: background 0.2s, color 0.2s, border-radius 0.2s, transform 0.2s;
}
.button.outlined {
  background: none;
  border: 1px solid var(--color-theme);
  color: inherit;
}
.button.transparent {
  border: none;
  background: none;
  color: inherit;
  outline: none !important;
}
.button.underline {
  padding: 0;
  border: none;
  color: inherit !important;
  outline: none;
  background: none;
  box-shadow: none;
  position: relative;
}
.button.underline::before {
  content: "";
  position: absolute;
  bottom: -0.7em;
  right: calc(100% + 0.5em);
  left: -0.5em;
  height: 0.2em;
  background-color: var(--color-theme);
  border-radius: 100px;
  transition: right 0.2s, left 0.4s, bottom 0.4s, background 0.2s;
}
.button.underline:hover,
.button.underline:focus {
  transform: translate(4px, -2px);
}
.button.underline:hover::before,
.button.underline:focus::before {
  right: 10px;
  left: 10px;
}
.button:hover {
  transform: translateY(-2px);
}
.button h1 {
  margin: 0;
}
.button:active {
  transform: scale(0.95) !important;
}
.chip {
  position: relative;
  padding: 0.6em 1.4em;
  border-radius: 12px;
  background-color: var(--color-theme);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: inherit;
  transition: transform 0.2s cubic-bezier(0, 0.2, 0, 1), background 0.2s;
}
.chip:hover,
.chip:focus {
  transform: translateY(-7%);
}
.chip:active {
  transform: scale(0.95) !important;
}
.chip.icon {
  padding: 0.7em;
  width: 1em;
  height: 1em;
}
.chip.icon img {
  position: absolute;
  inset: 0;
  margin: auto;
  padding: 0.4em;
  transition: transform 0.4s cubic-bezier(0, 0, 0, 2);
}
.chip.icon:hover img {
  transform: scale(1.05) translateY(-15%);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.chip.icon:active img,
.chip.icon:focus img {
  transform: scale(1) translateY(-10%);
}
.chip.small {
  font-size: 0.9em;
}
.chip.outlined {
  background: none;
  border: 1px solid var(--color-theme);
}
.chip.transparent {
  background: none;
  border: 0;
}
.card {
  flex: 1 1 40em;
  margin-bottom: 1em;
  position: relative;
}
.card .blurred {
  position: absolute;
  inset: 10px;
  bottom: unset;
  padding-top: 56.25%;
  max-height: 100%;
  z-index: -1;
  filter: blur(10px);
  transform: translateY(4px);
  opacity: 0.2;
  transition: opacity 0.2s;
}
.card .blurred img {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: 24px;
}
.card .thumbnail {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  padding-top: 56.25%;
  max-height: 100%;
  background-color: var(--color-secondary);
  transition: transform 0.4s cubic-bezier(0, 0, 0, 2);
}
.card .thumbnail a {
  color: #fff;
  text-decoration: none;
}
.card .thumbnail img {
  position: absolute;
  inset: 0;
  transition: filter 0.2s;
  width: 100%;
}
.card .thumbnail h2 {
  position: absolute;
  inset: 0;
  top: unset;
  padding: 1em;
  padding-top: 2em;
  z-index: 2;
  box-sizing: border-box;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: #fff;
  transition: padding 0.4s;
}
.card .thumbnail p {
  padding: 2em;
  position: absolute;
  inset: 0;
  top: -1em;
  bottom: -3em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2em;
  box-sizing: border-box;
  z-index: 3;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s, bottom 0.4s, background 0.2s;
}
.card .thumbnail:hover,
.card .thumbnail:focus-within {
  transform: translateY(-4px);
  transition: transform 0.2s;
}
@media (pointer: fine) {
  .card .thumbnail:hover a,
  .card .thumbnail:focus-within a {
    transform: translateY(-4px);
  }
  .card .thumbnail:hover a img,
  .card .thumbnail:focus-within a img {
    filter: blur(10px);
  }
  .card .thumbnail:hover a p,
  .card .thumbnail:focus-within a p {
    opacity: 1;
    bottom: -1em;
  }
  .card .thumbnail:hover a h2,
  .card .thumbnail:focus-within a h2 {
    padding-bottom: calc(1em + 4px);
  }
  .card .thumbnail:hover ~ .blurred,
  .card .thumbnail:focus-within ~ .blurred {
    opacity: 0.4;
    bottom: unset;
  }
}
.card .thumbnail:active {
  transform: scale(0.98);
  transition: transform 0.4s cubic-bezier(0, 0, 0, 2);
}
.card .details {
  padding: 0.6em 0.8em;
  display: flex;
  flex-grow: wrap;
  justify-content: space-between;
}
.card h2 {
  margin-bottom: 0;
}
.card.small {
  flex: unset;
  margin-bottom: 0;
}
.card.small:first-child a {
  padding-left: 0;
  margin-left: 0 !important;
}
.card.small a {
  text-decoration: none;
  display: block;
  width: 10em;
  border-radius: 12px;
  padding: 0.7em 1em;
  font-weight: 500;
  transition: background 0.2s, padding 0.4s, margin 0.4s;
}
.card.small a img {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s;
  max-width: 90%;
  width: 100%;
  aspect-ratio: 1;
}
.card.small a span {
  white-space: nowrap;
}
.card.small a:hover,
.card.small a:focus {
  padding: 0.7em 1.4em;
  background-color: var(--color-secondary);
}
.card.small a:hover img,
.card.small a:focus img {
  transition: transform 0.4s;
  transform: translateY(-4px);
}
.card.small a:active img {
  transform: scale(0.95);
  transition: transform 0.2s;
}
@media (pointer: coarse) {
  .card .thumbnail h2,
  .card .thumbnail p {
    color: var(--color-text) !important;
    background: none !important;
    padding: 0;
    padding-inline: 1em;
    margin: 0;
    text-align: center;
  }
  .card .thumbnail p {
    position: static;
    box-sizing: border-box;
    opacity: 1;
    padding-bottom: 1em;
  }
  .card .thumbnail h2 {
    position: static;
    padding-top: 0.7em;
    padding-bottom: 0.2em;
  }
}
.grayscale {
  filter: grayscale(1) contrast(1);
}
.opaque {
  opacity: 0.2;
}
.header-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.split {
  display: flex;
  flex-wrap: wrap;
  width: 90em;
  max-width: 100%;
  align-items: center;
}
.visiblity-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.absolute {
  position: absolute;
  inset: 0;
}
.full-width {
  max-width: unset;
  width: 100%;
}
.separator {
  border-top: 1px solid;
  border-color: #fff;
}
.separator.vertical {
  border-top: unset;
  margin: 0;
  height: 70vh;
  border-radius: 100px;
  border: 5px solid var(--color-theme);
  margin: 0 -2.5px;
  box-sizing: content-box;
}
.centered {
  margin: auto;
  justify-content: center;
}
.list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2em;
}
.list.small {
  gap: 0.5em 1em;
}
.list h1,
.list h2,
.list h3,
.list h4,
.list h5,
.list h6 {
  width: 100%;
  margin-top: 0;
}
.scroller {
  border-radius: 12px;
  margin: -10px;
  padding: 10px;
  transition: scrollbar-color 0.2s;
}
.scroller:not(:hover) {
  scrollbar-color: transparent transparent;
}
.scroller.x {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow: auto hidden;
  margin-left: -10px;
  margin-bottom: 1em;
}
.scroller.x::after,
.scroller.x::before {
  content: "";
  display: block;
  min-width: 300px;
  max-width: 20vw;
  box-shadow: 10px 0px 0px 0px var(--color-primary);
  min-height: 100%;
  position: sticky;
  right: 0;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--color-primary));
  transition: min-width 0.2s;
}
.scroller.x::before {
  right: unset;
  left: -10px;
  min-width: 10px;
  margin-left: -10px;
  background: linear-gradient(to right, transparent, var(--color-primary));
  transform: rotate(180deg);
  z-index: 2;
}
.scroller.x:hover:after {
  min-width: 10px;
}
.scroller_separator {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 18px;
}
.scroller_separator div {
  position: relative;
  background-color: var(--color-primary);
  text-align: center;
  z-index: 2;
  margin-bottom: 30px;
}
.scroller_separator hr {
  position: absolute;
  height: 70%;
  margin: auto;
  color: currentColor;
  opacity: 0.1;
}
.scroller_separator span {
  background-color: var(--color-secondary);
  padding: 0.3em 0.7em;
  border-radius: 100px;
  text-align: center;
}
@media (prefers-reduced-motion) {
  *,
  ::before,
  ::after {
    transition: filter 0.2s, background 0.4s, color 0.4s, opacity 0.4s, outline 0.2s, box-shadow 0.2s !important;
    scroll-behavior: unset !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}
.main {
  scroll-snap-align: start;
}
.main > .separator {
  animation: heightIn 1s 0.2s both cubic-bezier(1, 0, 0, 1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}
.main > .separator div {
  position: relative;
  z-index: 3;
  border: 5px solid var(--color-theme);
  background-color: var(--color-theme);
  max-width: 0px;
  border-radius: 100px;
  height: 70vh;
  box-sizing: content-box;
  margin-left: -5px;
  animation: heightIn 1s 0.2s both cubic-bezier(1, 0, 0, 1);
}
.main > .separator::before,
.main > .separator::after {
  content: "";
  position: absolute;
  right: 0;
  background-color: var(--color-secondary);
  animation: widthIn 1.2s 0.5s both cubic-bezier(0.5, 0, 0, 1);
  width: calc(50vw + 110px);
  top: -15vh;
  bottom: -15vh;
  border-radius: 2vh;
  z-index: 1;
  transition: background 0.1s !important;
}
.main > .separator::before {
  border-bottom-left-radius: 100vh !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.main > .separator::after {
  left: 0;
  right: unset;
  background-color: var(--color-primary);
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.main > .column {
  height: 100vh;
  flex: 1 1 30em;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: flex;
  z-index: 2;
  transition: scrollbar-color 0.2s;
}
.main > .column:not(:hover):not(:focus-within) {
  scrollbar-color: transparent transparent !important;
}
.main > .column .content {
  width: 0;
  flex-grow: 1;
  padding: 4rem;
  height: max-content;
  animation: slidePageLeft 1s 0.7s both cubic-bezier(0, 0.5, 0, 1);
}
.main > .column:first-child {
  text-align: center;
  perspective: 20px;
  position: sticky;
  top: 0;
}
.main > .column:first-child .content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  font-size: 1.1em;
  font-size: clamp(1em, 1.2vw, 1.1em);
}
.main > .column:first-child h1,
.main > .column:first-child p {
  margin: 0;
}
.main > .column:first-child .about {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  max-width: 25em;
  margin: auto;
  gap: 1em;
  filter: drop-shadow(0px 4px 2px rgba(0,0,0,0.2));
}
.main > .column:first-child .about p {
  font-weight: 600 !important;
}
.main > .column:first-child .about h1 {
  color: var(--color-theme);
}
.main > .column:first-child .about h1::selection {
  background-color: unset;
}
.main > .column:first-child .resume {
  flex-grow: 5;
  min-height: 300px;
  margin-top: 2em;
  display: flex;
  flex-direction: column;
  transform: rotate(-0.5deg) translateX(0.5%);
  animation: slideUpIn 1.7s 0.7s backwards;
}
.main > .column:first-child .resume .resume-preview {
  margin-inline: -2.5rem;
  margin-top: 0.7em;
  position: relative;
  flex-grow: 1;
}
.main > .column:first-child .resume .resume-preview .absolute {
  bottom: unset;
  height: 800px;
  border-radius: 24px 24px;
  box-shadow: 0 0 24px rgba(0,0,0,0.1);
  overflow: hidden;
}
.main > .column:first-child .resume .resume-preview .absolute::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: opacity 0.2s;
  background-image: linear-gradient(to bottom, transparent, #1a202c, #1a202c);
}
.main > .column:first-child .resume .resume-preview .absolute embed {
  display: block;
  width: calc(100% + 24px);
  margin-inline: -8px;
  position: relative;
  z-index: 2;
}
.main > .column:first-child h1 {
  font-size: 3em;
}
.main > .column:first-child p {
  font-weight: 700;
}
.main > .column:last-child {
  animation: flexIn 2s 0.7s both, backgroundFrom 1s 1.7s backwards;
  flex-grow: 2.5;
  flex-grow: 4;
  overflow-y: auto;
  scroll-behavior: smooth;
  background-color: var(--color-primary);
  scroll-snap-align: start;
  transition: background-color 0.1s, scrollbar-color 0.2s;
}
.main > .column:last-child .content {
  animation-name: slidePageRight;
  padding-block: 10vh !important;
}
.main > .column:last-child .content > [id]:target ~ nav h1 {
  font-weight: 400;
}
.main > .column:last-child .content > [id]:target ~ section {
  display: none;
}
.main > .column:last-child .content::before {
  content: "";
  display: block;
  height: 3em;
  margin-top: -1em;
  margin-bottom: -2em;
  margin-inline: -1em;
  position: sticky;
  top: 1em;
  z-index: 4;
  box-shadow: 0 24px 24px -20px rgba(0,0,0,0.5);
  filter: opacity(0);
  animation: slideTo 1s 1s forwards;
}
.main > .column:last-child .content > nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  margin-bottom: 1em;
  position: sticky;
  top: 0;
  z-index: 5;
  padding-top: 2em;
  padding-bottom: 0.7em;
  margin-inline: -900px;
  padding-inline: 900px;
  backdrop-filter: blur(10px);
  font-size: 0.85em;
  filter: opacity(0);
  animation: slideTo 1s 1s forwards;
}
.main > .column:last-child .content > nav h1 {
  font-weight: 400;
}
.main > .column:last-child .content > nav [href="#"] h1 {
  font-weight: bold;
}
.main > .column:last-child .content > nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  opacity: 0.95;
  z-index: -1;
  border-radius: 12px;
  transition: background-color 0.1s;
}
.main > .column:last-child .content .about {
  display: none;
  max-width: 50ch;
}
.main > .column:last-child .content .about p {
  padding-block: 1em;
}
.main > .column:last-child .content .about .card .thumbnail {
  padding-top: unset;
}
.main > .column:last-child .content .about .card .thumbnail h2 {
  position: relative;
  background: none;
  color: var(--color-text);
}
.main > .column:last-child .content .other,
.main > .column:last-child .content .bookmarks {
  display: none;
}
.main > .column:last-child #about:target ~ nav [href="#about"] h1 {
  font-weight: bold;
}
.main > .column:last-child #about:target ~ .about {
  display: block;
}
.main > .column:last-child #about:target ~ .about .card h1 {
  position: relative;
  padding-left: 40px;
  z-index: -1;
  font-size: 2em;
}
.main > .column:last-child #about:target ~ .about .card h1,
.main > .column:last-child #about:target ~ .about .card h1 span {
  display: block;
  animation: slidePageRight 1s cubic-bezier(0, 1, 0, 1.02);
}
.main > .column:last-child #about:target ~ .about .card h1 span {
  font-size: 0.8em;
}
.main > .column:last-child #other:target ~ nav [href="#other"] h1 {
  font-weight: bold;
}
.main > .column:last-child #other:target ~ .other {
  display: block;
}
.main > .column:last-child #bookmarks:target ~ nav [href="#bookmarks"] h1 {
  font-weight: bold;
}
.main > .column:last-child #bookmarks:target ~ .bookmarks {
  display: block;
}
@-moz-keyframes lightSwitch {
  from {
    transform: rotate(90deg) translateY(-10px);
    height: 300px;
  }
}
@-webkit-keyframes lightSwitch {
  from {
    transform: rotate(90deg) translateY(-10px);
    height: 300px;
  }
}
@-o-keyframes lightSwitch {
  from {
    transform: rotate(90deg) translateY(-10px);
    height: 300px;
  }
}
@keyframes lightSwitch {
  from {
    transform: rotate(90deg) translateY(-10px);
    height: 300px;
  }
}
@-moz-keyframes slidePageLeft {
  from {
    transform: translateX(100%) rotate(4deg);
  }
}
@-webkit-keyframes slidePageLeft {
  from {
    transform: translateX(100%) rotate(4deg);
  }
}
@-o-keyframes slidePageLeft {
  from {
    transform: translateX(100%) rotate(4deg);
  }
}
@keyframes slidePageLeft {
  from {
    transform: translateX(100%) rotate(4deg);
  }
}
@-moz-keyframes slidePageRight {
  from {
    transform: translateX(-100%);
  }
}
@-webkit-keyframes slidePageRight {
  from {
    transform: translateX(-100%);
  }
}
@-o-keyframes slidePageRight {
  from {
    transform: translateX(-100%);
  }
}
@keyframes slidePageRight {
  from {
    transform: translateX(-100%);
  }
}
@-moz-keyframes slideUpIn {
  from {
    transform: translateY(10vh);
  }
}
@-webkit-keyframes slideUpIn {
  from {
    transform: translateY(10vh);
  }
}
@-o-keyframes slideUpIn {
  from {
    transform: translateY(10vh);
  }
}
@keyframes slideUpIn {
  from {
    transform: translateY(10vh);
  }
}
@-moz-keyframes slideLeftIn {
  from {
    transform: translateX(10vh);
  }
}
@-webkit-keyframes slideLeftIn {
  from {
    transform: translateX(10vh);
  }
}
@-o-keyframes slideLeftIn {
  from {
    transform: translateX(10vh);
  }
}
@keyframes slideLeftIn {
  from {
    transform: translateX(10vh);
  }
}
@-moz-keyframes heightIn {
  from {
    height: 0px;
    border-width: 1px;
  }
}
@-webkit-keyframes heightIn {
  from {
    height: 0px;
    border-width: 1px;
  }
}
@-o-keyframes heightIn {
  from {
    height: 0px;
    border-width: 1px;
  }
}
@keyframes heightIn {
  from {
    height: 0px;
    border-width: 1px;
  }
}
@-moz-keyframes widthIn {
  from {
    top: 30vh;
    bottom: 30vh;
    width: 0;
    border-radius: 100vh;
  }
}
@-webkit-keyframes widthIn {
  from {
    top: 30vh;
    bottom: 30vh;
    width: 0;
    border-radius: 100vh;
  }
}
@-o-keyframes widthIn {
  from {
    top: 30vh;
    bottom: 30vh;
    width: 0;
    border-radius: 100vh;
  }
}
@keyframes widthIn {
  from {
    top: 30vh;
    bottom: 30vh;
    width: 0;
    border-radius: 100vh;
  }
}
@-moz-keyframes underline {
  to {
    width: calc(100% - 20px);
  }
}
@-webkit-keyframes underline {
  to {
    width: calc(100% - 20px);
  }
}
@-o-keyframes underline {
  to {
    width: calc(100% - 20px);
  }
}
@keyframes underline {
  to {
    width: calc(100% - 20px);
  }
}
@-moz-keyframes flexIn {
  from {
    flex-grow: 1;
  }
}
@-webkit-keyframes flexIn {
  from {
    flex-grow: 1;
  }
}
@-o-keyframes flexIn {
  from {
    flex-grow: 1;
  }
}
@keyframes flexIn {
  from {
    flex-grow: 1;
  }
}
@-moz-keyframes backgroundFrom {
  from {
    background-color: transparent;
  }
}
@-webkit-keyframes backgroundFrom {
  from {
    background-color: transparent;
  }
}
@-o-keyframes backgroundFrom {
  from {
    background-color: transparent;
  }
}
@keyframes backgroundFrom {
  from {
    background-color: transparent;
  }
}
@-moz-keyframes slideTo {
  to {
    transform: none;
    filter: none;
  }
}
@-webkit-keyframes slideTo {
  to {
    transform: none;
    filter: none;
  }
}
@-o-keyframes slideTo {
  to {
    transform: none;
    filter: none;
  }
}
@keyframes slideTo {
  to {
    transform: none;
    filter: none;
  }
}
@-moz-keyframes spin {
  from {
    transform: rotate(10deg);
  }
  to {
    transform: rotate(20deg) translateY(10px);
  }
}
@-webkit-keyframes spin {
  from {
    transform: rotate(10deg);
  }
  to {
    transform: rotate(20deg) translateY(10px);
  }
}
@-o-keyframes spin {
  from {
    transform: rotate(10deg);
  }
  to {
    transform: rotate(20deg) translateY(10px);
  }
}
@keyframes spin {
  from {
    transform: rotate(10deg);
  }
  to {
    transform: rotate(20deg) translateY(10px);
  }
}