:root {
  --gray: #acacac;
  --lightgray: #f0f0f0;
}

@font-face {
  font-family:Mica Valo;
  src:url('/fonts/MicaValo.otf') format("opentype")
}
@font-face {
  font-family:Cochin;
  src:url('/fonts/Cochin Regular.otf') format("opentype")
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  background: var(--lightgray);
  font-family: "Cochin";
}

h1 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font-style: italic;
  text-align: center;
}

h1::after, h1::before {
  content: " // "
}

h2 {
  text-align: center;
  letter-spacing: 10px;
  text-transform: uppercase;
  font-style: italic;
  font-family: Cochin;
}

h3 {
  text-align: center;
  color: var(--gray);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 5px;
}

h4 {
  text-align: center;
  font-family: "Mica Valo"
}

h4::before {
  content: "("
}
h4::after {
  content: ")"
}

h5 {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-style: italic;
  text-decoration: underline;
}

#viscaikosWrapper {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 20% auto 20%;
    grid-template-rows: 100%;
    align-items:end;
}

.sider {
    height: 400px;
    bottom: 0px;
}

#viscardiSide {
    grid-column: 3;
    grid-row: 1;
    left: 200px;
}

#aikosSide {
    grid-column: 1;
    grid-row: 1;
}

#white {
  width: 100%;
  height: 95%;
  align-self: center;
  padding: 10px;
  background-color: white;
  filter: drop-shadow(0px 0px 10px white) drop-shadow(0px 0px 10px white) drop-shadow(0px 0px 10px white) drop-shadow(0px 0px 10px white) drop-shadow(0px 0px 10px white) drop-shadow(0px 0px 10px white);
  position: relative;
  display: flex;
  flex-direction: column;
}

#nav {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 25px;
}

#nav a {
  font-family: "Mica Valo";
}

a {
  color: black;
  text-decoration: underline;
  transition: 0.2s ease;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  text-indent: 0;
}

a:hover {
  font-style: italic;
  text-decoration: line-through;
  transition: 0.2s ease;
}

#pageContent {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

p {
  font-size: 20px;
  text-indent: 25px;
  margin-bottom: 8px;
  line-height: 25px;
}

.snowflake {

  color: #fff;

  font-size: 1em;

  font-family: Arial, sans-serif;

  text-shadow: 0 0 5px #000;

}

.snowflake,.snowflake .inner{animation-iteration-count:infinite;animation-play-state:running}@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;pointer-events:none;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}.snowflake:nth-of-type(0){left:1%;animation-delay:0s}.snowflake:nth-of-type(0) .inner{animation-delay:0s}.snowflake:first-of-type{left:10%;animation-delay:1s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}.snowflake:nth-of-type(3){left:30%;animation-delay:2s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}.snowflake:nth-of-type(5){left:50%;animation-delay:3s}.snowflake:nth-of-type(5) .inner{animation-delay:8s}.snowflake:nth-of-type(6){left:60%;animation-delay:2s}.snowflake:nth-of-type(7){left:70%;animation-delay:1s}.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:0s}.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}

#viscardiSide.active {
  background-color: green;
}
#aikosSide.active {
  background-color: red;
}
#viscardiSide.two {
  background-color: red;
}
#aikosSide.two {
  background-color: green;
}

#viscardi {
  display: flex;
  flex-direction: column;
}

#viscardi img {
  width: 300px;
  float: left;
}

.profile {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  text-align: center;
}

.profile p {
  text-indent: 0;
}

#aikos {
  display: flex;
  flex-direction: column;
}

#aikos img {
  width: 300px;
  float: right;
}

/* TIMELINE */

#timeline {
  position: relative;
  margin: 0 auto;
  width: 70%;
}

#timeline p {
  margin-bottom: 0;
}

#timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background-color: black;
  top: 0;
  bottom: 0;
  left: 10px;
  margin-left: -3px;
}

#timeline p::before {
  content: "—";
  position: absolute;
  left: -28px;
  font-weight: bold;
}

#timeline p.turningpoint::before {
  content: '';
}

.turningpoint {
  border-bottom: #000 2px solid;
  width: 100%;
}

#timeline p.turningpoint {
  text-align: center;
  font-style: italic;
  text-transform: uppercase;
  text-indent: 0;
}

#timeline p.year {
  margin-left: -55px;
  font-weight: bold;
  font-style: italic;
}

#timeline p.year::before {
  content: '';
}

/* UNIVERSALS */

.uppercase {
  text-transform: uppercase;
}

.section {
  margin-bottom: 25px;
}

.gray {
  color: var(--gray);
}

.gray em {
  color: black;
}