:root {
    --main-spacing: 10px;
    --main-border: 10px;
}


html {
    /* height: 100%; */
    padding: 0;
    margin: 0;
}

body {
    background: rgb(0, 0, 0);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    margin: 0;

    color: aliceblue;

    image-rendering: pixelated;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: large;
}

main {
    position: relative;
    /* background-size: 100% 200%; */

    padding: 10px;

    background:
        radial-gradient(at -20% 100%, rgba(255, 59, 206, 0.555) 10%, rgba(143, 168, 255, 0.452) 100%),
        radial-gradient(at 120% -30%, rgb(59, 226, 255) 10%, rgba(0, 36, 168, 0.493) 65%, rgba(0, 9, 87, 0) 100%)
    ;

	box-shadow:
        inset 0px 0px 265px 2px #627cd19a,
        inset 0px 0px 185px 1px #0c45ffce,
              0px 0px 10px 3px rgb(255, 255, 255);

    min-width: 600px;

    border-radius: var(--main-border);

    width: 50%;
    /* height: 70%; */

    display: flex;
    flex-direction: column;

    z-index: 10;

    border-style: solid;
    border-width: 1px;
    border-color: aliceblue;
}
@media only screen and (max-width: 600px) {
    main {
        min-width: 95%;
        width: 95%;
        min-height: 80%;
        /* height: fit-content; */
        /* overflow-y: auto; */
        overflow-x: hidden;
    }

    html {
        /* overflow-y: auto; */
        overflow-x: hidden;
    }
}
main * {
    margin: calc(var(--main-spacing) / 2);
    margin-top: calc(var(--main-spacing) / 2);
    margin-bottom: calc(var(--main-spacing) / 1);

    /* flex: 1; */
}

h1 {
    font-size: 2.2em;
}
h1, h2 {
    color: rgb(251, 135, 255);
}

main:before {
    background-color: initial;
    background-image: linear-gradient(#ffa6e450 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: calc(var(--main-border) * 8);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    content: "";
    height: 80%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all .3s;
    pointer-events: none;
    width: 100%;
}

main:after {
    background-color: initial;
    pointer-events: none;
    background-image: linear-gradient(#00000000 0, rgba(255, 0, 98, 0.548) 100%);
    border-radius: calc(var(--main-border) * 5);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    content: "";
    height: 50%;
    left: 0;
    opacity: .5;
    position: absolute;
    bottom: 0;
    transition: all .3s;
    width: 100%;
}


/* unvisited link */
a:link {
    color: rgb(145, 248, 255);
}

/* visited link */
a:visited {
    color: rgb(145, 193, 255);
}

/* mouse over link */
a:hover {
    color: rgb(255, 158, 207);
}

/* selected link */
a:active {
    color: rgb(255, 158, 207);
}

hr {
    display: block;
    border-style: inset;
    border-width: 1px;
}

/* Dashed border */
hr.dashed {
    border-top: 1px dashed #ffffff;
    border-bottom: none;
}

/* Dotted border */
hr.dotted {
    border-top: 1px dotted #ffffff;
    border-bottom: none;
}

/* Solid border */
hr.solid {
    border-top: 1px solid #ffffff;
    border-bottom: none;
}

/* Rounded border */
hr.rounded {
    border-top: 1px solid #ffffff;
    border-radius: 5px;
    border-bottom: none;
}