/* HTML ELEMENTS */
body {
  margin: 0; 
  background-color: darkblue;
  color: black;
  font-family: simsun, Verdana;
  text-align: center; 
  display: grid; 
  grid-template-rows: auto auto; 
  grid-template-columns: 1fr 2fr 1fr; 
  gap: 3vh;
  padding: 3%; 
  box-shadow: inset 0 0 5rem rgb(200, 200, 254);
}

header {
  grid-area: 1 / 2; 
}

aside {
  grid-area: 2 / 1; 
}

main {
  grid-area: 2 / 2;
}

nav {
  grid-area: 2 / 3; 
}

h1 {
  margin: 0; 
  font-size: 2.5rem;
}

h3 {
  font-size: 1.5rem;
  margin: 0; 
  margin-top: 1rem;
}

a:link {
  color: hotpink; 
}

a:visited {
  color: darkblue; 
}

a:hover {
  font-weight: bold; 
}

/* DIV CLASSES */
.section {
  border: 3px solid hotpink; 
  background-color: rgb(250, 240, 240); 
  border-radius: 10px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-items: center; 
  padding: 2vh; 
  box-shadow: 1em 1em 2em rgb(250, 240, 240), 0 0 2rem hotpink;
}

.content-div {
  width: 100%; 
  text-align: left; 
}

/* CONTENT STYLING */
#updates-div {
  border: 1px solid black; 

  & ul {
    list-style-type: none; 
    padding: 0;  
  }

}

#microblog-container {
  width: 290px;
  height: 250px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* scale the iframe to ~3.3x within the container */
#microblog-container > iframe {
  width: 1000px;
  height: 830px;
  position: absolute;
  transform-origin: center;
}

/* IMAGE ASSETS */ 
#treble-cat {
  position: absolute; 
  height: 8vw; 
  left: 18%;
  top: 13%;
  rotate: -10deg;
}