/* Import layout settings */
@import url("styles/layout.css");

/* Custom colors */
:root {
    --night: #0b090aff;
    --eerie-black: #161a1dff;

    /* --raisin-black: #1a1423ff; */
    /* --english-violet: #3d314aff; */
    /* --eggplant: #684756ff; */
    /* --chamoisee: #96705bff; */
    /* --beaver: #ab8476ff; */

    /* --licorice: #120E18; */
    /* --raisin-black: #17121F; */
    /* --space-cadet: #22223bff; */
    /* --dark-purple: #2C2337; */
    --ultra-violet: #4a4e69ff;
    --rose-quartz: #9a8c98ff; /*HSV: 309, 6, 58*/
    --pale-dogwood: #c9ada7ff;
    --isabelline: #f2e9e4ff;
}

/* Background setup */
#background {

    /* Background gradient */
    background-image: linear-gradient(10deg, var(--night), var(--eerie-black));

    /* Prevent user selection */
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/* Animated backdrop settings */
#trace {
    font-family: monospace;
    color: var(--isabelline);
    opacity: 80%;
}

/* Header banner */
#banner {
    font-family: monospace;
    color: var(--isabelline);
    padding: 2em 1em 0 1em;
    text-align: center;
    backdrop-filter: blur(6px);
}


/* Main content of the page */
#website {

    /* Font and spacing */
    font-family: "Courier New", monospace;
    line-height: 1.5;

    /* Text color */
    color: var(--isabelline);
}

/* Utility class for converting into rose quartz color */
.color-rose-quartz {
    color: transparent;
    text-shadow: 0 0 0 var(--rose-quartz);
}

/* Icons inside links */
.texticon {
    color: transparent;
    text-shadow: 0 0 0 var(--rose-quartz);
    font-size: 1.2em;
    text-align: center;
    padding: 0 0.4em 0 0;
}


footer {
    text-align: center;
    /* backdrop-filter: blur(6px); */
}

/* Emphasize certain tags */
h1, h2, h3, em, strong, a {

    /* Text color */
    color: var(--rose-quartz);
}


/* Vertically align text */
h1, h2, h3 {

    /* Vertical alignment of text */
    width: 100%;
    display: inline-flex;
    align-items: center;

    /* Remove extra margins */
    margin-bottom: 0;
}

section {

    /* Border and Padding */
    border: 0.2em solid var(--pale-dogwood);
    padding: 0 1em;

    /* Blur backdrop */
    backdrop-filter: blur(6px);
}

table {

    /* Center table content */
    width: 100%;
    text-align: center;

    /* Add slight margin on top */
    margin: 1em 0;
}

a {
    /* Remove underline */
    text-decoration: none;

    /* Bold font */
    font-weight: bold;
}

/* Reactive links */
a:hover {
    color: var(--pale-dogwood);
}

blockquote {

    /* Center content within section */
    display: inline-flex;
    width: 100%;
    justify-content: center;

    /* Disable left-margin to use width=100% */
    margin: 2em 0;
}

.quotecontainer {

    /* Border with padding */
    border: 0.2em solid var(--pale-dogwood);
    border-width: 0.2em 0 0.2em 0;
    padding: 1.2em;

    /* Make the blockquote stand out more */
    /* backdrop-filter: blur(16px); */
    /* box-shadow: 0 1em 8em var(--night); */
}

/* Remove the margins on items of blockquotes */
.quotecontainer p {
    margin: 0;
}

/* Make quote italic and centered */
.quotecontent {
    text-align: center;
    font-style: italic;
}

/* Make quote author right-aligned */
.quoteauthor {
    text-align: right;
    padding: 1em 0 0 0;
}