@import url("../colorPalettes/retrowave.css");

body {
    background: url("/Assets/wallpapers/computer/cyberpunk.jpg") center/cover fixed;
    backdrop-filter: blur(3px);


    font-family: var(--fontStack);
    color: black;
}

#wrapper {
    background: var(--RWdeep);

    border: 3px solid var(--RWteal);
    border-radius: 20px;
    box-shadow: 4px 4px var(--RWorange), -4px -4px var(--RWpink);
}

aside {
    background: var(--transWhite);

    border: 2px dotted var(--RWplum);
    border-radius: 15px;
    box-shadow: 4px 4px var(--RWpurple), -4px -4px var(--RWteal);
    position: relative;
}

/* Middle */

main section {
    background: var(--transWhite);

    border: 2px dotted var(--RWteal);
    border-radius: 15px;
    box-shadow: 4px 4px var(--RWpink), -4px -4px var(--RWorange);
}

#ryoba {
    border: 3px dotted var(--RWpink);
    border-radius: 15px;

    box-shadow: 4px 4px var(--RWteal);
}

.boxes th,
.boxes td {
    border: 2px dashed var(--RWplum);
}

/* Right-side */

aside section {
    background: var(--transPurple);

    border: 2px dotted var(--RWorange);
    border-radius: 15px;
    box-shadow: 4px 4px var(--RWpink);
}

hr {
    width: 100%;
    border: none;
    height: 3px;
    background: linear-gradient(90deg, var(--RWpink), var(--RWteal));
    border-radius: 999px;
}

h2 {
    font-family: "maddison", Helvetica, sans-serif;
    font-size: 2.3em;
    letter-spacing: -5px;

    height: 50px;
    padding: 0;

    background: linear-gradient(to right, var(--RWpink) 0%, var(--RWpurple) 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    position: relative;
}

h2::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;

    height: 3px;
    width: 40%;

    border-top: 2px solid var(--RWplum);
}


h2 span {
    display: inline-block;
    height: inherit;
}

quote::before,
quote::after,
li::before {
    color: var(--RWpink);
}

li::before {
    content: "▸";
    font-size: 10px;
    margin-right: 3px;
    vertical-align: text-top;
}

.mark {
    background-color: var(--RWorange);
    color: black;
}

a {
    color: var(--RWpink);
}