/* Houdini at-rule for animating the gradient angle */
@property --gradient-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* Fallback for browsers that don't support @property */
@supports not (background: paint(something)) {
    :root {
        --gradient-angle: 90deg;
    }
}

/* Element queries */

html {
    /* Make the page / gradient the full height on big screens */
    min-height: 100vh;
}

body {
    font-family: 'Roboto', sans-serif;
    background: var(--bs-orange) linear-gradient(var(--gradient-angle), var(--bs-orange), var(--bs-blue));
    animation: gradient-spin 60s linear infinite;
}

h1,
h2,
h3,
h4 {
    font-family: 'Comfortaa', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.table {
    color: var(--bs-body-color);
}

a:not(.btn) {
    transition: color 0.25s, text-decoration 0.25s;
    color: var(--bs-primary);
    text-decoration: underline transparent;
}

a:hover:not(.btn) {
    color: var(--bs-orange);
    text-decoration: underline currentColor;
}

#details a {
    color: var(--bs-body-color);
    text-decoration: none;
}

#details i:before {
    transition: color 0.5s;
}

#details a:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

#details li:hover i:before {
    text-decoration: underline;
    text-decoration-style: dotted;
    color: var(--bs-primary);
}

.name {
    font-weight: 300;
    font-size: 1.6rem;
    font-family: 'Source Code Pro', monospace, serif;
}

.name .last {
    font-weight: 600;
}

.corners {
    border-radius: 2rem;
}

.pill {
    background-color: var(--bs-gray-400);
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
}

ul.timeline,
ul.dp-circle {
    list-style-type: none;
    position: relative;
}

ul.timeline:before {
    content: '';
    background-color: var(--bs-gray-400);
    display: inline-block;
    position: absolute;
    left: 1.45rem;
    width: 2px;
    height: 100%;
    z-index: 400;
}

ul.timeline>li,
ul.dp-circle>li {
    margin: 1rem 0;
    padding-left: 0.6rem;
    page-break-inside: avoid;
}

ul.dp-circle>li {
    margin: 0.5rem 0;
}

ul.timeline>li:before,
ul.dp-circle>li:before {
    content: '';
    background-color: var(--bs-white);
    border-radius: 50%;
    border: 0.2rem solid var(--bs-primary);
    display: inline-block;
    position: absolute;
    left: 1rem;
    width: 1em;
    height: 1em;
    margin-top: 0.2rem;
    z-index: 400;
    transition: border-color 0.5s;
}

ul.dp-circle-sm>li:before {
    width: 0.8em;
    height: 0.8em;
    margin-top: 0.3rem;
}

ul.timeline>li:hover:before,
ul.dp-circle>li:hover:before {
    border: 0.2rem solid var(--bs-orange);
}


ul.dp-color {
    list-style: none;
}

ul.dp-color>li::before {
    content: "\2022";
    color: var(--bs-primary);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    position: relative;
    transition: color 0.5s;
}

ul.dp-color>li:hover:before {
    color: var(--bs-orange);
}

.grade {
	font-family: var(--bs-font-monospace);
	background-color: var(--bs-gray-400);
	border-radius: var(--bs-border-radius);
	padding: .125rem .25rem 0;
    font-weight: 700;
}

/* Fix for divs with a font-size adding a hidden margin */
.font-m-fix {
    margin-top: -.125rem;
}

/* Alternative to the above */
.font-fix {
    font-size: 0;
}

.font-fix * {
    font-size: initial;
}

.font-fix *.small {
    font-size: .875rem;
}

/* Media Queries */

@media (max-width: 575.98px) {
    .container>.corners {
        border-radius: 0 0 2rem 2rem;
    }
}

@media (max-width: 991.98px) {
    ul.dp-color {
        padding: 0;
    }

    ul.dp-color>li::before {
        display: none;
    }
}

@media only screen and (min-width: 992px) {
    #details {
        position: sticky;
        top: 1rem;
    }
}

@media only print {
    body {
        background: #fff;
    }

    ul.timeline>li:hover:before,
    ul.dp-circle>li:hover:before {
        border: 0.2rem solid var(--bs-primary);
    }

    a:hover,
    ul.dp-color>li:hover:before {
        color: var(--bs-primary);
    }
}

@media only print and (max-width: 991.98px) {
    main {
        text-align: left !important;
    }

    #container {
        margin-top: 0 !important;
    }

    #photo {
        width: 40%;
        float: right;
    }

    #side {
        text-align: left;
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    #points {
        margin: 0 !important;
    }
}

@media only screen and (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }

    .text-muted {
        color: var(--bs-gray-500) !important;
    }

    .bg-white {
        background-color: var(--bs-dark) !important;
    }

    .bg-light {
        background-color: var(--bs-gray-dark) !important;
    }

    .pill {
        background-color: var(--bs-gray-600);
    }

    :root {
        --bs-body-color: var(--bs-gray-200)
    }

    ul.timeline>li:before,
    ul.dp-circle>li:before {
        background-color: var(--bs-dark);
        border: 0.2rem solid var(--bs-orange);
    }

    ul.timeline>li:hover:before,
    ul.dp-circle>li:hover:before {
        border: 0.2rem solid var(--bs-blue);
    }

    ul.timeline:before {
        background-color: var(--bs-gray-600);
    }

    a:not(.btn),
    ul.dp-color>li::before {
        color: var(--bs-orange);
    }

    a:hover:not(.btn),
    ul.dp-color>li:hover:before {
        color: var(--bs-primary);
    }

    #details a:hover,
    #details li:hover i:before {
        color: var(--bs-orange);
    }

    /* a:hover:not(.btn) {
        text-decoration: underline var(--bs-primary);
    } */

    .grade {
        background-color: var(--bs-gray-800);
    }
}

@media only screen {
    /* Changes for the Dark Reader browser plugin */
    html[data-darkreader-mode] {
        background-color: initial !important;
    }

    html[data-darkreader-mode=dynamic] body {
        background: var(--darkreader-bg--bs-orange, var(--bs-orange)) linear-gradient(var(--gradient-angle), var(--darkreader-bg--bs-orange, var(--bs-orange)), var(--darkreader-bg--bs-blue, var(--bs-blue)));
    }
}

@media (prefers-reduced-motion) {
    body {
        background: var(--bs-orange) linear-gradient(90deg, var(--bs-orange), var(--bs-blue));
        animation: none;
    }
}

@keyframes gradient-spin {
    from {
        --gradient-angle: 0deg;
    }

    to {
        --gradient-angle: 360deg;
    }
}