@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 2em;
}

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

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

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

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

.selfie {
    max-width: 100%;
}

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

    .box.h-100 {
        height: auto !important;
    }
    .selfie {
        max-height: 200px;
        width: auto;
        display: block;
        margin: 1em auto;
        border: solid var(--primary-color) 3px;
        border-radius: 1em;
    }
    #wireframe {
        display: none;
    }
}