/*https://www.youtube.com/watch?v=68O6eOGAGqA*/
:root{
  --main-radius:10px;
  /*--main-padding:5px;*/
}
#container{
  display:grid;
  height: 100vh;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 2.2fr 0.1fr 3.2fr 3.2fr 0.3fr;
  grid-template-areas:
  "header header header"
  "navigation navigation navigation"
  "leftsidebar slideshow rightsidebar"
  "content content content"
  "footer footer footer";
  grid-gap: 0.2rem;
font font-family: "inter", sans-Serif;
font-style: italic, bold;
text-align:center;

}
#header{
  background-color:#ffe6e6;
grid-area:header;
border-radius: var(--main-radius);
/*padding-top: var( --main-padding);*/
}
#navigation{
  background-color:#ffe6e6;
  grid-area: navigation;
  border-radius: var(--main-radius);
  /*padding-top: var( --main-padding);*/
}

#leftsidebar{

  background-color:#ffffe6;
  grid-area: leftsidebar;
  border-radius: var(--main-radius);
  /*padding-top: var( --main-padding);*/
}
#rightsidebar{
  background-color:white;
grid-area: rightsidebar;
border-radius: var(--main-radius);
/*padding-top: var( --main-padding);*/
}
#slideshow{
  background-color:pink;
grid-area: slideshow;
border-radius: var(--main-radius);
/*padding-top: var( --main-padding);*/
}
#content{

  grid-area: content;
  background-color: #ffcccc;
  border-radius: var(--main-radius);
  /*padding-top: var( --main-padding);*/
}
#footer{
  background-color:#d9d9d9;
  grid-area: footer;
  border-radius: var(--main-radius);
  /*padding-top: var( --main-padding);*/
}
@media only screen and (max-width: 600px) {
  #container{
    grid-template-columns: 1fr;
    grid-template-rows: 2.4fr 0.6fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
    grid-template-areas:
    "header"
    "navigation"
    "leftsidebar"
    "slideshow"
    "content"
    "rightsidebar"
    "footer"
  }
}