@import url("https://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400i,700,700i|IBM+Plex+Sans:400,400i,500,500i,700,700i&display=swap");
::selection {
  color: white;
  background: #f74e45; }

html, body {
  min-height: 100vh; }

body {
  margin: 0;
  font-family: "Gentium Book Basic", serif;
  font-weight: 400;
  font-size: 22px;
  color: #2b2b2b;
  display: flex;
  flex-direction: column; }

.home-container {
  font-size: 48px; }
  @media (max-width: 800px) {
    .home-container {
      font-size: 36px; } }
  @media (max-width: 500px) {
    .home-container {
      font-size: 24px; } }
.home-title {
  font-size: 100px; }
  @media (max-width: 800px) {
    .home-title {
      font-size: 64px; } }
  @media (max-width: 500px) {
    .home-title {
      font-size: 48px; } }
  @media (max-width: 415px) {
    .home-title {
      font-size: 36px; } }
.turbo-progress-bar {
  background-color: #f74e45; }

a {
  color: #2b2b2b; }
  a:hover {
    color: #f74e45; }
  a:active {
    color: rgba(247, 78, 69, 0.3); }

h1, h2, h3, h4, h5 {
  margin-bottom: 10px; }

p {
  margin-top: 12px; }

.main-nav {
  flex-direction: row;
  padding-top: 20px;
  user-select: none;
  -webkit-user-select: none; }

.main-nav ul {
  display: inline-flex;
  flex-direction: row;
  padding: 0; }

.main-nav ul li {
  display: flex;
  flex-direction: row;
  height: 30px;
  padding: 18px 5px;
  padding: 18px 0;
  margin-left: -35px; }
  .main-nav ul li .page-emoji {
    opacity: 0; }
  .main-nav ul li.current-page {
    transform: translateY(-3px);
    margin: 0 10px; }
    .main-nav ul li.current-page a {
      font-weight: 700; }
    .main-nav ul li.current-page .page-emoji {
      opacity: 1; }
  .main-nav ul li:nth-child(1) {
    z-index: 999; }
  .main-nav ul li:nth-child(2) {
    z-index: 998; }
  .main-nav ul li:nth-child(3) {
    z-index: 997; }
  .main-nav ul li:nth-child(4) {
    z-index: 996; }
  .main-nav ul li:nth-child(5) {
    z-index: 995; }

.main-nav ul li a {
  font-family: "IBM Plex Sans", sans-serif;
  text-decoration: none;
  font-size: 28px;
  padding: 0 5px; }
  .main-nav ul li a:hover {
    color: #2b2b2b; }
  .main-nav ul li a:active {
    color: rgba(43, 43, 43, 0.3); }

.logotype {
  border: 5px solid transparent;
  padding: 20px;
  text-align: center;
  background: #f74e45;
  color: white;
  text-decoration: none;
  box-sizing: border-box;
  margin: 20px 20px 0 0;
  display: inline-flex; }
  .logotype h1 {
    font: 32px "IBM Plex Sans", sans-serif;
    display: inline-flex;
    margin: 0;
    font-weight: 400; }
  .logotype:hover, .logotype:focus, .logotype:active {
    color: white; }
  .logotype:active {
    opacity: 0.7; }

.main-content {
  margin-bottom: auto; }

.main-content, .main-footer {
  max-width: 850px; }

.main-footer {
  margin: 30px 40px 0;
  padding: 0;
  border-top: 1px solid #f3f3f3;
  color: #757575; }
  .main-footer a:not(:hover):not(:active) {
    color: #757575; }

.main-nav, .main-content {
  padding: 0 40px; }

.box {
  padding: 20px 30px;
  border-radius: 4px;
  background-color: #f3f3f3; }

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.profiles ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: block;
  flex-direction: row;
  line-height: 50px; }

.profiles ul li {
  display: inline; }
  .profiles ul li img {
    width: 18px;
    height: 18px;
    position: relative;
    top: 3px; }

.profiles ul li a {
  white-space: nowrap;
  text-decoration: none;
  padding: 0 3px;
  font: 18px "IBM Plex Sans", sans-serif;
  font-weight: 500; }
  .profiles ul li a svg {
    margin-right: 3px; }

/* Create a custom animation for current nav element shrinking */
.main-nav {
  view-transition-name: navigation; }

.logotype {
  view-transition-name: logotype; }

.main-nav ul li:nth-child(1) {
  view-transition-name: first-page; }

.main-nav ul li:nth-child(2) {
  view-transition-name: second-page; }

.main-nav ul li:nth-child(3) {
  view-transition-name: third-page; }

.main-nav ul li:nth-child(4) {
  view-transition-name: fourth-page; }

.main-nav ul li:nth-child(5) {
  view-transition-name: fifth-page; }

::view-transition-group(navigation) {
  animation-duration: 0.3s; }

::view-transition-group(logotype) {
  animation-duration: 0.3s; }

::view-transition-group(first-page) {
  animation-duration: 0.3s; }

::view-transition-group(second-page) {
  animation-duration: 0.3s; }

::view-transition-group(third-page) {
  animation-duration: 0.3s; }

::view-transition-group(fourth-page) {
  animation-duration: 0.3s; }

::view-transition-group(fifth-page) {
  animation-duration: 0.3s; }

::view-transition-group(root) {
  animation-duration: 0.3s; }

.back-to-list-transition {
  view-transition-name: back-to-list;
  display: flex; }

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  contain: layout style size; }
  .cursor::before, .cursor::after {
    content: '';
    position: absolute;
    background: #f74e45;
    border-radius: 999px;
    will-change: width, height, clip-path, background-color, border-radius;
    transition: width 0.1s cubic-bezier(0.25, 0.1, 0.25, 1), height 0.1s cubic-bezier(0.25, 0.1, 0.25, 1), clip-path 0.1s cubic-bezier(0.25, 0.1, 0.25, 1), background-color 0.1s cubic-bezier(0.25, 0.1, 0.25, 1), border-radius 0.1s cubic-bezier(0.25, 0.1, 0.25, 1); }
  .cursor.on-red::before, .cursor.on-red::after {
    background: #2b2b2b; }
  .cursor::before {
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%); }
  .cursor::after {
    top: 0;
    left: 0;
    width: 16px;
    height: 0;
    transform: translate(-50%, -50%); }
  .cursor.hovering-text::before {
    width: 4px;
    height: var(--text-height, 20px);
    border-radius: 2px;
    transform: translate(-50%, -50%); }
  .cursor.hovering-text::after {
    width: 0;
    height: 0; }
  .cursor.hovering-link::before {
    width: 18px;
    height: 24px;
    border-radius: 0;
    clip-path: polygon(0% 0%, 0% 80%, 18% 62%, 32% 95%, 45% 88%, 30% 56%, 55% 56%, 0% 0%);
    transform: translate(-2px, -2px); }
  .cursor.hovering-link::after {
    width: 0;
    height: 0; }

*, *::before, *::after {
  cursor: none !important; }

@media (hover: none) {
  .cursor {
    display: none; }
  *, *::before, *::after {
    cursor: auto !important; } }

footer {
  font-size: 18px;
  color: #2b2b2b; }