* {
  margin:0;
}
/* main stuff*/
.mainscroll {
    display: grid;
    justify-content: space-evenly;
    margin: 1.5% auto; 
    grid-auto-flow: column;
    width: 40%
}
/* the one with the blue background and dashed border */
.fancy {
    border: 4px dashed hsl(182, 30%, 50%);
}
/* everything with text */
.text {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 20px;
    color: hsl(0, 0%, 87.06%);
    background-color: hsl(188.7, 42.33%, 31.96%);
}
.banner {
    display: grid;
    margin: 1.5% auto;
    width: 40%
}
/* links */
.navigator {
    text-align: center;
    padding: 1% 0 1% 0;
    font-size: 25px;
}
a:link,
a:visited {
    color: hsl(31.76, 82.7%, 63.73%);
    text-decoration: none;
}
a:hover,
a:active {
    color: hsl(24.91, 79.1%, 86.86%);
}
/* blog part */
.container {
    grid-template-columns: 70% 0 30%;
    grid-template-rows: auto;
    grid-template-areas: 
    "main . sidebar"
    "footer footer footer";
}
.main {
    grid-area: main;
    margin: 0 3.3% 0 0;
    padding: 4%;
}
.sidebar {
    grid-area: sidebar;
    margin: 0 0 0 1%;
    padding: 9%;
}
.container2 {
    grid-template-columns: 100% 0;
    grid-template-rows: auto;
    grid-template-areas: 
    "nobar ."
    "footer footer footer";
}
.nobar {
    grid-area: nobar;
    margin: 0 3.3% 0 0;
    padding: 4%;
}