body {
  background: black; color: white;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  font-family: Calibri, sans-serif;
  --bg-color: rgb(33, 43, 51);
  margin: 0; padding: 0; width: 100vw; height: 100vh;
  line-height: 1.1;
  overflow: hidden;
  .Short, .Long { overflow:hidden; max-height: 50em; transition: max-height 0.5s; }
}
.Collapsable { &.ShowLongs .Short, &:not(.ShowLongs) .Long { max-height: 0; margin: 0; } }
.Translated { transition: opacity 0.25s; }
body.Translating .Translated { opacity: 0; }
body[lang=en] [lang]:not([lang=en]) { display: none; }
body[lang=nl] [lang]:not([lang=nl]) { display: none; }

/* <p> ends before </p> if it contains other elements like ul */
div.P { margin-bottom: 0.5em; line-height: 1.3em; }

.NoTransitions * {
  transition: none !important;
}
.Content {
  position: relative;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  --aspect-ratio: 1.10;
  aspect-ratio: var(--aspect-ratio);
  font-size: calc( min(calc(100vw / var(--aspect-ratio)), 100vh) / 68 );

  background-image: url(coder-from-back_wide_background.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
  background-color: var(--bg-color);
}

.logo { width:200px; position:absolute; right:0; top: 0; }
.background { position:absolute; left:0; top:0; width:100%; z-index: -1;}
.bottom-right { position:absolute; display:inline-block; right:1em; bottom:1em; }
a { color:white; }

span.Pills {
  color:black; background-color:white;
  border: 1px solid white; border-radius: 0.5em;
  margin: 0; padding: 0;
  display: flex;
  label { position: relative; padding: 0.25em 0.25em 0 0.25em; cursor: pointer; }
  label:first-child { border-top-left-radius: 0.5em; border-bottom-left-radius: 0.5em; padding-left: 0.5em; }
  label:last-child { border-top-right-radius: 0.5em; border-bottom-right-radius: 0.5em; padding-right: 0.5em; }
  label input { position:absolute; opacity:0; cursor:pointer; }
  label:has(input:checked) { color:white; background-color: #a22c58; }
}

div.Title, div.Subtitle {
  display:block;
  width:fit-content;
  margin: 0 auto;
  background-color: rgba(0,0,0,0.6);
  box-shadow: 0 0 2em 2em rgba(0,0,0,0.6);
  pointer-events: none;

  h1 {
    display:block;
    width:fit-content;
    font-size: 350%;
    font-weight: bold;
    background-color: #ff4651;
    color: transparent;
    text-shadow: 4px 4px 4px rgba(123,29,29,0.3);
    background-clip: text;
    margin: 0 0 0.2em 0;
  }
}
div.Subtitle {
  box-shadow: 0 0.5em 2em 1.7em rgba(0,0,0,0.6);
  h1 { font-size: 200%; }
}
div.BottomBar {
  position: absolute;
  left: 0; right: 0; height: 17.5em; bottom: 0;
  border-top: 1px solid #383838;
  display: flex;
  flex-direction: row;
  z-index: 10;
  div.BBBlock {
    position: relative;
    width: calc( 100% / 6 );
    height: 100%;
    padding: 0.75em 1.5em 0 1.5em;
    overflow: hidden;
    border-right: 1px solid white;
    z-index: 10;
    &:last-child { border-width: 0; }
    &:hover {
      &:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        width: calc(100% + 1px);
        height: 95%;
        background: transparent;
        box-shadow: inset 0 0 1em 0.5em white;
      }
    }
    &:after, &:before {
      content: '';
      position: absolute;
      height: 5%; width: 2%; right: -1%; top: 0;
      background-color: var(--bg-color);
    }
    &:after { top:auto; bottom: 0; height: 10%; }
    h1 { font-size: 150%; display:block; margin: 0 -1em 0 -1em; padding:0; text-align:center; }
    button {
      position: absolute; left:0; right:0; bottom:1.75em; padding: 0.2em 1em; margin: 0 auto; width:fit-content;
      font-size: 80%; background-color: #25a1dd; border-width: 0; border-radius: 1em;
      pointer-events: none;
    }
    img {
      max-width: 100%;
      max-height: 50%;
      margin: 0 auto;
      display: block;
    }
    > span {
      display: block;
      font-size: 80%;
      text-align: center;
    }
  }
}
div.HighlightBar {
  position: absolute;
  left: 0; right: 0; height: 0.5em; bottom: 17.5em;
  background: white;
  z-index: 10;
}

div.DetailsPanel {
  --border-radius: 1em;
  position: absolute;
  left: 25%; right: 25%; height: 60%; bottom: calc(18em - 2px);
  z-index: 5;
  border: 2px solid white;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  background-color: var(--bg-color);
  transition: bottom 0.25s ease-in-out, clip-path 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
  clip-path: rect(-2em calc(100% + 2em) 100% -2em);
  &.Hidden { bottom: -34%; clip-path: rect(-2em calc(100% + 2em) 0 -2em); box-shadow: 0 0 0 0; }
  box-shadow: 0 0 2em 0.5em white;
  overflow: hidden;

  .DBlock {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 0.25s ease-in;
    &.Hidden { opacity: 0; pointer-events: none; }
    h1 { width:100%; text-align:center; }
    img.Logo {
      position: absolute; right: 0; top: 0; display:block; margin:0 auto; width: 10em;
      transition: opacity 0.25s;
      &.Diminished { opacity: 0.2; }
    }
    table {
      margin-left: 1em; margin-right: 1em; width: 95%; border-collapse: collapse;
      tr:nth-child(odd) { background-color: #37344d; }
      &:not(.NOSC) { td:first-child:after { content: ':' } }
      td:first-child { width: 9em; }
      td { vertical-align: top; padding-top: 0.25em; padding-bottom: 0.25em; padding-left: 0.5em; }
    }

    &.About {
      img.Nick { display: inline-block; width: 8em; position:absolute; top:1em; left:1em; border-radius: 1em; }
      table { margin-top: 10em; width:95%; }
      table td { font-size: 125%; }
    }
    &.Personality {
      b { display: block; }
      .DISC {
        position:absolute;left:18em;top:5.4em;width:9em;height:10em;
        img { width:9em; transition: transform 0.5s; position:absolute; z-index: 2; }
        img:hover { transform: scale(2,2); }
        div { font-size:80%;text-align:center;width:100%;bottom:0;position:absolute; z-index: 1; }
      }
    }
    &.Skills {
      .SkillsMatrix {
        margin-top: 1em; border: 1px solid white;
        color: black; font-size: 80%; font-style: italic;
        .Header { border:1px solid white; background-color:yellow; padding: 0 0.5em; }
        .Matrix {
          background: rgb(205,8,8);
          background: linear-gradient(90deg, rgba(205,8,8,1) 0%, rgba(119,121,9,0.9822129535407913) 47%, rgba(255,237,0,1) 100%);
          white-space: pre;
          line-height: 1.5em;
        }
      }
      .History {
        margin-top: 0.75em; height: 8.5em; overflow: auto;
      }
    }
    &.Experience {
      .TableContainer {
        position:absolute; margin-top: 2em; height: 35.9em; overflow: auto;
        font-size: 95%;
        ul { margin: 0.5em 0; }
        tr:nth-child(even) { background-color: #37344d; }
        tr:nth-child(odd) { background-color: transparent; }
        td {
          transition: opacity 0.25s;
          &:last-child { padding-bottom: 1.5em; }
          &.Fixed { position:fixed; }
          &.Hidden { opacity:0;}
          .Long { font-size: 90%; }
        }
      }
      .Pills label {
        padding-top: 0;
        &:first-child { padding-top: 0.1em; padding-left: 0.4em; }
      }
      .TechSummary {
        font-size: 80%; margin-top: 0.5em; margin-bottom: 0.5em;
      }
      .DateRange {
        font-size: 75%; font-style: italic; margin-top: 0.25em;
      }
      .Remote {
        font-size: 50%;
      }
    }
    &.CV {
      .CVLink {
        .Thumbnail {
          width: 17em; margin-left: 10.2em; margin-top:5em;
          transition: transform 0.5s; position:absolute; z-index: 3;
          &:hover { transform: scale(1.2,1.2); z-index: 1; }
        }
        .DownloadBottom {
          text-align:center; position:absolute; width:100%; bottom:1em;
        }
        .DownloadCenter {
          position:absolute; width:fit-content; left:calc(50% - 3.5em); top:50%; padding:0.5em;
          background-color:black; color: white;
          pointer-events:none; z-index:2;
        }
      }
    }
  }
}