/*** stylesheet.css ***/

@import url("../fonts/Go-Bold-Italic.ttf");
@import url("../fonts/Go-Bold.ttf");
@import url("../fonts/Go-Italic.ttf");
@import url("../fonts/Go-Medium-Italic.ttf");
@import url("../fonts/Go-Medium.ttf");
@import url("../fonts/Go-Mono-Bold-Italic.ttf");
@import url("../fonts/Go-Mono-Bold.ttf");
@import url("../fonts/Go-Mono-Italic.ttf");
@import url("../fonts/Go-Mono.ttf");
@import url("../fonts/Go-Regular.ttf");
@import url("../fonts/Go-Smallcaps-Italic.ttf");
@import url("../fonts/Go-Smallcaps.ttf");

:root {
  --fiurthorn-onyx: #353c3eff;
  --fiurthorn-blue-sapphire: #106989ff;
  --fiurthorn-blue-munsell: #548ca0ff;
  --fiurthorn-dark-sky-blue: #95b8c6ff;
  --fiurthorn-gainsboro: #dce3e5ff;
  --fiurthorn-cultured: #f3f6f7ff;
  --fiurthorn-tumbleweed: #edb28aff;
  --fiurthorn-spanish-orange: #e76d1cff;
  --fiurthorn-rosewood: #8e3b46ff;

  --nord-0-polar-night: #2e3440ff;
  --nord-1-polar-night: #3b4252ff;
  --nord-2-polar-night: #434c5eff;
  --nord-3-polar-night: #4c566aff;
  --nord-4-snow-storm: #d8dee9ff;
  --nord-5-snow-storm: #e5e9f0ff;
  --nord-6-snow-storm: #eceff4ff;
  --nord-7-frost: #8fbcbbff;
  --nord-8-frost: #88c0d0ff;
  --nord-9-frost: #81a1c1ff;
  --nord-10-frost: #5e81acff;
  --nord-11-aurora-red: #bf616aff;
  --nord-12-aurora-orange: #d08770ff;
  --nord-13-aurora-yellow: #ebcb8bff;
  --nord-14-aurora-green: #a3be8cff;
  --nord-15-aurora-purple: #b48eadff;
}

body {
  font-family: "Go Medium", Arial, Helvetica, sans-serif;
  color: var(--nord-1-polar-night);
  background-color: var(--nord-4-snow-storm);
}

a {
  color: var(--nord-1-polar-night);
  text-decoration: none;
}

pre,
code {
  font-family: "Go Mono", monospace;
}

section {
  padding: 20px;
}

section:not(:last-child) {
  margin-bottom: 30px;
}

.title {
  margin-top: 30px;
  margin-bottom: 0;
  font-size: 60px;
  font-weight: normal;
}

span.unbreakable {
  white-space: nowrap;
}

/* The switch - the box around the slider */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--nord-4-snow-storm);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--nord-6-snow-storm);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--nord-10-frost);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--nord-10-frost);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/** button player **/

.button-cover,
.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;
  top: 50%;
  width: 74px;
  height: 36px;
  margin: -0 auto 0 auto;
  overflow: hidden;
}

.button.r,
.button.r .layer {
  border-radius: 100px;
}

.button.b2 {
  border-radius: 2px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: var(--fiurthorn-cultured);
  transition: 0.3s ease all;
  z-index: 1;
}

table#xxo_board {
  margin: 0 auto;
  text-align: center;
  aspect-ratio: 1 / 1;
  table-layout: fixed;
}

#xxo_board td {
  background: #fff;
  max-height: 10vmin;
  min-height: 10vmin;
  height: 10vmin;
  max-width: 10vmin;
  min-width: 10vmin;
  width: 10vmin;
  aspect-ratio: 1 / 1;
  vertical-align: middle;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #777 !important;
  font-size: 5vmin;
}

@media screen and (max-width: 600px) {
  #xxo_board td {
    max-height: 15vmin;
    min-height: 15vmin;
    height: 15vmin;
    max-width: 15vmin;
    min-width: 15vmin;
    width: 15vmin;
    font-size: 7.5vmin;
  }
}

#xxo_board td span {
  margin-left: -4px !important;
  margin-top: 4px !important;
}

#xxo_board tr:nth-child(odd) td:nth-child(odd),
#xxo_board tr:nth-child(even) td:nth-child(even) {
  background: var(--nord-6-snow-storm);
}

#xxo_board td:hover {
  background: var(--nord-4-snow-storm) !important;
}

#xxo_board td.won {
  background: var(--nord-11-aurora-red) !important;
}

#xxo_board td.draw {
  background: var(--nord-13-aurora-yellow) !important;
}

.player-ai .knobs:before,
.player-ai .knobs:after,
.player-ai .knobs span {
  position: absolute;
  top: 4px;
  width: 20px;
  height: 10px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  border-radius: 2px;
  transition: 0.3s ease all;
}

.player-ai .knobs:before {
  content: "";
  left: 4px;
  background-color: var(--nord-10-frost);
}

.player-ai .knobs:after {
  content: "AI";
  right: 4px;
  color: var(--nord-1-polar-night);
}

.player-ai .knobs span {
  display: inline-block;
  left: 4px;
  color: var(--nord-6-snow-storm);
  z-index: 1;
}

.player-ai .checkbox:checked + .knobs span {
  color: var(--nord-1-polar-night);
}

.player-ai .checkbox:checked + .knobs:before {
  left: 42px;
  background-color: var(--nord-0-polar-night);
}

.player-ai .checkbox:checked + .knobs:after {
  color: var(--nord-6-snow-storm);
}

.player-ai .checkbox:checked ~ .layer {
  background-color: var(--nord-14-aurora-green);
}

.round_button:hover {
  background: var(--nord-15-aurora-purple);
  color: var(--nord-6-snow-storm);
}

.round_button:active {
  background: var(--nord-12-aurora-orange);
  color: var(--nord-6-snow-storm);
}

.round_button {
  cursor: pointer;
  background: var(--nord-10-frost);
  color: var(--nord-6-snow-storm);
  border-width: 1px;
  border-color: rgb(179, 179, 179);
  padding: 3px 20px;
  margin: 3px;
  border-radius: 10px;
}

/** spinner **/

.lds-dual-ring {
  display: inline-block;
  width: 40px;
  height: 40px;
}

.lds-dual-ring:after {
  content: " ";
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid var(--nord-10-frost);
  border-color: var(--nord-10-frost) transparent var(--nord-10-frost)
    transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media (min-width: 800px) {
  #cvimg {
    position: absolute;
    top: 145px;
    right: 80px;
    width: 200px;
  }
}

h2,
h3 {
  /* margin-top: -20px; */
  margin-left: -20px;
  margin-bottom: 30px;
  padding: 10px 0 10px 10px;
  border-bottom: 1px solid var(--nord-6-snow-storm);
  border-left: 3px solid var(--nord-10-frost);
}

body {
  margin: 0;
  padding: 0;
}

footer {
  font-family: "Go Smallcaps", monospace;
  position: sticky;
  color: var(--nord-4-snow-storm);
  background-color: var(--nord-10-frost);
  text-align: center;
  vertical-align: middle;
  height: 50px;
  padding: 1px 0;
}

ul.topnav {
  font-family: "Go Smallcaps", monospace;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--nord-10-frost);
}

.letter > ul.topnav {
  background-color: var(--nord-9-frost);
}

body > ul.topnav {
  position: sticky;
  top: 0;
  z-index: 999;
}

ul.topnav li {
  float: left;
}

ul.topnav li span,
ul.topnav li label,
ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li label span {
  color: white;
}

ul.topnav li:hover,
ul.topnav li a:hover:not(.active),
ul.topnav li span:hover:not(.active),
ul.topnav li label:hover:not(.active) {
  background-color: var(--nord-15-aurora-purple) !important;
}

ul.topnav li a.active {
  background-color: var(--nord-9-frost);
}

ul.topnav li.right {
  float: right;
}

dl {
  margin-top: 0;
  margin-bottom: 20px;
}

dt {
  font-weight: 700;
}

dd,
dt {
  line-height: 1.42857143;
}

dd {
  margin-left: 0;
}

#solution {
  display: none;
}

/*** switch ***/

label.switch {
  max-height: 22px;
  margin: auto;
}

input#playerO,
input#playerX {
  display: none;
  padding: 0;
  margin: 0;
  width: 0;
  height: 0;
}

/*** hamburger menu ***/

label.hamburg {
  display: none;
  background: var(--nord-10-frost);
  width: 60px;
  height: 50px;
  position: relative;
}

input#hamburg {
  display: none;
}

.line {
  position: absolute;
  left: 10px;
  height: 3px;
  width: 40px;
  background: var(--nord-6-snow-storm);
  border-radius: 2px;
  display: block;
  transition: 0.5s;
  transform-origin: center;
}

.line:nth-child(1) {
  top: 13px;
}

.line:nth-child(2) {
  top: 23px;
}

.line:nth-child(3) {
  top: 33px;
}

#hamburg:checked + .hamburg .line:nth-child(1) {
  transform: translateY(10px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2) {
  opacity: 0;
}

#hamburg:checked + .hamburg .line:nth-child(3) {
  transform: translateY(-10px) rotate(45deg);
}

@media print {
  a.hreflink:after {
    content: " [fiurthorn.github.io" attr(href) "]";
  }

  a.maillink:after {
    content: " [" attr(href) "]";
  }

  #solution {
    display: inline;
  }

  ul.topnav {
    display: none;
  }

  h2 {
    page-break-before: always;
  }

  .page-break {
    page-break-after: always;
  }

  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
  }

  pre,
  blockquote {
    page-break-inside: avoid;
  }

  .cv-section {
    page-break-inside: avoid;
  }

  .cv-newpage {
    page-break-before: always;
    page-break-inside: avoid;
  }
}

@media screen {
  .letter {
    background: var(--fiurthorn-cultured);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin: 26px auto 26px;
    max-width: 1000px;
    padding: 50px 100px 100px 100px;
    position: relative;
    width: 80%;
    min-height: calc(100vh - 300px);
  }

  h2 {
    border-bottom: 1px solid rgba(102, 102, 102, 0.678);
    /* padding-top: 20px; */
  }
}

@media screen and (max-width: 1000px) {
  .letter {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  #xxgo {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 820px) {
  ul.topnav li.right,
  ul.topnav li {
    float: none;
  }

  body > ul.topnav li {
    display: none;
  }

  #hamburg:checked ~ li {
    display: block;
  }

  label.hamburg {
    display: block;
  }
}