@import url('../media/font/fonts.css');
@import url('./nav.css');
@import url('./namecolors.css');

:root {
    /* color's */
    --primary-color: #68b54d;
    --secondary-color: #29733f;
    --dark-gray: #000000;
    --background-color: #000000bf;
}

body {
    background: radial-gradient(circle at center,
            var(--dark-gray),
            var(--primary-color) 40%,
            var(--secondary-color) 45%,
            var(--dark-gray) 65%) fixed;
    margin: 0 2rem;
    font-family: raster;
    color: var(--primary-color);
    font-size: 1.5rem;
}

.container-fluid {
    padding: 0 !important;
}

.box {
    background-color: var(--background-color);
    border: solid var(--secondary-color) 5px;
    border-radius: 1rem;
    box-shadow: var(--primary-color) 0.4rem 0.4rem 0.7rem;
    overflow: scroll;
}

.header {
    text-align: center;
    color: var(--secondary-color);
    font-family: SFDigitalReadout, sans-serif;
    text-shadow: var(--secondary-color) 0.1rem 0.1rem 0.5rem;
    box-shadow: 0px 15px 1rem -15px var(--primary-color);
    padding: 0.25rem 0;
}

.header h1 {
    font-size: 3rem;
}

.content,
.content p {
    font-family: raster;
    margin: 1rem;
    color: var(--primary-color);
    font-size: 1.5rem;
}

.selfie-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.selfie {
    max-width: 100%;
    border: solid var(--secondary-color) 5px;
    border-radius: 1rem;
    box-shadow: var(--primary-color) 0.4rem 0.4rem 0.7rem;
}

@media screen and (max-width: 768px) {
    .row.align-items-stretch {
        align-items: flex-start;
    }

    .box.h-100 {
        height: auto !important;
    }

    /* Reorder the columns on mobile */
    .row.g-3.my-3:first-of-type {
        display: flex;
        flex-direction: column;
    }

    .row.g-3.my-3:first-of-type .col-12.col-md-2 {
        order: 2;
    }

    .row.g-3.my-3:first-of-type .col-12.col-md-10 {
        order: 1;
    }

    .selfie {
        max-width: 100%;
    }

    #wireframe {
        display: none;
    }
}

.bi {
    display: inline-block;
    transition: transform 300ms ease, filter 300ms ease;
    transform-origin: center;
}

.bi:hover {
    transform: rotate(1deg) scale(1.05);
}