:root {

  --border-radius: 3px;

}

​

:root,

[data-selected-theme="green"] {

  --color-background: #A4F3A2;

  --color-text: #034435;

  --color-accent: #00CC66;

}

​

[data-selected-theme="blue"] {

  --color-background: #55dde0;

  --color-text: #2B4150;

  --color-accent: #00D4E7;

}

​

[data-selected-theme="pink"] {

  --color-background: #DFB2F4;

  --color-text: #463546;

  --color-accent: #F06EFC;

}

​

[data-selected-theme="orange"] {

  --color-background: #FA7D61;

  --color-text: #1E1E24;

  --color-accent: #F3601C;

}

​

* {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

}

​

body {

  background-color: var(--color-background);

  background: radial-gradient(var(--color-background), var(--color-accent));

  background-size: 200%;

  color: var(--color-text);

  font-family: sans-serif;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

}

​

::selection {

  background-color: var(--color-accent);

}

​

.container {

  display: block;

  background-color: rgba(255, 255, 255, 0.35);

  padding: 3rem 4rem;

  border: 2px solid var(--color-text);

  box-shadow: 7px 6px 0 0 var(--color-text);

  border-radius: var(--border-radius);

  max-width: 90vw;

  transition: transform 0.35s;

}

​

h1 {

  text-align: center;

  font-size: 2.5rem;

  font-weight: 400;

}

​

p {

  text-align: center;

  max-width: 30rem;

  width: auto;

  margin-top: 1rem;

  font-size: clamp(1rem, 5vw, 1.312rem);

  line-height: 150%;

}

​

​

@media screen and (max-width: 500px) {

  .container {

    padding: 1rem;

  }

}