main.css

@import './base.css';

:root {
    --lightest: aqua;
    --lighter: #768d90;
    --lighttext: #b3ced1;
    --light: lightseagreen;
    --dark: #134946;
    --darker: #1f2c2c;
    --darkest: #181818;
}

#app {
  /*max-width: 1280px;*/
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
  width: 100%;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: flex-start;
  }

  #app {
    display: block;
    /*grid-template-columns: 1fr 1fr;*/
    padding: 0 2rem;
  }
}

.grow {
  height: 40px;
  width: 130px;
  color: var(--light);
    border-style: solid;
  background-color: var(--darkest);
  font-weight: bold;
  border-color: var(--dark);
}

.grow:hover{
  background-color: var(--dark);
  color: var(--lightest);
  border-color: var(--light);
    cursor: pointer;
}

.grow:active {
  border-color: var(--light);
  background-color: var(--darkest);
  color: var(--light);
}