@import url("https://fonts.googleapis.com/css2?family=Oregano&family=Passero+One&family=Wellfleet&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bangers&display=swap");

:root {
  --bg-clr-1: #353333;
  --bg-clr-2: #35363a;
  --bg-clr-3: #f1f5f8;
  --bg-clr-4: #1a1a1d;
  --bg-clr-5: #fccc47;
  --bg-clr-6: #ee5743;
  --bg-clr-7: hsl(210, 50%, 14%);
  --bg-clr-8: #4b145b;
  --shadow-cyan-1: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px cyan;
  --shadow-cyan-2: 0 0 5px #fff, 0 0 10px cyan, 0 0 20px cyan;
  --shadow-cyan-3: 0 0 20px cyan, 0 0 30px cyan;
  --shadow-red-1: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px red, 0 0 30px red;
  --shadow-red-2: 0 0 20px red, 0 0 30px red;
}

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

body {
  background-color: var(--bg-clr-3);
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
h1 {
  text-align: center;
  margin: 30px;
  font-size: 50px;
  font-family: Wellfleet;
}

.the-box {
  height: 45vw;
  width: 45vw;
  max-height: 400px;
  max-width: 400px;
  margin: 30px auto;
  position: relative;
}

.the-box::before {
  content: "";
  position: absolute;
  top: -15px;
  bottom: -15px;
  right: -15px;
  left: -15px;
  background-color: #ffffff;
  z-index: -1;
}

.the-box::after {
  content: "";
  position: absolute;
  top: -15px;
  bottom: -15px;
  right: -15px;
  left: -15px;
  background-color: #ffffff;
  z-index: -2;
}

.the-box::before,
.the-box::after {
  background: linear-gradient(
    45deg,
    var(--bg-clr-6) 0 50%,
    var(--bg-clr-1) 50% 100%
  );
}

.the-tiny > * {
  height: 100%;
  background-color: #ffffff;
  transition: all 0.5s;
}
.the-tiny {
  display: grid;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: white;
}
button {
  font-family: Bangers;
  font-size: large;
  background: var(--bg-clr-9);
  border: none;
  padding: 5px;
}
button:hover {
  cursor: pointer;
}
.buttons {
  text-align: center;
}
#input-color {
  border: none;
  height: 25px;
  width: 25px;
  margin-left: 4px;
}
input:focus {
  outline: none;
}
button:focus {
  outline: none;
  text-shadow: 0 0 5px black, 0 0 10px black, 0 0 15px black;
  color: var(--bg-clr-6);
}
.grid-options {
  display: flex;
  justify-content: space-between;
}
.size-container {
  width: 25vw;
}
.size-container p {
  font-family: Passero One;
  font-size: 18px;
  text-align: center;
}
.slider {
  -webkit-appearance: none;
  background: var(--bg-clr-1);
  width: 100%;
  height: 20px;
  border-radius: 10px;
  transition: 2.9s;
  margin-left: 4px;
  margin-top: 4px;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  background: var(--bg-clr-6);
  border-radius: 50%;
  cursor: pointer;
}
