style.css

@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: white;
  font-family: Arial, sans-serif;
  background-color: #b78847;
  background-image: url("https://raw.githubusercontent.com/c-zhenhao/project1/main/seamless_wood.jpg");
  background-repeat: repeat;
}

h1 {
  margin-bottom: 5px;
}

h2 {
  margin-top: 5px;
  margin-bottom: 2px;
}

.navbar {
  background: #007a79;
  height: 69px;
  width: 100%;

  /* flexbox */
  display: flex;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-container {
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex: 1;
}

.navbar-container-title {
  justify-self: center;

  /* font */
  font-size: 1.5em;
  font-family: "Obitron", sans-serif;

  /* bounding boxes */
  margin-left: 5%;
}

.navbar a {
  text-decoration: none;
  font-weight: bold;
}

.navbar a:hover {
  text-decoration: none;
  font-weight: bold;
}

ul {
  list-style-type: none;
  margin-left: 20px;

  /* flexbox */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* containers */
.game-container {
  min-width: 950px;
  max-width: 1450px;
  height: 100%;

  margin-left: 5%;
  margin-right: 5%;

  border: 5px solid white;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;

  box-shadow: inset 0 0 10px black;

  background-color: #3c413f;
}

.header-container {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  justify-items: center;
  align-items: center;

  /* bouding boxes */
  /* margin: 5px; */
  border: 2px solid transparent;
  /* padding: 5px; */
}

.header-container-box1,
.header-container-box2 {
  /* flexbox */
  display: flex;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;

  /* font */
  text-shadow: 1px 1px 1px #5e6c6b;

  /* bounding box */
  margin: 2px;
  border: 5px solid transparent;
  padding: 2px;
}

.rounds-container,
.pins-container,
.guess-container,
.options-container {
  background-color: #3c413f;

  /* flexbox things */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;

  /* actual dimensions */
  margin-left: 5%;
  margin-right: 5%;

  /* bounding box */
  /* margin: 5px; */
  /* border: 5px solid red; */
  padding: 5px;
}

.rounds-container {
  justify-content: space-around;
}

.pins-container {
  justify-content: space-around;
}

.rounds {
  /* flexbox thing */
  flex: 1;
  align-items: flex-start;
  flex-wrap: wrap;

  /* dimensions */
  height: 70px;

  /* font related */
  font-size: 3em;
  text-align: center;
  font-family: Impact;
  text-shadow: 1px 4px 4px #5e6c6b;

  /* bounding box */
  margin: 5px;
  border: 5px solid transparent;
  padding: 5px;
}

/* pins container */
.pins {
  /* flexbox things */
  display: flex;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;

  /* container dimensions */
  height: 80px;
  max-width: 100px;

  /* font stuff */
  font-size: 0;

  /* bounding box */
  margin: 6px;
  border: 5px solid #666666;
  border-radius: 15px;
  padding: 5px;
  background: #a4afac;
}

.pins.end {
  border: none;
  background: none;
}

.pins .socket {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 1px;
  background-color: grey;
  border-radius: 50%;
}

.socket.hit {
  background-color: black;
  border-radius: 50%;
  animation: bounce 0.4s;
}

.socket.pass {
  background-color: white;
  border-radius: 50%;
  animation: bounce 0.4s;
}

/* guess container */
.guess {
  display: block;
  width: 50px;
  height: 50px;
  margin: 5px;

  /* box stuff */
  background-color: #a4afac;
  border-radius: 15px;

  /* font stuff */
  font-size: 0;
}

.guess .socket {
  display: block;
  width: 50px;
  height: 50px;
  margin: 5px;

  /* hide text */
  font-size: 0px;
  border-radius: 50%;
  background-color: grey;
}

.guess,
.answer {
  /* flexbox */
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;

  /* box dimensions */
  height: 250px;

  /* bounding box */
  margin: 5px;
  border: 5px solid #666666;
  padding: 5px;

  /* hide text */
  font-size: 0;
}

.answer {
  align-self: center;
  border-left: 5px solid #666666;
  border-radius: 10px;
  background: #a4afac;
}

.answer-socket {
  display: block;
  width: 50px;
  height: 50px;
  background-color: grey;
  margin: 5px;
  border-radius: 50%;

  /* hide text */
  font-size: 40px;
  text-align: center;
  text-justify: center;
}

.socket.peg {
  animation: bounce 0.5s;
}

@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0px);
  }
  40% {
    -webkit-transform: translateY(-20px);
  }
  60% {
    -webkit-transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

/* option container */
.selector {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  flex: 1;

  /* box dimensions */
  height: 70px;

  /* bounding box */
  margin: 1px;
  border: 5px solid transparent;
  padding: 5px;
}

#options.container {
  display: flex;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}

.options-descriptor {
  /* flexbox */
  display: flex;

  /* bounding box */
  margin: 5px;

  padding: 5px;
}

.option {
  display: flex;
  align-items: flex-start;
}

button {
  /* dimensions */
  border-radius: 50%;
  height: 50px;
  width: 50px;
  background-color: fuchsia;
  color: transparent;
  margin: 3px;
}

#delete {
  background-color: grey;
  color: black;
}

#submit {
  background-color: lime;
  color: black;
}

#surrender {
  background-color: blue;
  color: black;
}

/* colours are here */
.socket.blue,
.blue {
  background-color: #4285f4;
}
.socket.red,
.red {
  background-color: #e22d2d;
}
.socket.yellow,
.yellow {
  background-color: #f4b400;
}
.socket.green,
.green {
  background-color: #0f8d58;
}
.socket.purple,
.purple {
  background-color: #720e9e;
}
.socket.brown,
.brown {
  background-color: #5d4037;
}
.socket.pink,
.pink {
  background-color: #ee0290;
}
.socket.orange,
.orange {
  background-color: #ff9e22;
}

/* media query */
/* @media only screen and (max-width: 900px) {
  .rounds-container,
  .pins-container,
  .guess-container,
  .options-container {
    flex-direction: column;
  }
} */