@import "../assets/fonts/hk/stylesheet.css";
@import "../assets/fonts/crimson/stylesheet.css";

html {
  font-size: 16px;
  --c-bg: #fffefa;
  --c-romanzo: #0490ca;
  --c-racconti: #ed7f62;
  --c-racconti: #bd504c;
  --c-ibrido: #f2d371;
  --c-riscritture: #707e84;
  --c-racconti-protagonista: #eb9d69;
  --c-racconti-cornice: #00b79e;
  --c-saggi: #9d80bb;
  --c-postumi: #566573;
  --c-unita: #c1c0b1;
  --c-cds: #806060;
  --c-repubblica: #9fbfc6;
  --c-text: #212529;
}

/* Fight with CDS CSS */
/* * {
    font-family: 'HK Grotesk';
} */

/* p {
    margin-bottom: 0.5rem;
    padding-bottom: 0px;
}

h1 {
    text-align: left;
    padding: 0;
} */

#main_footer {
  background-color: var(--c-bg);
}

html {
  font-size: 16px;
}

@media only screen and (min-width: 768px) {
  html {
    font-size: 18px;
  }
}

@media only screen and (min-width: 1200px) {
  html {
    font-size: 21px;
  }
}

body {
  color: var(--c-text);
  font-family: 'HK Grotesk';
  font-weight: normal;
  font-style: normal;
  font-size: 1rem;
  background-color: var(--c-bg);
}

h1 {
  font-family: 'HK Grotesk';
  color: darkslategrey;
}

a {
  color: tomato;
}

p {
  /* font-size: .8rem; */
}

.caption {
  font-size: 0.75rem;
  font-family: 'HK Grotesk'
}

@media only screen and (min-width: 768px) {
  .caption {
    font-size: 0.60rem;
  }
}

.sticky-from-top {
  top: -40px;
}

#visualisation-container {
  -webkit-box-shadow: 0px 0px 7px 0px #fbe1b6;
  -ms-box-shadow: 0px 0px 7px 0px #fbe1b6;
  box-shadow: 0px 0px 7px 0px #fbe1b6;
  background-color: white;
  position: -webkit-sticky;
  position: sticky;
  top: -40px;
}

/* visualisation */
svg#visualisation {}

.legend {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 1.5rem;
  position: sticky;
  top: 0px;
  box-sizing: border-box;
  margin-bottom: 2rem;
  z-index: 10000;
  justify-content: flex-end;
  background-color: var(--c-bg);
  /* border: 1px solid var(--c-text); */
  /* border-radius: 3px; */
}

.legend .legend-content {
  display: grid;
  grid-template-columns: repeat(3, 17%);
  grid-template-rows: 1.5rem 1.1rem 3.8rem 3.8rem 3.8rem 1.1rem 2.5rem 1.1rem;
  grid-row-gap: 1%;
  height: 1.5rem;
  width: 100%;
  transition: height .35s ease;
  overflow: hidden;
  background-color: var(--c-bg);
  grid-column-gap: 24.5%;
  padding: 0 20vw;
  border: 1px solid;
  border-radius: 3px;
}

.legend.open .legend-content {
  height: 50vh;
  overflow: visible;
}

#legend-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 3px;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000;
  margin-top: 0.1rem;
  position: absolute;
  right: 0;
}

#legend-button::before {
  content: '';
  display: block;
  background-color: var(--c-text);
  height: 2px;
  position: relative;
  left: 1px;
  width: 32%;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

#legend-button::after {
  content: '';
  display: block;
  background-color: var(--c-text);
  height: 2px;
  position: relative;
  right: 1px;
  width: 32%;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.legend.open #legend-button::before {
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.legend.open #legend-button::after {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.legend h4 {
  font-family: 'HK Grotesk';
  font-size: .75rem;
  line-height: 1.5rem;
  text-align: center;
  grid-column: span 3;
  margin: 0;
}

.legend h5 {
  font-family: 'HK Grotesk';
  font-size: .6rem;
  line-height: 1.6rem;
  text-transform: uppercase;
  text-align: center;
  grid-column: span 3;
  margin: 0;
}

.legend h6 {
  font-family: 'HK Grotesk';
  font-size: .45rem;
  margin-bottom: 0.1rem;
  text-align: center;
  width: 300%;
  margin-left: -100%;
  margin-top: 0.3rem;
}

.legend-item {
  /* width: 20%; */
  /* height: 20%; */
  /* background-color: #f7f7f7; */
}

.legend-circle {
  background: white;
  border: 1px solid transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 0;
  display: block;
  border-radius: 50%;
  padding-bottom: calc(100% - 2px);
  background-size: cover;
  box-shadow: none !important;
}

.legend-article-circle {
  background: white;
  border: 2px solid transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 30%;
  height: 0;
  display: block;
  border-radius: 50%;
  margin: auto;
  margin-bottom: 2px;
  padding-bottom: calc(30% - 4px);
}

.legend-article-circle.lgnd::after {
  content: 'Altro';
  position: relative;
  font-family: 'HK Grotesk';
  font-size: 0.5rem;
  left: 15px;
  top: -15px;
}

.legend-article-circle.lgnd.narrative::after {
  content: 'Narrativa';
  position: relative;
  font-family: 'HK Grotesk';
  font-size: 0.5rem;
  left: 15px;
  top: -15px;
}

.label {
  font-size: .53rem;
  text-anchor: middle;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.label.year {
  font-family: 'HK Grotesk';
  font-size: .45rem;
}

.decade.in-focus>.label.year.the-first {
  animation-name: in-focus-label;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

.label.small {
  font-size: .48rem;
}

.label.character {
  font-size: .56rem;
  font-family: 'HK Grotesk';
  font-style: normal;
  text-anchor: middle;
}

.label.white-shadow {
  stroke: white;
  stroke-width: 0.125rem;
  fill: white;
  stroke-linejoin: round;
}

.info {
  font-family: 'HK Grotesk';
  font-size: .5rem;
  font-weight: 400;
}

.year {
  font-size: .5rem;
}

.guide-line, .thread {
  fill: none;
  stroke: #2E4053;
  stroke-width: 1px;
}

.decade-arc {
  stroke-dasharray: 1 4;
  stroke-linecap: round;
  stroke-dashoffset: 0
}

.decade.in-focus .decade-arc {
  -webkit-animation-name: arcs-direction;
  animation-name: arcs-direction;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.decade-arc.start {
  marker-end: url(#arrow-head-big);
}

.anni90 .decade-arc.start {
  marker-end: none;
}

.decade-arc.end {}

.previous-publication {
  fill: none;
  stroke: #5D6D7E;
  stroke-width: 1px;
  stroke-dasharray: 5 4;
  marker-end: url(#arrow-head);
}

.article {
  /* stroke-width: 0.5px; */
  display: none;
}

.article.ghost-node {
  display: none;
  fill: red;
}

.work-title {
  font-style: italic;
  display: inline;
  border: 1px solid;
  border-radius: 4px;
  padding: 0px 3.5px;
  white-space: nowrap;
}

.work-title:hover {
  border-width: 2px;
}

.work circle {
  cursor: pointer;
}

.work circle.in-focus {
  animation-name: in-focus;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

.work circle.unfinished {
  stroke-dasharray: 2 2;
}

.work circle.posthumous {
  /* fill: #5D6D7E; */
}

.work .volume-cover {
  opacity: 1e-6;
  pointer-events: none;
  transition: opacity .35s ease;
}

.work:hover .volume-cover, .work.work-in-focus .volume-cover {
  opacity: 1;
}

/* Other */
.hidden {
  display: none;
}

.scrollytelling-container {
  /* padding-top: 50vh;
  padding-bottom: 50vh; */
  z-index: 1050;
}

.scrollytelling-container p {
  font-size: 0.75rem;
}

.how-to {
  font-size: .6rem;
  font-family: 'HK Grotesk', sans-serif !important;
}

.how-to * {
  font-family: 'HK Grotesk', sans-serif !important;
}

.how-to>div {
  background-color: white;
  padding: .5rem;
  border: 1px solid var(--c-text);
  border-radius: 3px;
}

.how-to p {
  font-size: inherit;
}

.decade-txt {}

.intro {
  margin-bottom: 25vh;
}

.item {
  padding-bottom: 50vh;
}

.item>p {
  background-color: white;
  border: 1px solid var(--c-text);
  padding: 0.4rem 0.6rem;
  border-radius: 3px;
}

.item p:last-child {
  margin-bottom: 0;
}

.item-focus {
  margin-bottom: 25vh;
}

@-webkit-keyframes arcs-direction {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -9;
  }
}

@keyframes arcs-direction {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -9;
  }
}

@-webkit-keyframes fade-in-radius {
  from {
    r: 0;
  }

  to {
    r: 4;
  }
}

@keyframes fade-in-radius {
  from {
    r: 0;
  }

  to {
    r: auto;
  }
}

@keyframes in-focus {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.125);
  }
}

@keyframes in-focus-label {
  0% {
    font-size: .45rem;
  }

  100% {
    font-size: .55rem;
  }
}

@media screen and (max-width: 480px) {
  .legend.open .legend-content {
    height: 70vh;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 18px;
  }

  .label {
    font-size: .6rem;
  }

  .label.small {
    font-size: .55rem;
  }

  .article {
    display: block;
  }
}

@media screen and (min-width: 992px) {
  #visualisation-container {
    position: relative;
    top: 0;
  }

  .legend, .legend .legend-content {
    border: none;
    padding: 0;
    border: none;
  }

  .legend.open .legend-content {
    height: 70vh;
  }

  .how-to>div {
    background-color: none;
  }

  .item {
    padding-bottom: 35vh;
  }

  .item>p {
    background-color: transparent;
    border: none;
    padding: 0;
    border-radius: 3px;
  }

  .item p:last-child {
    margin-bottom: 1rem;
  }
}

@media screen and (min-width: 1200px) {
  html {
    font-size: 21px;
  }
}