/**
  * the personal, fun, and retro-themed website of the Luminous Collective ☀️
  * special thanks to kiki & ayano at https://virtualobserver.moe/ for the layout inspiration!
  *i
  * do we have plenty of Professonal Front-End Web Development experience? yes.
  * are we still going to do this whole everything the wrong way? yes!
  * we're going to try to maximize compatibility with older browsers, to fit the 90s/00s theme of this site.
  * please don't judge us too harshly; I promise we write much better code in our day job! :)
  * 
**/

* {
  box-sizing: border-box;
}

body {
  background-color: white;
  color: black;
  font-family: Verdana;
  margin: 0;
}

div.outer {
  width: 100vw;
  height: 100vh;
}

div.inner-col {
  float: left;
  padding: 10px;
  height: 100%;
}

/* clear floats */
div.outer:after {
  content: "";
  display: table;
  clear: both;
}

/* column bases & responsive layout */
div.ava-side {
  width: 45%;
}

div.middle-col {
  width: 10%;
}

div.emma-side {
  width: 45%;
}

/* mobile layout */
@media screen and (max-width: 640px) {
  /* stack columns to make better use of the limited space */
  div.inner-col {
    width: 100%;
  }

  div.ava-side {
    height: 45%;
  }

  div.middle-col {
    height: 10%;
  }

  div.emma-side {
    height: 45%;
  }
}

/* Ava */
div.ava-side {
  background-color: #e2affa;
}

/* Emma */
div.emma-side {
  background-color: #c94aff;
}