/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
* cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* variables */
:root {
  --gone-color: #8BAE66; 
  --blank-color: #EBD5AB99;
  --highlight-color: #E67E22;
  --over-time: #628141;
  --border-color: rgb(31, 35, 40, 0,05);
  --box-size: 8px;
  --width: 80%;
  --quote-width: 60%;
  --table-border: 1px;
  --font-size: 14px;
}

/* headline */
h1.memento {
  text-align: center; 
  padding-top: 20px;
  padding-bottom: 30px;
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* nav bar */
.navbar {
  display: flex;
}


/* block layout */
.block {
  display: flex;
  flex-wrap: wrap;
  /* width: var(--width); */
  /* justify-content: right; */
  margin: auto;
  width: var(--width);

  .year {
    display: flex;
    flex-wrap: wrap;
    padding: 2px;
    flex-direction: row;
    width: 40px;
  }

  .box {
  padding: 0px;
  margin: var(--table-border);
  width: var(--box-size);
  height: var(--box-size);
  border-radius: var(--table-border);
  }

  .birth {
    text-align: left;
    font-family: "Montserrat", serif;
    flex-shrink: 0;
    flex-grow: 1;
    flex-basis: 100%;
    padding-bottom: 5px;
  }

  .death {
    /* text-align: right; */
    font-family: "Montserrat", serif;
    flex-shrink: 0;
    align-self: flex-end;
    /* flex-grow: 1; */
    /* flex-basis: 100%; */
    padding-left: 5px;
  }
}

/* language switcher */
ul {
  font-family: "Montserrat", serif;
  list-style-type: none;
  margin-left: auto;
  padding: 0;
  padding-right: 10px;
  display: flex;
}

li a {
  display: block;
  color: black;
  padding: 8px 8px;
  text-decoration: none;
}

li a:hover {
  background-color: var(--blank-color);
}

/* padding for language switcher */ 
.fi {
  padding-right: 5px;
}

/* quotation */
.quote {
  width: var(--quote-width);
  margin: auto;
  text-align: left;
  padding-bottom: 20px;
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;

  & .author {
    padding-top: 0.5em;
    font-style: italic;
  }
}

.intro {
  width: var(--width);
  margin: auto;
  text-align: left;
  /* padding-bottom: 20px; */
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
}

/* container */

.container {
  display: flex;
  flex-direction: column;
}

.form {
  margin: auto;
  padding-top: 1em;
  padding-bottom: 1em;
}

#birth {
  padding-bottom: .5em;
  text-align: left;
  font-family: "Montserrat", serif;
}

#death {
  padding-top: .5em;
  text-align: right;
  font-family: "Montserrat", serif;
}

@keyframes nowAnimation {
  0% {background-color: var(--highlight-color);}
  50% {background-color: var(--blank-color);}
  100% {background-color: var(--highlight-color);} 
}

#gone {
  background-color: var(--gone-color);
}

#over {
  background-color: var(--over-time);
}

#now {
  animation-name: nowAnimation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

#blank {
  background-color: var(--blank-color);
  .5px solid var(--border-color);
}

select {
  font-family: "Montserrat", serif;
  font-size: var(--font-size);
  border-radius: 4px;
  background-color: var(--blank-color);
  border: none;
  height: 2em;
}

input[type=button], input[type=submit], input[type=reset] {
  background-color: var(--highlight-color);
  border: none;
  border-radius: 4px;
  color: white;
  height: 2em;
  margin: 4px 2px;
  cursor: pointer;
  font-family: "Montserrat", serif;
  font-size: var(--font-size);
  padding: 0 1em 0 1em;
}

.footer {
  margin: auto;
  text-align: center;
  font-family: "Montserrat", serif;
  font-size: 12px;
  padding-top: 1em;
  padding-bottom: 2em;
}

.centered {
  margin: auto;
}

@media screen and (max-width: 800px) {
  :root {
    --width: 95%;
    --quote-width: 80%;
    --font-size: 12px;
  }
}