body {
    background-color: black;

    font-family: "Courier New", "system-ui";
    font-size: 110%;
}

.btn {
    font-size: inherit;

    padding: 0 !important;
    border-width: 0 !important;
}

h1, h2, h3 {
    font-weight: bold;
}

h1, h2 {
    color: var(--title-color);
}

h1, h2, h3, h4, h5, h6, p {
    margin-bottom: 0;
}

ul {
    padding-left: 1rem;
}

a, .color-secondary {
    color: var(--color-secondary);
}

.card {
    background: var(--card-background);
    background: var(--card-gradient);
    /*background-color: transparent;*/
    color: var(--card-color);
    border-width: 0;
    border-radius: var(--card-radius);

    box-shadow: none !important;
}

.card, .rounded, .btn {
    border-radius: var(--card-radius) !important;
}

.bg-highlight, .btn-highlight {
    background-color: var(--background-highlight);
}

.btn-highlight {
    box-sizing: content-box;

    transition: 0.1s;
}

.btn-highlight:hover {
    background: var(--background-highlight-hover);
    background: var(--gradient-highlight-hover);

    transform: scale(102%);
}

.btn-highlight > * {
    transition: 0.1s;
}

.btn-highlight:active {
    background-color: var(--background-highlight-pressed);
}

.btn-simple:hover {
    background-color: var(--background-simple-hover);
}

.btn-grow {
    transition: 0.1s;
}

.btn-grow:hover {
    scale: 1.1;
}

.column-spaced > * {
    margin-top: var(--grid-spacing);
}

.column-spaced-small > * {
    margin-top: var(--grid-spacing-small);
}

.column-spaced > *:first-child {
    margin-top: 0;
}

.column-spaced-small > *:first-child {
    margin-top: 0;
}

.row-spaced > * {
    margin-left: var(--grid-spacing);
}

.row-spaced > *:first-child {
    margin-left: 0;
}

.me {
    /*width: 33vw;*/
    max-width: 100%;
}

.my-description {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.my-description span {
}

.w-responsive {
    margin-right: var(--grid-spacing);
}

/*@keyframes fadeIn {*/
/*    from {*/
/*        -moz-transform: translateY(var(--fade-in-translation));*/
/*        -webkit-transform: translateY(var(--fade-in-translation));*/
/*        -o-transform: translateY(var(--fade-in-translation));*/
/*        transform: translateY(var(--fade-in-translation));*/
/*    }*/

/*    to {*/
/*        -moz-transform: initial;*/
/*        -webkit-transform: initial;*/
/*        -o-transform: initial;*/
/*        transform: initial;*/

/*        opacity: 1;*/
/*    }*/
/*}*/

/*.fadeIn {*/
/*    opacity: 0.75;*/

/*    animation: fadeIn 0.25s ease;*/
/*    animation-fill-mode: forwards;*/
/*}*/

.collapsing, .expand * {
    transition-duration: var(--transition-speed);
    transition-timing-function: ease;
}

.inline-image {
    height: 1em;
}

.contact-image {
    height: 8em;
}

.expand * {
    width: 0.5rem;
    height: 0.1rem;
    display: inline-block;

    background-color: white;

    border-radius: 0.1rem;
}

.expand-left {
    transform-origin: right;
    transform: rotateZ(30deg) translateX(0.025rem);
}

.expand-right {
    transform-origin: left;
    transform: rotateZ(-30deg) translateX(-0.025rem);
}

.expand.expanded .expand-left {
    transform: rotateZ(-30deg) translateX(0.025rem);
}

.expand.expanded .expand-right {
    transform: rotateZ(30deg) translateX(-0.025rem);
}

.hover-reveal-parent .hover-reveal-child {
    transition: var(--transition-speed) ease;
}

.hover-reveal-parent:not(:hover) .hover-reveal-child {
    display: none !important;
}

.hover-reveal-parent:hover .hover-reveal-child-hide {
    display: none !important;
}

.vertical-divider {
    display: inline-block;

    width: 1px;
    height: 2rem;
    background-color: white;
}

.soft {
    --shadow-color: var(--accent-color);

    /*margin: 2px;*/

    -moz-box-shadow: 1px 2px 3px var(--shadow-color);
    -webkit-box-shadow: 1px 2px 3px var(--shadow-color);
    box-shadow: 0 0 2em var(--shadow-color);
}

.grid-1 {
    grid-column: 1;
    grid-row: 1;
}

/*.forefront-element {*/
/*    -webkit-transform: translateZ(999px) scale(.7);*/
/*    transform: translateZ(999px) scale(.7);*/
/*    z-index: 1;*/
/*}*/

.main-content {
    background-position: top center;
    background-attachment: scroll;
    background-size: 100% auto;
    background-repeat: repeat-y;
    width: 100%;
}

.animate-float {
    cursor: pointer;
}

.animate-float:not(:hover) {
    animation: float 3s ease infinite;
}

.animate-float:hover {
    animation: float-excited 0.25s ease-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    70% {
        transform: translateY(0);
    }

    85% {
        transform: translateY(25%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes float-excited {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(25%);
    }

    100% {
        transform: translateY(0);
    }
}

@media screen and (max-width: 1440px) and (min-width: 701px) {
    .btn-highlight:hover {
        transform: scale(103%);
    }
}

@media screen and (max-width: 700px) {
    .w-responsive {
        width: 100%;
        margin-right: 0;
        margin-bottom: var(--grid-spacing);
    }

    .flex-wrap-responsive {
        flex-wrap: wrap;
    }

    @media screen and (max-width: 700px) {
        .btn-highlight:hover {
            transform: scale(105%);
        }
    }
}