:root {
  --font-size-base: clamp(14px, 0.4vw + 1rem, 18px);
  --space: 1lh;
  --font-family-base: system-ui, "Segoe UI", Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans",  Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol","Noto Color Emoji";
  --bg-color: #18171f;
  --bg-brighter-color: #272438;
  --font-color:#a6a4ab;
  --font-brighter-color: #d2d1da;
  --icon-color:#5a5866;
  --border-color: #49484b5c;
  --btn-read-color: #41505c;
  --btn-read-brighter-color: #485d6d;
  --btn-unread-color: #2b3136;
  --btn-unread-brighter-color: #323a40;
  --btn-del-color: #38262c;
  --btn-del-brighter-color: #422c33;
}

.grid-column {
    display: grid;
    grid-auto-flow: column;
}

.grid-row {
    display: grid;
    grid-auto-flow: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
}

html {
  font-size: var(--font-size-base);
}

body {
    grid-template-columns: minmax(150px,1fr) minmax(350px,3fr);
}

body, button {
  font-family: var(--font-family-base);
  color: var(--font-color);

  background:
  radial-gradient(
      1200px 600px at 10% -10%,
      rgba(88, 101, 242, 0.05),
      transparent 40%
    ),
    radial-gradient(
      1000px 500px at 90% 10%,
      rgba(34, 211, 238, 0.02),
      transparent 45%
    ),
    linear-gradient(180deg, var(--bg-brighter-color), var(--bg-color));
    transition: all 0.1 ease;
}

button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}


h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  display: inline;
  font-size: clamp(2.2rem, 1.5vw + 1.5rem, 3.2rem);
  color: var(--font-brighter-color);
}

h2 {
  font-size: clamp(1.8rem, 1.2vw + 1.2rem, 2.6rem);
  color: var(--font-brighter-color);
  padding-bottom: 2rem;
}

h3 {
  font-size: clamp(1.5rem, 1vw + 1rem, 2.2rem);
}

h4 {
  font-size: clamp(1.3rem, 0.8vw + 0.9rem, 1.8rem);
}

h5 {
  margin-left: 10px;
  font-size: clamp(1.1rem, 0.5vw + 0.8rem, 1.4rem);
}

h6 {
  font-size: clamp(1rem, 0.3vw + 0.75rem, 1.2rem);
}

p {
  font-size: 1rem;
  max-width: 70ch;
}

article {
  max-width: 70ch;
}

aside {
  padding: 10%;
  gap: 0.5rem;
  border-right: 1px solid var(--border-color);
}

aside header {
  padding-bottom: 10%;
  border-bottom: 1px solid var(--border-color);;
}

aside p, button {
    text-align: left;
    padding: 1rem;
    border-radius: 5px;
    background: none;
}

i {
  color: var(--icon-color);
  opacity: 1;
}

button:hover {
  color: var(--font-brighter-color);
}

button:active {
  transform: scale(0.98);
}

aside button:hover, aside button.clicked,
aside button:hover i, aside button.clicked i {
  color: var(--font-brighter-color);
  background-color: var(--bg-brighter-color);
}

button,
button i {
  transition: all 0.1s ease;
}

main{
  padding: 2rem 4rem;
  gap: 2rem;
}

.credit {
  align-self:center;
}

.focus {
  border: 1px solid #1a82f2bf;
}

.invalid {
  border: 1px solid rgb(255, 0, 0,0.5);
}

.valid {
  border: 1px solid rgb(0, 255, 0, 0.5)
}

.error {
  color: red;
}