:root {
    --stroke-color: #7e48e9;
}

@font-face {
    font-family: Fairfax;
    src: url(assets/fonts/FairfaxHD.ttf);
}
@font-face {
    font-family: nanpa;
    src: url(assets/fonts/nasin-nanpa-4.0.2-UCSUR.otf);
}
@font-face {
    font-family: Fredoka;
    src: url(assets/fonts/Fredoka-VariableFont_wdth\,wght.ttf), url(assets/fonts/nasin-nanpa-4.0.2-UCSUR.otf);
    font-weight: 600;
}
@font-face {
    font-family: Nunito;
    src: url(assets/fonts/Nunito-VariableFont_wght.ttf), url(assets/fonts/nasin-nanpa-4.0.2-UCSUR.otf);
    font-weight: 700;
}

body {
    background-color: #354174;
    color: #eee;
    font-family: Fairfax, sans-serif;
    min-height: 100vh;
    overflow-y: auto;
    margin: 0;
    margin-top:100px;
    padding: 0;
}

main {
    font-family: Nunito;
    max-width: 900px;
    background-color: #986ed7;
    margin: 25px auto;
    border-radius: 32px;
    padding: 15px 25px;
}

#hero {
    margin: 12px auto 12px;
    width: 100%;
    text-align: center;
}

.row {
    display: flex;
    font-size: 20px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-family: "nanpa", sans-serif;
}

#hero h1 {
    font-size: 96px;
    font-weight: 700;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 20px;
}

.subtitle {
    font-size: 32px;
    text-align: center;
    color: #ccc;
    text-shadow:
        1px 1px 0 var(--stroke-color),
        -1px -1px 0 var(--stroke-color),
        1px -1px 0 var(--stroke-color),
        -1px 1px 0 var(--stroke-color);
    margin: 8px 0 0;
    font-family: Fredoka, sans-serif;
}
.unusedsubtitle {
    text-shadow: none;
}
.subsubtitle {
    font-size: 24px;
    text-align: center;
    color: #bbb;
    margin: 8px 0 0;
}
.paragraph {
    font-size: 24px;
    color: #eee
}

ul {
    font-size: 24px;
}

.subpagecontainer {
    max-width: 900px;
    margin: auto;
    justify-content: center;
}

.subpage {
    border-radius: 12px;
    color:#eee;
    background: #bc8fff;
    padding: 24px 32px;
    margin: 12px 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-block;
    width: 366px;
    vertical-align: top;
}
.subpage:hover {
  /* transform: scale(1.04) rotate(-2deg); */
  box-shadow: 0 2px 32px 0 #aa7fff, 0 4px 16px 0 rgba(154, 80, 137, 0.06);

  /* z-index: 10; */
}
/* TODO: find out how the fuck to center `subpage`s on thin screens */
/* @media screen and (max-width: 500px) {
  .subpage {
    justify-content: center;
    display: block;
    width: 100%;
  }
} */

.unusedsubpage {
    background:#383838
}
.unusedsubpage:hover {
    box-shadow: 0 0px 0px;
}
/* .link { 
    font-size: 20px;
    text-align: center;
    color: white;
    text-decoration: none;
    font-family: "Nunito", "nanpa", sans-serif;
}
.link:hover {
  /* transform: scale(1.04) rotate(-2deg); */
  /* box-shadow: 0 2px 32px 0 #986ed7, 0 4px 16px 0 rgba(154, 80, 137, 0.06); */

  /* z-index: 10; */
/* } */