@font-face {
  font-family: DePixelBreit;
  src: url("/font/DePixelBreit.ttf");
}

body {
  background: url("/img/home/home_bg.jpg");
  background-size: cover;
  background-position: center bottom;
}

.window {
  font-family: DePixelBreit;
  
  border: 2px solid #662d91;
  border-radius: 5px;
  
  background: url("/img/home/window_bg.png");
  
  color: white;
  text-shadow: 3px 3px 3px black;
  
  box-shadow: 0px 0px 10px #452c63 inset;
  
  font-size: 14px;
  word-wrap: break-word;
}

.window--spaced {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.window--relative {
  position: relative;
}

.window--web-title {
  background: url("/img/home/web_header.jpg");
  background-size: cover;
  background-position: center bottom;
  
  box-shadow: 0px 0px 10px black inset;
  
  text-align: center;
}

.window--web-title__header {
  font-size: 25px;
}

.window--web-title__subheader {
  font-size: 15px;
}

.window-nav {
  max-width: 100%;
  padding: 1rem;
  border-top: 2px solid #662d91;
  
  display: flex;
  justify-content: space-evenly;
}

.window__header {
  background: #662D91;
  background: linear-gradient(270deg,rgba(102, 45, 145, 1) 0%, rgba(192, 100, 204, 1) 50%, rgba(102, 45, 145, 1) 100%);
    
  max-width: 100%;
  padding: 1rem;
  
  font-size: 30px;
  
  position: relative;
}

.window__content {
  padding: 1rem;
  vertical-align: middle;
}

.window__blinkie {
  width: 14rem;
  height: 2rem;
  
  image-rendering: pixelated;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex--column {
  flex-direction: column;
}

.pixel-baby {
  transform: scale(5, 5);
  position: absolute;
  image-rendering: pixelated;
  bottom: calc((16px * 5px) / 2px - 8px);
}

.pixel-baby--crowley {
  left: 85%;
}

.pixel-baby--pyangu {
  left: 60%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(8, 8fr);
  
  max-width: 100%;
  gap: 2em;
  
  margin-top: 2em;
  margin-bottom: 2em;
}

.grid--home {
  grid-template-rows: repeat(3, 3fr);
  
  grid-template-areas:
  'aside-1 aside-1 main main main main aside-2 aside-2'
  'aside-1 aside-1 main main main main aside-2 aside-2'
  'aside-3 aside-3 main main main main aside-4 aside-4'
}

.home-aside-1 {
  grid-area: aside-1;
}

.home-aside-2 {
  grid-area: aside-2;
}

.home-main {
  grid-area: main;
}

.home-aside-3 {
  grid-area: aside-3;
}

.home-aside-4 {
  grid-area: aside-4;
}