@import "./common.css";

:root {
  --doc-bg-color-rgb-components: 2, 0, 30;
  --doc-bg-color: rgb(var(--doc-bg-color-rgb-components));
  --main-bg-color: #cecdfb;
  --main-snd-bg-color: #040031;
  --primary-text-color-rgb-components: 235, 235, 235;
  --primary-text-color: rgb(var(--primary-text-color-rgb-components));
  --secondary-text-color-rgb-components: 41, 16, 98;
  --secondary-text-color: rgb(var(--secondary-text-color-rgb-components));
  --vw-relative-font-size: 1.25vw;
  --min-font-size: 16px;
  --transition-duration: 0.25s;
  --transition-timing-function: ease-in-out;
  --border-radius: 0.35em;
}

a * {
  display: none;
}

h2 {
  font-size: 1.5em;
}

p {
  line-height: 1.375;
}

footer {
  & h3 > .technology {
    display: none;
  }
}

.translation {
  position: absolute;
  top: 0;
  left: 0;
  margin: 1.09375em;
  color: #8ec7ff;
  text-decoration: none;
  font-size: 0.667em;
}

.translation::first-letter {
  text-transform: uppercase;
}

header,
main,
footer {
  padding-left: var(--content-h-padding);
  padding-right: var(--content-h-padding);
}

header {
  padding: 1.967em var(--content-h-padding) 5.175em var(--content-h-padding);
  column-gap: var(--columns-gap);
}

.business-card {
  min-width: min(var(--column-capped-width), 100%);
}

.avatar {
  --size: 7.083em;

  flex: none;
  width: var(--size);
  height: var(--size);
  object-fit: cover;
  object-position: center -0.75em;
  box-sizing: border-box;
  border: solid 1px rgba(var(--doc-bg-color-rgb-components), 33%);
  background-color: white;
  border-radius: 50%;
}

.skills-preview {
  display: none;
}

.fullname {
  font-size: calc(2 * max(var(--vw-relative-font-size), 12px));
}

.contact,
.download {
  position: absolute;
  right: 0;
  aspect-ratio: 1;
}

.contact {
  top: 0;
  width: 1.031em;
  background: no-repeat center/contain url(/cv/images/linkedin.svg);
}

.download {
  top: 50%;
  translate: 0 -60%;
  width: 2.125em;
  background: no-repeat center/contain url(/cv/images/download.svg);
}

.web {
  display: none;
}

.business-card h2 {
  max-width: 13.25em;
}

.short-introduction {
  min-width: 27.594dvw;
}

.short-introduction h2 {
  font-size: calc(1.5 * max(var(--vw-relative-font-size), 13px));
}

.technologies {
  --icon-size: 3em;

  font-size: 0.638em;
}

.technologies svg {
  color: #bbb74c;
}

.long-introduction {
  min-width: 47.5%;
}

.long-introduction h2 {
  margin-bottom: 0.9em;
}

main > :where(.demos, .expertise) {
  --current-color-rgb-components: var(--secondary-text-color-rgb-components);
  color: rgb(var(--current-color-rgb-components));
}

main > *:nth-child(n + 2) {
  margin-bottom: 4em;
}

.demos {
  margin: -2em auto 2em auto;
}

@media (max-width: 570px) {
  .demos {
    max-width: var(--column-capped-width);
  }
}

.demos-inner-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -0.5em;
  flex-wrap: wrap;
}

@media (min-width: 800px) {
  .demos-inner-wrapper > .half-split {
    display: contents;
  }

  .desktop-order-2 {
    order: 2;
  }
}

@media (max-width: 799px) {
  .demos {
    margin-bottom: 4em;
  }

  .demos-inner-wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: space-between;
  }

  .demos-inner-wrapper > .half-split {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .demo {
    --scaled-size: calc(var(--size) * 2);
  }
}

.demo {
  --capped-size: max(var(--scaled-size, var(--size)), 74px);

  position: relative;
  flex: none;
  width: var(--capped-size);
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: 50%;
  border: solid 1px rgba(255, 255, 255, 62.5%);
  background: white no-repeat center/auto calc(100% + 2px);
  box-shadow: 0 0 0 1px rgba(var(--doc-bg-color-rgb-components), 12.5%);
  pointer-events: none;
  cursor: pointer;
  isolation: isolate;
}

@media (hover: hover) {
  .demo:hover {
    border-color: white;
  }
}

@media (hover: none) {
  .demo.hover {
    border-color: white;
  }
}

.demo::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: auto;
}

.demo-title {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  text-transform: capitalize;
  white-space: nowrap;
  line-height: 0.9;
  font-size: 0.667em;
  display: flex;
  flex-direction: column;
  row-gap: 0.25em;

  & > *:first-child {
    font-weight: bold;
  }

  & > *:nth-child(2) {
    font-weight: normal;
    font-size: 0.85em;
  }
}

:not(.mediterranean-war) > .demo-title {
  margin-top: 0.4em;
}

.flickr-coverflow .demo-title,
.mediterranean-war .demo-title {
  white-space: unset;
}

.demo.heimdall,
.demo.element-adapter,
.demo.workflow-ide {
  --size: 11.294%;
}

.demo.heimdall {
  background-image: url(/cv/images/heimdall.png);
}

.demo.element-adapter {
  background-image: url(/cv/images/element_adapter.png);
  margin-bottom: 4em;
}

.demo.workflow-ide {
  background-image: url(/cv/images/workflow_ide.png);
  background-position: left 60% center;
  margin-bottom: 3em;
}

.demo.acoa {
  --size: 10.73%;

  background-image: url(/cv/images/acoa.jpg);
  margin-bottom: 5.25em;
}

.demo.avalon-a {
  --size: 10.165%;

  background-image: url(/cv/images/avalona.png);
  margin-bottom: 4em;
}

@media (max-width: 799px) {
  .demos-inner-wrapper > .half-split:last-child .avalon-a {
    margin: 0;
  }
}

.demo.flickr-coverflow {
  --size: 9.6%;

  background-image: url(/cv/images/flickrcoverflow.png);
  background-size: auto 150%;
  background-position: left 66% center;
  margin-bottom: 3em;
}

@media (max-width: 799px) {
  .demos-inner-wrapper > .half-split:last-child .flickr-coverflow {
    margin-top: -4em;
    margin-bottom: 0;
  }
}

.demo.gare-o-loup {
  --size: 9.035%;

  background-image: url(/cv/images/gare_o_loup.png);
  background-position: right center;
  margin-bottom: 1em;
}

@media (max-width: 799px) {
  .demos-inner-wrapper > .half-split:last-child .gare-o-loup {
    margin-top: -5em;
    margin-bottom: 0;
  }
}

.demo.mediterranean-war {
  --size: 7.906%;

  background-image: url(/cv/images/mediterranean_war.png);
  background-position: left 70% center;
  margin-top: 2em;
}

@media (max-width: 799px) {
  .demos-inner-wrapper > .half-split:last-child .mediterranean-war {
    margin-top: -6em;
    margin-bottom: 0;
  }
}

.link {
  --icon-size: 1.667em;
  --coordinate: 10.75%;

  position: absolute;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(0, 0, 0, 33%);
  z-index: 1;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .demo:hover .link {
    visibility: visible;
    opacity: 1;
  }
}

@media (hover: none) {
  .demo.hover .link {
    visibility: visible;
    opacity: 1;
  }
}

.link::before,
.full {
  border-radius: 50%;
}

.link::before {
  content: "";
  position: absolute;
  width: var(--icon-size);
  aspect-ratio: 1;
  background: transparent no-repeat center/contain;
  pointer-events: auto;
  transition: var(--transition-duration) var(--transition-timing-function);
  transition-property: transform, filter;
}

.half {
  transform: rotateZ(45deg);
}

.top::before {
  top: var(--coordinate);
}

.left::before {
  left: var(--coordinate);
}

.right::before {
  right: var(--coordinate);
}

.top.left::before {
  transform-origin: bottom right;
  transform: translate(-50%, -50%) scale(0.825);
}

.half.top.right {
  transform-origin: bottom center;
}

.half.top::before,
.half.bottom::before {
  transform-origin: center center;
}

.half.top.right::before {
  right: 50%;
  top: -10%;
  transform: translate(-12.5%, -12.5%) scale(0.825) rotateZ(-45deg);
}

.half.bottom.left {
  transform-origin: top center;
}

.half.bottom.left::before {
  left: 50%;
  bottom: -10%;
  transform: translate(12.5%, 12.5%) scale(0.825) rotateZ(-45deg);
}

@media (hover: hover) {
  .demo:hover .top.left::before {
    transform: translate(-50%, -50%);
  }

  .demo:hover .top.right::before {
    transform: translate(50%, -50%);
  }

  .demo:hover .half.top.right::before {
    transform: translate(50%, -50%) rotateZ(-45deg);
  }

  .demo:hover .half.bottom.left::before {
    transform: translate(-50%, 50%) rotateZ(-45deg);
  }
}

@media (hover: none) {
  .demo.hover .top.left::before {
    transform: translate(-50%, -50%);
  }

  .demo.hover .top.right::before {
    transform: translate(50%, -50%);
  }

  .demo.hover .half.top.right::before {
    transform: translate(50%, -50%) rotateZ(-45deg);
  }

  .demo.hover .half.bottom.left::before {
    transform: translate(-50%, 50%) rotateZ(-45deg);
  }
}

.right,
.left,
.full {
  left: 0;
}

.top,
.full {
  top: 0;
}

.bottom {
  bottom: 0;
}

.full {
  width: 100%;
  height: 100%;
}

@media (hover: hover) {
  .half::before {
    filter: grayscale(100%) opacity(75%);
  }

  .half:hover::before {
    filter: unset;
  }
}

.half {
  width: 100%;
  height: 50%;
}

.half.top {
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

.half.bottom {
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%;
}

.video::before {
  background-image: url(/cv/images/play-icon.svg);
}

.application::before {
  background-image: url(/cv/images/chrome.svg);
}

.github::before {
  background-image: url(/cv/images/github.svg);
}

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (display: flow-root) {
    .application::before {
      background-image: url(/cv/images/safari.svg);
    }
  }
}

@supports selector(:-moz-is-html) {
  .application::before {
    background-image: url(/cv/images/firefox.svg);
  }
}

.expertise,
.typical-apps,
.trainning {
  row-gap: 1.483em;
  isolation: isolate;
}

.trainning {
  opacity: 50%;
}

.positions-wrapper {
  margin-left: auto;
  margin-right: auto;
}

.positions {
  --max-item-width: 33.04025em;
  --gap: 1em;

  display: revert;
  column-count: 1;
  column-gap: var(--gap);
  font-size: max(0.83vw, 12px);
  position: relative;
  margin-top: calc(-1 * var(--gap));
}

@media (width >= 768px) {
  .positions {
    column-count: 2;
  }
}

@media (width >= 1080px) {
  .positions {
    column-count: 3;
  }
}

@media (width >= 1480px) {
  .positions {
    column-count: 4;
  }
}

.positions > li {
  --color: rgba(255, 255, 255, 40%);
  --position-padding: 0.625em;

  width: 100%;
  box-sizing: border-box;
  padding: var(--position-padding);
  padding-bottom: 0.5em;
  border-radius: var(--border-radius);
  background-color: var(--color);
  color: var(--color);
  margin-top: var(--gap);
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  font-size: 1.1875em;

  &:has(section) {
    padding: calc(var(--position-padding) * 1.25);
    padding-bottom: 0.625em;
  }

  & > section {
    margin-top: 1.5em;
    display: flex;
    flex-direction: column;
    row-gap: 1em;

    & > .technology {
      display: none;

      & + svg {
        height: 1.5em;
        aspect-ratio: 1;
        align-self: end;
      }
    }

    & :where(h4, h5) {
      color: var(--primary-text-color);
    }
  }

  & :where(p, .topic) {
    color: var(--secondary-text-color);
  }
}

.company {
  color: var(--primary-text-color);
  justify-content: space-between;
}

.group {
  color: var(--secondary-text-color);
}

.time:first-child:not(:only-child) {
  margin-right: auto;
}

.month {
  color: rgba(var(--secondary-text-color-rgb-components), 55%);
}

footer {
  flex-wrap: wrap;
  column-gap: var(--columns-gap);
  display: flex;
  margin: 0 auto;
}

footer > :where(:not(last-child)) {
  margin-bottom: 5em;
}