/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
    padding: 0;
  }
  body {
    -webkit-font-smoothing: antialiased;
  }
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  input, button, textarea, select {
    font: inherit;
  }
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  #root, #__next {
    isolation: isolate;
  }

body {
  background-image: linear-gradient(
  90deg,
  hsl(240deg 100% 71%) 0%,
  hsl(236deg 96% 73%) 10%,
  hsl(232deg 91% 75%) 20%,
  hsl(228deg 87% 76%) 30%,
  hsl(224deg 82% 78%) 40%,
  hsl(220deg 76% 80%) 50%,
  hsl(216deg 71% 82%) 60%,
  hsl(212deg 67% 84%) 70%,
  hsl(209deg 63% 86%) 80%,
  hsl(204deg 57% 88%) 90%,
  hsl(200deg 53% 90%) 100%
);
  font-family: "Press Start 2P", system-ui;
}

.container {
    height: 100vh;
    width: 85%;
    min-width: 1000px;
    max-width: 1200px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.title {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}


.main {
  display: flex;
  align-items: center;
  gap: 2rem;

  margin-bottom: 1.25rem;
}


.btn {
  user-select: none;
  font-size: 1.25rem;
  padding: 0.75em 1em;
  background-color: #ffffff;
  border: 4px solid;
  border-color: #ccc #ccc #000 #000;
  transition: background-color 0.15s ease, border-color 0.2s ease, transform 0.1s ease;
}

.btn:hover {
  border-color: #000 #ccc #ccc #000;
}

.btn:active {
  background-color:  #dbdbdb;
  transform: translateY(2px);
}

.buttonBox {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.chooseColor,
.chooseReset {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.colorBlackBtn {
  background-color: #000;
  color: #fff;
}

.colorBlackBtn:is(:hover, :active) {
  background-color:  #000;
}

.colorRandomBtn {
  background-image: linear-gradient(
  90deg,
  hsl(0deg 72% 48%) 0%,
  hsl(25deg 83% 49%) 10%,
  hsl(50deg 94% 50%) 20%,
  hsl(98deg 100% 50%) 30%,
  hsl(168deg 100% 50%) 40%,
  hsl(238deg 100% 50%) 50%,
  hsl(300deg 100% 50%) 60%,
  hsl(1deg 100% 50%) 70%,
  hsl(48deg 100% 50%) 80%,
  hsl(79deg 100% 50%) 90%,
  hsl(110deg 100% 50%) 100%
  );
  color: #fff;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.colorBtn-active {
  border-color: #000 #ccc #ccc #000;
}

.eraserBtn-active {
  background-color: #dbdbdb;
  border-color: #000 #ccc #ccc #000;
}


.frame {
  padding: 1rem;
  background-image: linear-gradient(
    40deg,
    hsl(0deg 72% 48%) 0%,
    hsl(25deg 83% 49%) 10%,
    hsl(50deg 94% 50%) 20%,
    hsl(98deg 100% 50%) 30%,
    hsl(168deg 100% 50%) 40%,
    hsl(238deg 100% 50%) 50%,
    hsl(300deg 100% 50%) 60%,
    hsl(1deg 100% 50%) 70%,
    hsl(48deg 100% 50%) 80%,
    hsl(79deg 100% 50%) 90%,
    hsl(110deg 100% 50%) 100%
  );
  border: 2px solid black;
}

.drawingPad {
    width: 520px;
    height: 520px;
    border: 3px solid rgb(255, 0, 0);

    background-color: white;

    display: flex;
    flex-wrap: wrap;
}


.githubProfile {
  cursor: pointer;
  color: black;
}

.githubProfile:is(:hover, :active) {
  color: blue;
  text-decoration: none;
}