* {
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  overflow: hidden;
  font-family: "Righteous", cursive;
  background-blend-mode: multiply;
  background: radial-gradient(circle at 8% 5%, rgba(225, 240, 240, 0.8), rgba(200, 225, 225, 0.8), rgba(70, 120, 120, 0.8), transparent), radial-gradient(circle at 70% 90%, rgba(225, 240, 240, 0.8), rgba(200, 225, 225, 0.8), rgba(60, 110, 110, 0.8), transparent), linear-gradient(122deg, rgba(100, 170, 170, 0.8), rgba(200, 225, 225, 0.8), rgba(180, 210, 210, 0.8), rgba(160, 190, 190, 0.8), rgba(140, 170, 170, 0.8), rgba(120, 150, 150, 0.8));
}

header {
  height: 15%;
  font-size: 2.5rem;
  font-family: "Dangrek", serif;
  color: #fff;
  span {
    color: wheat;
  }
  .controls {
    font-size: 1.8rem;
  }
}
main {
  height: 85%;
}

.primary-row {
  height: 40%;
}
.primary-row div {
  height: 100%;
  padding: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  cursor: pointer;
}
.secondary-row {
  height: 40%;
  margin-top: 3%;
}
.counter {
  height: 100%;
  padding: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 10px;
}
.result {
  height: 10%;
  margin-top: 2%;
  font-size: 1.5rem;
  color: #fff;
}

.start-page,
.upload-images-page {
  width: 60vw;
  padding: 2rem;
  border-radius: 10px;
  background-color: #fff;
  color: #5f5f5f;
  border: 2px solid currentColor;
  font-size: 1.3rem;
}
.btn {
  padding: 0.2rem 2rem;
  outline: none;
  border: none;
  padding: 0.3rem 1rem;
  background-color: #074b4bcc;
  color: #fff;
  border-radius: 10px;
}
input {
  color: red;
}

.selected {
  color: #00ccff;
}
.btn:hover {
  color: #fff;
}