@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');

:root {
  --body-background: darkgray;
  --splash-background: rgba(149, 149, 149, 0.95);
  --content-border: gray;
  --content-background: white;
  --text: black;
  --black: black;
  --copyright-text: black;
  --subtitle-underline: red;
  --jobtitle-underline: #00838f;
  --left-right: red;
  --company: #1976d2;
  --button: #e4e4e4;
  --button-hover: #2e2e2e;
  --button-ative: #c8c8c8;
  --button-text-hover: #cccccc;
  --extra-background: #f2f2f2;
  --experience-font-weight: 600;
  --beginner: #00bfa5;
  --intermediate: #d03ebf;
  --advanced: #1976d2;
  --link-color: #1976d2;
  --link-color-hover: #64b5f6;

}

/* overwrite these to the root colours in "@media print" */
[data-theme="dark"] {
  --content-background: #2e2e2e;
  --text: #cccccc;
  --subtitle-underline: #be0000;
  --jobtitle-underline: #00bfa5;
  --extra-background: #434343;
  --experience-font-weight: 500;
  --link-color: #64b5f6;
  --link-color-hover: #1976d2;
}

.rainbow {
  background-image: linear-gradient(to right, #f92342, #ffa000, #ffd54f, #99e227, #64b5f6, #1976d2);
  background-clip: text;
  -webkit-background-clip: text;
  /* -webkit-text-fill-color: transparent; */
  color: transparent;
}

/* https://code-boxx.com/full-screen-css-loading-spinner/ */
#splash,
#noticeBackground {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  background: var(--splash-background);
  transition: opacity 1000ms;

}
#splash {
    opacity: 0;
}
#splash.show {
  visibility: visible;
  opacity: 1;
}
#splash img {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%);
}

#notice {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%);
  padding: 1.2vw 2vw;
  background-color: var(--body-background);
  border: 5px solid var(--content-border);
  border-radius: 10px;
  color: black;
  font-weight: bold;
  display: flex;
  align-items: center;
}
#notice img {
  width: 80%
}
#notice span {
  text-align: center;
}
#notice > div {
  display: grid;
  justify-items: center;
}
#closeNotice {
  margin-left: 10px;
  color: #e4e4e4;
  font-weight: bold;
  font-size: 150%;
  text-align: center;
  cursor: pointer;
  align-self: baseline;
}
#closeNotice:hover {
  color: black;
}

* {
  font-size: 99%;
}

hr {
  height: 1.5px;
  border: none;
  background-color: var(--black);
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  margin: 0% 1% 1% 1%;
  color: var(--text);
  background-color: var(--body-background);
}

nav {
  display: flex;
  flex-direction: row;
  margin-block-end: -0.5em;
  justify-content: space-between;
  width: 100%;
}

nav div.fullButton {
  width: 20%;
}

nav div.sideButton {
  width: 10%;
  display: flex;
  align-items: flex-start;
}

nav div.halfButton button {
  width: 50%;
}

nav button {
  width: 100%;
  padding: 8px;
  background-color: var(--button);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

nav button:hover {
  color: var(--button-text-hover);
  background-color: var(--button-hover);
}

nav button.active:hover {
  color: var(--black);
}

nav div.halfButton button:hover svg {
  fill: var(--button-text-hover);
}

nav button.active {
  padding-bottom: 16px;
  margin-bottom: 6px;
  text-decoration: underline 2px;
  background-color: var(--button-ative);
  border-radius: 0 0 10px 10px;
}

nav div.halfButton button.active {
  border-radius: 0 0 10px 0;
}

button:disabled {
  background-color: transparent;
}

h1 {
  margin-block-start: 0em;
  margin-block-end: 0em;
  font-size: 2.47em;
}

h2 {
  margin-block-start: 0em;
  margin-block-end: 0.25em;
  font-size: 2.0em;
}

h3 {
  font-size: 1.17em;
  margin-block-start: 0em;
  margin-block-end: -0.7em;
  padding-top: 1%;
  border-bottom: 1px solid var(--subtitle-underline);
}

h4 {
  margin-left: 2%;
  margin-block-start: 1.0em;
  margin-block-end: 0em;
}

h5 {
  margin-block-end: 0em;
  margin-left: 0.75%;
  font-size: 120%
}

table {
  margin-left: 2%;
  margin-block-start: 1.0em;
  margin-block-end: 1.0em;
}

table td {
  vertical-align: top;
}

table td img {
  width: 1.5vw;
  scale: 90%;
}

table thead {
  text-align: left;
  border-bottom: 1px solid;
}
table thead th {
  width: 20%;
}
table thead th:first-child {
  width: 40%;
}

p:not(#about p, #consultancies p) {
  margin-block-start: 0em;
  margin-block-end: 0em;
}

ul:not(#tools ul, #hobbies ul, #about ul, #consultancies ul) {
  margin-block-start: 0em;
  margin-block-end: 1.0em;
}

svg {
  margin-right: 1%;
  margin-bottom: -0.1%;
}
.home svg {
  margin-right: 2px;
}
.mail svg {
  margin-right: 3px;
  margin-bottom: -1%;
}

footer {
  text-align: center;
  color: var(--copyright-text);
}

a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-color-hover);
}

.row {
  display: flex;
  flex-direction: row;
  padding-bottom: 1%;
}

.column {
  padding: 1%;
}

.column > p:last-child {
  margin-bottom: 0;
}
.column > table:last-child {
  margin-bottom: -0.5em;
}
.column > div:last-child {
  margin-bottom: -1em;
}

.leftOffCenter{
  border-right: 1px dashed var(--left-right);
  padding-right: 2%;
  flex: 33%; /*38%*/
}
.leftCenter {
  border-right: 1px dashed var(--left-right);
  padding-right: 2%;
  flex: 50%;
}

.rightOffCenter{
  flex: 67%; /*62%*/
  margin-top: -0.3%; /* the uneven division of right and left cause top misalignment */
  padding-left: 2%;
}
.rightCenter{
  flex: 50%;
  padding-left: 2%;
}

/* In case it goes to 2 pages..
.experience:not(:nth-child(2)) {
  margin-top: -0.5em;
}
*/

.company {
  color: var(--company);
  font-size: 16px;
  font-weight: 700;
}

.activeYears {
  font-size: 90%;
}

.role {
  text-decoration: underline var(--jobtitle-underline);
}

.language {
  width: 70%;
}

.experienceSubHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-block-end: 0;
  margin-block-start: 0;
}
.experienceSubHeader + .experienceSubHeader:not(.extra .experienceSubHeader) {
  margin-top: -1em;
}

.subProject + .subProject {
  margin-top: -0.5em;
}

.multiTitle {
  margin-left: 1%;
  margin-top: -1.0em;
}

.project {
  display: inline-flex;
  width: 98%;
  grid-column-gap: 2%;
  margin-left: 2%;
}

.project,
.extra h4,
.extra span {
  margin-block-start: 0;
}
div.extra:not(.subProject) {
  border-top: 1.0em solid var(--content-background);
}
.extra {
  background-color: var(--extra-background);
}

/* button text after icons */
.narrow {
  display: none;
}

table .advanced {
  color: var(--advanced);
  font-weight: var(--experience-font-weight);
}
table .intermediate {
  color: var(--intermediate);
  font-weight: var(--experience-font-weight);
}
table .beginner {
  color: var(--beginner);
  font-weight: var(--experience-font-weight);
  min-width: 80px; /* hack to make the tables identically sized */
}

.grid-container {
  color: black;
  background-color: var(--body-background);
  padding: 2vw 2vw 1vw; /* top | left and right | bottom */
  border-radius: 2vw;
  margin-bottom: 1vw;
  margin-top: 2vw;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1vw;
  grid-auto-flow: column;
}

.guide-header {
  cursor: pointer;
  width: fit-content;
  color: var(--link-color)
}
.guide-header:hover {
  color: var(--link-color-hover)
}

.guide-subheader {
  margin-block-start: 0.2em;
}

.grid-container img {
  max-width: 100%;
  max-height: 30vh;
}

.grid-item img:last-child { /* change if img is centered in a flex */
  padding-bottom: 1vw;
}

.grid-item:not(.grid-item:first-child) {
  padding-left: 1vw;
  border-left: 1px solid;
  border-top: none;
}

.maxheight {
  max-height: 300vh;  /* this doesn't work: height: auto; */
  overflow-y: hidden;
  transition: max-height 1.5s ease;
}
.zeroheight {
  max-height: 0;  /* this doesn't work: height: 0; */
  overflow-y: hidden;
  transition: max-height 0.5s ease;
}


/* -- Id --- */
#content {
  margin-top: 1%;
  background-color: var(--content-background);
  border: solid 4px var(--content-border);
  padding: 0.5%;
}

#consultancies {
  padding: 1%;
}
#consultancies p {
  margin: 1vw;
}
#consultancies #printGuide {
  margin-bottom: 1.5vw;
}
#consultancies #introduction p:last-child,
#consultancies #introLists p:nth-of-type(2) {
  margin-bottom: 1.4em;
}
#consultancies ul {
  margin-left: 0.5vw;
}
#consultancies #introLists ul,
#consultancies #introLists table {
  margin-top: 0vw;
}
#consultancies #introLists table td:nth-child(-n + 2){
  padding-right: 1vw;
}
#consultancies #introLists table:last-child td:nth-child(-n + 2){
  padding-right: 4vw;
}
#consultancies .experience ul {
  margin-left: 0.5vw;
  margin-block-start: 0.2em;
  margin-block-end: 0.2em;
}
#consultancies .experienceSubHeader {
  flex-direction: column;
}
#consultancies .experience {
  margin-block-end: 0.7em;
}
#consultancies .experience:nth-of-type(1) {
  margin-block-start: -0.8em;
}
#consultancies .experience:last-child {
  margin-block-end: 1.2em;
}
#consultancies #experienceConsult {
  margin-top: 1.2em;
}
#consultancies #skillsList h2 {
  margin-block-start: 0.8em;
  margin-block-end: -0.5em;
}
#consultancies #skillsList table {
  border-collapse: collapse;
  margin-block-start: 0.5em;
  width: 95%;
}
#consultancies #skillsList table td {
  padding-left: 0.5vw;
}

#top {
  padding: 1%;
  display: flex;
  justify-content: space-between;
  margin-block-end: 0.5em;
}

#areaContact  {
  display: flex;
  column-gap: 5%;
}

#url {
  visibility: hidden;
}

#cloud {
  margin-bottom: -20px;
}

#certificates table td {
  border-bottom: 1px dashed var(--content-border);
}
#certificates table tr:last-child td {
  border-bottom: 0;
}

#list .column table {
  font-size: 95%;
  padding: 1%;
}
#list td {
  width: 100%;
}
#list td.empty {
  width: 10%;
}

#about ul {
  margin-top: -0.8em;
}

#about h3 + p {
  margin-top: 1.1em;
}

#fourOfour {
  text-align: center;
  margin: 3vw;
  width: 90vw;
}

#fourOfour > img {
  width: 50%;
}


/* when using the browser print option */
@media print {
  header,
  footer,
  #printGuide {
    display: none;
  }
  .extra {
    background-color: revert;
  }
  #url {
    visibility: visible;
  }
  /* Use light theme when printing */
  [data-theme="dark"]  {
    --content-background: white;
    --text: black;
    --subtitle-underline: red;
    --jobtitle-underline: #00838f;
    --experience-font-weight: 600;
    --link-color: #1976d2;
  }
}

/* mobile with no hover mechanism */
@media (hover: none) {
  nav button:hover { /* ironic, isn't it? */
    color: var(--black);
    background-color: var(--button);
  }

  nav button:disabled {
    background-color: transparent;
  }

  nav div.sideButton button:hover svg {
    fill: var(--black);
  }

  nav button.active {
    background-color: var(--button-ative);
  }
}

/* mobile and small screens */
@media screen and (max-width: 600px) {
  header {
    border-left: 4px solid var(--content-border);
    border-right: 4px solid var(--content-border);
  }

  nav {
    margin-bottom: -1%;
    flex-direction: column;
  }

  nav button {
    text-align: left;
  }

  nav div.fullButton, nav div.sideButton {
    width: 100%;
  }

  nav div.fullButton {
    order: 5;
  }
  nav div.sideButton:nth-child(2) { /* about */
    order: 4;
  }
  nav div.sideButton:first-child { /* consult */
    order: 3;
  }
  nav div.sideButton { /* language */
    order: 2;
  }
  nav div.sideButton:last-child { /* confetti & theme */
    order: 1;
  }

  nav button.active,
  nav div.halfButton button.active {
    margin-bottom: 0px;
    border-radius: 0;
  }

  .mail svg {
    margin-bottom: -0.35%;
  }

  .row {
    flex-direction: column;
  }

  .column > p:last-child {
    margin-bottom: revert;
  }
  .column > table:last-child {
    margin-bottom: revert;
  }
  .column > div:last-child {
    margin-bottom: revert;
  }

  .leftOffCenter,
  .leftCenter {
    border-right: revert;
    flex: 100%;
  }

  .rightOffCenter,
  .rightCenter {
    padding-left: 1%;
    padding-bottom: 2%;
    flex: 100%;
  }

  .narrow {
    display: revert;
  }

  .grid-container {
    grid-auto-flow: row;
    margin-bottom: 3vw;
    padding-top: 3vw;
    padding-bottom: 3vw;
  }
  .grid-item:not(.grid-item:first-child) {
    padding-top: 2vw;
    border-left: none;
    border-top: 1px solid;
  }

  #top {
    flex-direction: column-reverse;
  }

  #areaContact  {
    flex-direction: column;
  }

  #cloud {
    margin-top: 2vw;
    margin-bottom: 2vw;
    align-self: center;
  }

  #url {
    display: none;
  }

  #about,
  #resume {
    margin-bottom: -0.5em;
  }
}