/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
	h1 {
	text-align: center; 
	color: yellow;
	} 
	
 body { 
    font-size: 18px;
    display: block;
    background: #000000 url('neocities bg.png');
    background-size: cover;
   -webkit-background-size: cover;
}

main {
    margin: auto;
    width: 100%;
}

.edge {
    margin: 48px auto;
    border: 22px solid;
    border-color: #90315D #E473B3 #C05BA8 #510A1C;
    border-radius: 6px;
    width: 800px;
    height: 500px;
    position: relative;
    outline: 9px solid #140A1C;
    box-shadow: 0px 0px 16px black;
}

.magical-girls {
  width: 628;
  height: 376;
}       

.intro {
    text-align: center;
    box-shadow: inset 0px 0px 6px black;
    line-height: 1.25;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-family: "Gotham-Bold", monospace;
    background: 0 0 / auto 8px
        #000000;
    color: white;
    padding: 1rem 1.5rem;
    border: 0px solid;
    border-color: #333 #222 #222 #1111;
    padding-top: 3rem;

    &::before {
        content: "DEBUG UNIT";
        color: lime;
        transform: scaleX(2);
        transform-origin: top left;
        width: calc(50% - 24px);
        text-align: center;
        display: block;
        position: absolute;
        top: 1rem;
    }

    &,
    aside {
        display: flex;
        gap: 16px;
    }

    aside {
        flex: 2;
        flex-direction: column;
    }

    .main {
        border: 3px solid green;
        flex: 3;
        padding: 16px 24px;
        display: block;
        position: relative;
        img {
            margin-top: 1rem;
            height: 240px;
        }
    }

    .main {
        overflow-y: auto;
    }
}

p {
    white-space: pre;
    margin: 1;
    text-align: center;

    &:not(:last-child) {
        margin-bottom: 1rem;
    }

    max-width: 100%;
    overflow-wrap: break-word;
}

a {
    color: inherit;
}

li {
    list-style: square;
}

.title {
    transform-origin: left top;
    transform: scaleX(2);
    width: fit-content;

    &:not(:first-child) {
        margin-top: 2rem;
    }

    &::before {
        content: "";
        margin-right: 0.25ch;
    }

    &::after {
        content: "";
        vertical-align: baseline;
        margin-left: 0.5ch;
        width: 0.5ch;
        height: 1rem;
        background: white;
    }
  }
           
      ul {
    text-align: center;
    margin-left: -1rem;
    margin-top: 0.5rem;
      }

      hr {
    color: pink
      }
      
      @font-face { 
    font-family: "Gotham-Bold"; 
    src: url("/fonts/Gotham-Bold.woff2") format("woff2"), 
        url("/fonts/Gotham-Bold.woff") format("woff"), 
        url("/fonts/Gotham-Bold.ttf") format("truetype"); 
    font-weight: normal;
    font-style: normal; 
    font-display: swap;
      }