main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: sans-serif;
}

main > section {
  width: 100%;
}

/*#region section1*/
#s1 > button {
  width: 12rem;
  padding: 0.5rem 1rem;
  font-weight: 700;
  cursor: pointer;
  color: #f9f9fb;
  background-color: #f13c20;
  border-radius: 0.25rem;
  position: relative;
  box-sizing: border-box;
  border: 2px solid #f9f9fb;
  text-shadow: #36454f 1px 1px 1px, #36454f -1px -1px 1px, #36454f 1px -1px 1px, #36454f -1px 1px 1px, #36454f 0 1px 1px, #36454f 0 -1px 1px, #36454f 1px 0 1px, #36454f -1px 0 1px;
}

#s1 > button::before {
  content: "";
  position: absolute;
  inset: -4px;
  background: repeating-linear-gradient(35deg, #f13c20 0, #36454f 19px, #f9f9fb 20px, #f9f9fb 24px, #f13c20 25px);
  border: 2px solid #36454f;
  border-radius: 0.35rem;
  z-index: -1;
  box-sizing: border-box;
}
/* #endregion */

/*#region section2*/
#s2 {
  --clr-black: #111;
  --clr-primary: #ff6e40;
  --clr-secondary: #1e847f;
}

#s2 button {
  margin: 0;
  width: 12rem;
  padding: 0.5rem 1rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  border-radius: 0.125rem;
  border: 2px solid var(--clr-black);
  color: var(--clr-primary);
}

#s2 button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  left: 0.15rem;
  top: 0.15rem;
  z-index: -1;
  background: var(--clr-secondary);
  border-radius: 0.125rem;
  border: 2px solid var(--clr-black);
  transition: top 0.25s, left 0.25s, border 0.1s 0.1s;
}

#s2 button:hover::before {
  inset: 0;
  border-width: 0;
}

#s2 .options {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#s2 .options button {
  border: 2px solid var(--clr-black);
  color: var(--clr-black);
  transition: all 0.25s;
}

#s2 .options button:hover {
  background-color: var(--clr-secondary);
  color: #fff;
}
/* #endregion */

/* #region section3 */
#s3 {
  --clr-bg-darker: hsl(240, 35%, 80%);
  --clr-bg-dark: hsl(240, 35%, 85%);
  --clr-bg: hsl(240, 35%, 96%);
  --clr-fg: hsl(240, 35%, 97%);
  --clr-highlight: #0cd4d1;

  height: 100%;
}

#s3 form {
  width: 16rem;
  border: 2px solid var(--clr-bg-dark);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  background: var(--clr-bg);
  border-radius: 0.25rem;
}

#s3 form * {
  border: none;
}

#s3 fieldset {
  margin: 0;
  padding: 0;
  width: 12rem;
  gap: 0.5rem;
  justify-content: center;
  background: none;
  display: flex;
  gap: 1rem;
}

#s3 fieldset button {
  border-radius: 50%;
  height: 2rem;
  width: 2rem;
  padding: 0.5rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

#s3 button {
  margin: 0;
  cursor: pointer;
  position: relative;
  font-weight: 700;
  color: var(--clr-bg-darker);
  background-color: var(--clr-fg);
  border-radius: 0.25rem;
  box-shadow: 
    0.125rem 0.125rem 0.25rem var(--clr-bg-dark),
    -0.125rem -0.125rem 0.25rem #fff
  ;

  transition: all 0.2s;
}

#s3 button:hover {
  color: var(--clr-highlight);
}

#s3 form > button {
  width: 12rem;
  padding: 0.5rem 1rem;
}

#s3 button:active {
  color: var(--clr-bg-darker);
  box-shadow:
    inset 0.125rem 0.125rem 0.1rem var(--clr-bg-dark),
    inset -0.125rem -0.125rem 0.1rem #fff
  ;
}
/* #endregion */

/* #region section4 */
/* #endregion */

/* #region section5 */
#s5 {
  color: #36454fee;
  font-size: 0.85rem;
}

#s5 .container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid #36454f;
  width: 12.5rem;
  padding: 0.5rem;
}

#s5 [draggable] {
  cursor: move;
  border: 1px solid #36454f;
  width: 12rem;
  padding: 0.25rem;
  border-radius: 0.125rem;
  user-select: none;
  transition: border 0.1s, opacity 0.1s;
}

#s5 [draggable].over {
  border-style: dotted;
}
/* #endregion */