@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

.site-wrapper {
    display: grid;
    min-height: 100vh;

    grid-template-rows: auto 1fr auto;
    grid-template-columns: 180px 3fr;

    grid-template-areas:
        "header header"
        "sidebar main"
        "sidebar footer";
}

.site-header {
    grid-area: header;
    background: #008cdd;
    color: white;
    padding: 20px;
}

.main-content {
    grid-area: main;
    background: #e4d8c2;
    padding: 20px;
    font-size: larger;
}

.sidebar {
    grid-area: sidebar;
    background: #ffd261;
    padding: 20px;

    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    font-size: 200%;
}

.site-footer {
    grid-area: footer;
    background: #0012d6;
    color: white;
    padding: 20px;
}

.section {
    background: #9dc597;
    padding: 20px;
    margin: 20px;
}


.imagesmooth {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 8px;
  image-rendering: auto;
}

.imagerough {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .site-wrapper {
        grid-template-columns: 1fr; 
        
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "footer";
    }
}