@import "../font/Roboto/stylesheet.css";

:root {
    --page-background-img: url("../img/background/background.jpeg");
    --page-background-img-small: url("../img/background/background-small.jpeg");
    --background-color: #fff;
    --primary-color: #00b3ff;
    --secondary-color: #00d6ff;
    --font-color: #6b6a6a;
    --font-color-footer: #ababab;
    --cookie-background: #eaf1fd;
    color-scheme: light;
}

:root[data-theme='dark'] {
    --page-background-img: url("../img/background/dark-background.png");
    --page-background-img-small: url("../img/background/dark-background-small.png");
    --background-color: #12141CFF;
    --primary-color: #0197ce;
    --secondary-color: #00d6ff;
    --font-color: #D3D3D3FF;
    --font-color-footer: #6b6a6a;
    --cookie-background: #262936;
    color-scheme: dark;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'robotomedium', Arial, Helvetica, sans-serif;
    width: 100vw;
    max-width: 100%;;
    display: flex;
    background-color: var(--background-color);
    color: var(--font-color);
    transition: .85s;
}

#content {
    position: relative;
    width: 60%;
    height: 100vh;
}

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

#content header,
#content .content,
#content footer {
    max-width: 800px;
    margin: auto;
}

#content .content {
    padding: 0 10%;
    min-height: 480px;
}

#decoration {
    position: fixed;
    right: 0;
    width: 40%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center;
    overflow: hidden;
}

#decoration[data-theme="light"] {
    background-position: right center;
}

@media screen and (min-width: 901px) {
    #decoration {
        background-image: var(--page-background-img);
    }
}

@media screen and (max-width: 900px) {
    body {
        flex-direction: column-reverse;
        height: 100%;
    }

    #decoration {
        position: sticky;
        height: 140px;
        width: 100%;
        background-image: var(--page-background-img-small);
        overflow: hidden;
    }

    #content {
        width: 100%;
    }
}