/* Home stylesheet: */

/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNS-Light"), local(".SFNSText-Light"),
    local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"),
    local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"),
    local("DroidSans"), local("Tahoma");
}

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 300;
  src: local(".SFNS-LightItalic"), local(".SFNSText-LightItalic"),
    local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"),
    local("Segoe UI Light Italic"), local("Ubuntu Light Italic"),
    local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma");
}

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 400;
  src: local(".SFNS-Regular"), local(".SFNSText-Regular"),
    local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"),
    local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"),
    local("DroidSans"), local("Tahoma");
}

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 400;
  src: local(".SFNS-Italic"), local(".SFNSText-Italic"),
    local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"),
    local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"),
    local("DroidSans"), local("Tahoma");
}

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 500;
  src: local(".SFNS-Medium"), local(".SFNSText-Medium"),
    local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"),
    local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"),
    local("DroidSans-Bold"), local("Tahoma Bold");
}

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 500;
  src: local(".SFNS-MediumItalic"), local(".SFNSText-MediumItalic"),
    local(".HelveticaNeueDeskInterface-MediumItalicP4"),
    local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"),
    local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"),
    local("DroidSans-Bold"), local("Tahoma Bold");
}

@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 700;
  src: local(".SFNS-Bold"), local(".SFNSText-Bold"),
    local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"),
    local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"),
    local("DroidSans-Bold"), local("Tahoma Bold");
}

@font-face {
  font-family: system-ui;
  font-style: italic;
  font-weight: 700;
  src: local(".SFNS-BoldItalic"), local(".SFNSText-BoldItalic"),
    local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"),
    local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"),
    local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
}

:root {
  font-family: system-ui;
  /* (62.5/100) * 16px = 10px */
  font-size: 62.5%;
  /* 14px */
  --font-size--small: 1.4rem;
  /* 16px */
  --font-size--default: 1.6rem;
  /* 24px */
  --font-size--large: 2.4rem;
}

body {
  font-size: var(--font-size--default);
  word-break: break-all;
  min-height: 100vh;
}

.gray-rounded {
  border: none;
  border-bottom: 2px solid gray;
  border-radius: 5px;
}

.shadow {
  border: none;
  padding: 0.5rem;
}

.shadow:active {
  box-shadow: inset 1px 2px 5px gray;
  transform: translateX(1px) translateY(1px);
  background-color: #e5e5e5;
}

.btb,
.rb {
  opacity: 0;
}

.btb {
  border-bottom: 5px solid gray;
}

.rb {
  border-right: 5px solid gray;
}

.transop-btb,
.transop-rb {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.container {
  min-height: inherit;
  padding: 1rem;
}

.display-container {
  display: grid;
}

.display {
  text-align: center;
  align-self: center;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 3px solid gray;
  border-radius: 10px;
  background-color: bisque;
  box-shadow: 5px 5px 5px lightgray;
  margin-bottom: 2rem;
}

.game-container {
  display: grid;
}

.game {
  gap: 2rem;
  min-height: 60vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  align-items: center;
  justify-items: center;
  align-content: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 1rem;
  background-color: azure;
  box-shadow: 5px 5px 5px lightgrey;
}

.game-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.gameboard {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  font-size: 0;
}

.player-one,
.player-two {
  display: grid;
  align-content: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: bold;
  text-align: center;
  height: 200px;
  width: 200px;
  opacity: 0;
  border-radius: 50%;
  border: 1px solid gray;
  padding: 0.5rem;
}

.player-one {
  color: blue;
}

.player-two {
  color: red;
}

.player-noob,
.player-average,
.player-deus {
  background-size: cover;
  background-repeat: no-repeat;
}

.player-noob {
  background-image: url(../img/noob-rx.jpg);
}

.player-average {
  background-image: url(../img/average-ultra.jpg);
  background-position: 53%;
}

.player-deus {
  background-image: url(../img/deus-ex-machina.jpg);
  background-position: 90%;
}

.transop-pone,
.transop-ptwo {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.xmark-zero,
.omark-zero {
  background-position: 50%;
  background-size: 0;
  background-repeat: no-repeat;
}

.xmark-one,
.omark-one {
  background-size: 80%;
  transition: background-size 0.5s ease-in-out;
}

.xmark-one {
  background-image: url(../img/xmark.svg);
}

.omark-one {
  background-image: url(../img/omark.svg);
}

.result {
  display: none;
  background-color: azure;
  border-style: outset;
  border-radius: 5px;
  padding: 0.5rem;
  font-size: var(--font-size--large);
}

.result-show {
  display: block;
}

.winner {
  border: 5px solid #e1c634;
  transition: border 1s ease-in-out;
}

/* Attributions:
Photo by Kindel Media: https://www.pexels.com/photo/a-technological-advance-robotic-sensor-9028867/
Photo by Pavel Danilyuk: https://www.pexels.com/photo/close-up-shot-of-white-robot-toy-8294606/
Green Digital Text On A Person by Scopio from NounProject.com
*/
