:root {
  --main-radius: 5px;
  --main-padding: 5px;
}
html {
  scroll-behavior: smooth;
}

* {
  font-family: "Inter", sans-serif;
}

.container {
  display: grid;
  height: 50vh;
  grid-template-columns: 1fr 1fr 1fr ;
  grid-template-rows: 0.8fr 0.2fr;
  grid-template-areas:"content1 content2 content3"
  "footer footer footer";                    
  grid-gap: 0rem; 
  color: #e6e6e6;
  text-align: center;
}
h2, h3
{
  margin-top: 3vh;
}
ul
{
  text-align: center; 
  list-style-type:none;
  margin-left: 10px;
  line-height: 1.9;
}

#content10 {
  background: #363940;
  grid-area: content1;
}
#content10 a
{
    text-decoration: none;
    color: white;
}
#content10 a:hover
{
    
    color: yellow;
}
#content12 {
  background: #363940;
  grid-area: content2;
}
#content12 a:hover
{
    color: yellow;
}
#content12 a
{
    text-decoration: none;
    color: white;
}

#content13 {
  background: #363940;
  grid-area: content3;
}

.footer {
  background: #2d3035;
  grid-area: footer;
}




@media only screen and (max-width: 600px) {
  .container {

  height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 0.5fr ;
    grid-template-areas:
      "content1"
      "content2"
      "content3"
      "footer";
  }
  ul
  {
    margin-left: 10px;
    text-align: center;

  }
}