/* from https://pin.it/KE8n3e4Vc */
:root {
    --ltest-colour: #e5ebf8;
    --lt-colour: #beffea;
    --mid-colour: #f4a4f5;
    --dk-colour: #9881ff;
    --dkest-colour: #a94ace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    background-image: url("media/backgrounds/stars\ 2.gif");
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
    color: var(--dkest-colour);
}

header, aside, main, footer {
    border: 5px dashed var(--dk-colour);
    padding: 25px;
    background-color: var(--ltest-colour);
}

hr {
    border-top: 5px dashed var(--mid-colour);
}

.container {
  display: grid;
  grid-template:
    "myHeader myHeader"
    "mySidebar myMainContent"
    "mySidebar myFooter"
    / 1fr 2fr;
  grid-gap: 10px;
  max-width: 960px;
  margin: auto;
}

header { grid-area: myHeader; }
aside { grid-area: mySidebar; }
main { grid-area: myMainContent; }
footer { grid-area: myFooter; }

@media (max-width: 800px) {
  .container {
    grid-template:
      "myHeader"
      "mySidebar"
      "myMainContent"
      "myFooter";
  }  
}

h1, h2, h3 {
    text-align: center;
    text-shadow: 5px 5px var(--mid-colour);
}

a {
    color: var(--dk-colour);
}

.btn {
    background-color: var(--dkest-colour);
    color: var(--ltest-colour);
    padding: 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border: 2px dashed var(--mid-colour);
    width: 100%;
    margin-bottom: 5px;
}

.btn:hover {
    background-color: var(--lt-colour);
    color: var(--dkest-colour);
}

.center {
    text-align: center;
}

img {
    margin-bottom: 5px;
}