/* main home page */


/* styling for body */
body {
  background-image: url("/IMG_bggg.png");
  background-repeat: repeat;
}

/* parent container */
.container {
 display: grid; 
 grid-template-areas:
 "header header"
 "menu content";
 grid-template-columns: 1fr 3fr;
 gap: 10px;
 background-color: black;
 padding: 20px;
}

/* basic styling for the child containers */
.container div {
  background-color: white;
  padding: 10px;
}

/* defines the header */
.container .header {
  grid-area: header;
  height: 30vh;
}

/* defines the menu */
.container .menu {
  grid-area: menu;
}

/* defines the main content area */
.container .content {
  grid-area: content;
  height: 125vh;
}

/* flexbox that nests inside the main content area */
.inner {
  display: flex;
  background-color: black;
}

/* styles the flexbox children */
.inner .one {
  background-color: black;
  margin: 10px;
  padding: 10px;
  height: 40vh;
  width: 100%;
  color: white;
  
}

/* styles the slightly smaller flexbox child */
.inner .two {
  background-color: black;
  margin: 10px;
  padding: 5px;
  height: 20vh;
  width: 100%;
  color: white
}

/* styles the footer */
footer {
 position: fixed;
 text-align: center;
 left: 0;
 bottom: 0;
 width: 100%;
 background-color: black;
 color: white;
}


/* flexbox for menu items */
.menu-items {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: DodgerBlue;
  height: 95%;
}

/* styles menu flexbox children */
.menu-items div {
  background-color: black;
  width: 80%;
  margin: 10px;
  padding: 10px;
  text-align: center;
  flex-basis: 20%;
  color: white;
}

/* makes the second child slightly taller than the first */
.menu-items div:nth-of-type(2) {
  flex-basis: 40%;
}

/* little rotated div near the bottom idk what to call it 😭 */
.thingy {
 position: absolute; 
 bottom: -700px;
 right: 50px;
 background-color: black;
 color: white;
 width: 200px;
 height: 250px;
 padding: 10px;
 transform: rotate(15deg);
 overflow-x: clip;
 overflow-y: auto;
}

/* statuscafe widget */
#statuscafe {
    padding: .5em;
    background-color: transparent;
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}