* {
  box-sizing: border-box;
  font-family: "Hiragino kaku gothic pro", Menlo, Lucida Console,
    Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New,
    monospace;
}

html,
body {
  font-family: Geneva, Verdana, Tahomj sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: rgb(255, 255, 255);
  text-align: center;
  line-height: 1.5rem;
}

input {
  padding: 1px;
  border: 0;
  box-shadow: 0px 0px 4px rgb(167, 167, 167);
  border-radius: 5px;
  text-align: center;
}

input[type="radio"] {
  background-color: #fbfbfb;
  box-shadow: none;
}

select {
  padding: 1px;
  border: 0;
  box-shadow: 0px 0px 4px rgb(167, 167, 167);
  border-radius: 5px;
}

h3 {
  margin: 0;
  padding-bottom: 10px;
  text-align: center;
}

.main-body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-items: center;
  gap: 1em;
}

.main-background {
  border: 1px solid rgb(95, 83, 83);
  border-radius: 4px;
  padding: 0.2em 0.8em;
  box-shadow: 2px 1px 3px rgb(161, 160, 160);
  background-color: #fbfbfb;
  width: max-content;
}

.selection-display {
  border: 2px solid black;
  min-width: 95vw;
  min-height: 300px;
}

.single-row-wrapper {
  display: flex;
  flex-flow: row nowrap;
  max-width: 95vw;
  gap: 2%;
  padding: 2%;
}

.code-display-wrapper {
  display: grid;
  grid-template-columns: auto 4em;
  grid-template-rows: auto;
  align-items: center;
  justify-content: center;
}

.code-display {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8em;
}

.code-copy-button {
  height: 40px;
  cursor: pointer;
  border-radius: 5%;
  border: 2px outset rgb(95, 83, 83);
  box-shadow: 2px 1px 3px rgb(161, 160, 160);
}

.body-columns {
  display: grid;
  gap: 1em 0;
  width: min(95vw, 700px);
  grid-template-columns: calc(50% - 0.5em) calc(50% - 0.5em);
  grid-template-rows: min-content min-content min-content;
  align-items: center;
  justify-items: center;
}

.gradient-type {
  display: flex;
  flex-flow: column nowrap;
  grid-row: 2 / 3;
  justify-content: center;
  gap: 0.5em;
}

.linear-options {
  grid-column: 1 / span 2;
}

.radial-options {
  max-width: 95%;
  grid-column: 1 / span 2;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 1em 2em;
}

.radial-types:last-child {
  grid-column: 1 / span 2;
  display: flex;
  flex-flow: column;
}

.radial-types {
  display: flex;
  flex-direction: column;
}

.conic-options {
  max-width: 95%;
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.color-input {
  display: grid;
  width: 100%;
  gap: 1em 0;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  justify-items: start;
  align-self: start;
  padding-top: 1em;
}

.percentage-container {
  min-width: 50%;
  grid-column: 1 / 4;
  align-items: center;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
}

.color-input input {
  max-width: 6em;
}

.color-input > label:nth-child(n + 2):nth-child(-n + 4) {
  grid-row: 2 / 3;
  max-width: 90%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

.color-input > label:nth-child(2) {
  box-shadow: 2px 1px 3px rgb(255, 0, 0);
}

.color-input > label:nth-child(3) {
  box-shadow: 2px 1px 3px rgb(0, 255, 0);
}

.color-input > label:nth-child(4) {
  box-shadow: 2px 1px 3px rgb(0, 0, 255);
}

.color-input > label:nth-child(5) {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  display: flex;
  flex-flow: column nowrap;
  max-width: 95%;
  justify-content: center;
  align-items: center;
}

.color-input > label:nth-child(6) {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

.hide-display {
  display: none;
}

.color-list {
  width: 90%;
  min-height: fit-content;
  display: flex;
  flex-flow: column nowrap;
  gap: 1em;
  padding: 1em;
}

.add-color-button {
  width: 2em;
  height: 2em;
  background: conic-gradient(
    from 180deg at 110% -9%,
    rgba(73, 73, 73, 0.95) 0deg 2deg,
    rgba(95, 95, 95, 0.95) 7deg 9deg,
    rgba(73, 73, 73, 0.95) 33deg 43deg,
    rgba(133, 133, 133, 0.95) 45deg 51deg,
    rgba(106, 106, 106, 0.95) 73deg 88deg,
    rgba(255, 255, 255, 0.95) 91deg 158deg
  );
  border: 1px solid rgb(48, 48, 48);
  box-shadow: 2px 2px 5px black;
  color: #ffffff;
  padding: 5px 12px;
  text-align: center;
  text-decoration: none;
  text-shadow: -1px -1px 1px rgb(0, 0, 0);
  font-size: 2em;
  align-self: center;
  border-radius: 15%;
  cursor: pointer;
}

.add-color-button:hover {
  color: #00f921;
  transform: scale(103%);
}

.color {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: fit-content;
  padding: 2px;
  border: 2px solid black;
  border-radius: 0.5em;
  white-space: nowrap;
}

@media (max-width: 450px) {
  .color {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
  }
  .color-sample {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }

  .delete-color-button {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }

  .conic-display-element {
    grid-column: span 2;
  }

  .percent-display {
    grid-column: span 2;
  }
}

.selected-color {
  height: fit-content;
  border-width: 5px;
}

.color-sample {
  display: inline-block;
  background-color: #000000;
  height: 28px;
  width: 28px;
}

.delete-color-button {
  background-color: rgb(231, 0, 0);
  color: rgb(0, 0, 0);
  cursor: pointer;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}