* {
    box-sizing: border-box;
    margin: 0;
}

body {
    background-image:linear-gradient(to bottom right, green, lime);
}

@media only screen and (min-width: 600px) {
.container {
    display:grid;
    grid-template-columns:25%;
    grid-template-rows: auto;
    grid-template-areas:
    "navbar navbar navbar navbar"
    "head head head head"
    "menus explain explain explain"
    "feed feed feed feed"
    "footer footer footer footer";
    gap:5px;
}
}

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

.container > div {
    background-image:linear-gradient(to bottom right, green, darkgreen);
    padding:5px;
    border: 2px solid darkolivegreen;
    border-radius:5px;
}

@media only screen and (min-width:600px){
.container > div.navbar {
    grid-area:navbar;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    padding:none;
}
}

@media only screen and (max-width:600px){
.container > div.navbar {
    grid-area:navbar;
    display:grid;
    grid-template-rows:1fr 1fr 1fr;
    padding:none;
}
}

.container > div.navbar > div {
    font-size:50px;
    color:white;
    padding:none;
    border:white solid 2px;
    text-align:center;
    background-image:linear-gradient(to bottom right, #164a24, #0f2114)
}

.container > div.navbar > div:hover {
    color:blanchedalmond;
}


@media only screen and (min-width:600px){
.container > div.head {
    grid-area:head;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    text-align:center;
}
}

@media only screen and (max-width:600px){
    .container > div.head {
    grid-area:head;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:white;
    text-align:center;
}
}

.container > div.menus {
    grid-area:menus;
    color:white;
    text-align:center;
}

.container > div.explain {
    grid-area:explain;
}

.container > div.footer {
    color:white;
    grid-area:footer;
}

@media only screen and (min-width:600px){
.container > div.feed {
    grid-area:feed;
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
}
}

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

h1 {
    background:radial-gradient(lightgrey, white);
    background-clip:text;
    color:transparent;
    font-size:100px;
}

h2 {
    text-decoration:underline;
    font-size:40px;
}

h3:hover {
    color:blanchedalmond;
}

h4 {
    color:white;
    font-size:20px;
}

h5 {
    text-align:center;
    font-size:25px;
}

.pfp {
    width:100px;
    height:100px;
    border-radius:50%;
    opacity:50%;
}

.pfp:hover{
    opacity:80%;
}

a {
    text-decoration:none;
    color:inherit;
}

/* Dropdown Button */
.dropdownProducts {
  background-color:transparent;
  color: white;
  font-size: 50px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.products {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdownContents {
  display: none;
  position: absolute;
  background-color:#c3ebd5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdownContents a {
  color: darkgreen;
  padding: 8px 10px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdownContents a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.products:hover .dropdownContents {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.products:hover .dropdownProducts {color:blanchedalmond;}

.material-icons {
    font-size:40px;
}