html {
    width: 100%;
}

body {
    background: #ddd;
    font-family: Arial;
    margin: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

load {
    background: #111;
    height: 100%;
    opacity: 1;
    position: fixed;
    width: 100%;
    z-index: 12345;
    transition: 1s opacity;
}

load:not(.ing) {
    opacity: 0;
}

load.ed:not(.ing) {
    display: none;
}

canvas {
    display: none;
}

form {
    margin: 0;
}

.gradient-rgb {
    background: linear-gradient(-45deg, rgba(35,166,213,1) 25%, rgba(50,205,50,1) 50%, rgba(255,59,48,1) 75%);
    background-size: 400% 400%;
    animation: gradient 15s infinite ease;
    -webkit-animation: gradient 15s infinite ease;
}

img:not([src]) {
    display: none;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

body[theme="dark"] {
    background: #222;
    color: #fff;
    font-family: Arial;
    margin: 0;
    width: 100%;
}

a {
    text-decoration: none;
}

load {
    height: 100%;
    opacity: 1;
    position: fixed;
    width: 100%;
    z-index: 12345;
    transition: 1s opacity;
}

body:not([theme="dark"]) load {
    background: #111;    
}

body[theme="dark"] load {
    background: #eee;    
}

load:not(.ing) {
    opacity: 0;
}

load.ed:not(.ing) {
    display: none;
}

picture {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*PSEUDO*/
.body:not([auth]) [auth="true"] {
    display: none;
}

.body[auth] [auth="false"] {
    display: none;
}

[placeholder]:not(input):empty:before {
    content: attr(placeholder);
    opacity: 0.5;
}

[data-view] {
    display: none;
}

[text-content]:before {
    content: attr(text-content);
}

/*POPUP*/
.popup {
    flex: 1;
    display: flex;
}

/*ROUTES*/
.route:not(.active) {
    display: none;
}

.routes {
    flex: 1;
    width: 100%;
}

.route {
    flex: 1;
    display: flex;
}

/*ELEMENTS*/
article > * > div {
    display: flex;
    align-items: baseline;
    flex-direction: column;
}

div > section, footer section, .route section {
    display: flex;
    align-items: center;
    position: relative;
    /* justify-content: center; */
    flex-grow: 1;
    flex: 1;
    /* gap: 30px; */
}

h1 {
    font-size: 22px;
    margin: 0;
}

i {
    display: flex;
    justify-content: center;
    align-items: center;
}

con {
    /* flex: 1; */
}

span {
    /* display: inline-block; */
    display: inline-flex;
    /* align-items: center; */
}

article {
    display: flex;
    width: 100%;
}

/*CLASSES*/
.hide {
    display: none;
}

.hide-subsequent ~ * {
    display: none !important;
}

.show {
    display: initial;
}


/*MAIN*/
@media screen {
    .body > .main {
        display: inline-flex;
        min-height: 100%;
        /* flex: 1; */
        flex-grow: 1;
        /* margin-left: 240px; */
        /* margin-right: 375px; */
        width: calc(100% - 240px - 375px);
        /* max-width: 580px; */
        box-sizing: border-box;
        flex-direction: column;
        /* border-left: 1px solid #333; */
        /* border-right: 1px solid #333; */
        /* padding-top: 50px; */
        /* margin-left: 320px; */
        /* justify-content: center; */
        /* align-items: center; */
        z-index: 1;
        position: relative;
        overflow: hidden;
    }

    [auth] > .main {
        /* margin-left: 240px; */
    }

    .body > .main [auth="true"] {
        /* margin-left: 240px; */
        /* margin-right: 320px; */
        padding-top: 70px;
        padding-top: 0;
        /* width: calc(100% - 695px); */
        /* flex: 1; */
        /* display: flex; */
        width: 100%;
    }

    body:has(#nav ~ .route.active) > :not(.route.active) {
        opacity: 1;
        overflow: hidden;
    }
}