@import url("slider.css");
@import url("leftbar.css");
@import url("a.css");
@import url("lightdark.css");
@import url("../fonts/hidayatullah/hidayatullah-demo.css");
@import url("../fonts/heal-the-web-a/heal-the-web-a.css");
@import url("../fonts/heal-the-web-b/heal-the-web-b.css");

:root {
    color-scheme: light dark;
    --bg-repeats: no-repeat, repeat-x, repeat, no-repeat;
    --font-main: Heal The Web A;
}

h1,
h2 {
    font-family: Heal The Web B;
}

::selection {
    background: var(--selcolor);
    color: white;
}

html {
    cursor: var(--defcur), auto;
    min-height: 100%;
}

main {
    font-family: var(--font-main);
    font-size: 14pt;
    padding-top: 20px;
    padding-bottom: calc(225px + 20px);
    padding-right: calc(147px + 20px + 2vw);
}

body {
    color: var(--textcolor);
    background-image: var(--obelisk), var(--desertbg), var(--space), var(--bg);
    background-repeat: var(--bg-repeats);
    background-position:
        bottom 32px right 20px,
        right bottom,
        right bottom,
        right bottom;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    line-height: 175%;
}

.maintitle {
    font-family: Hidayatullah DEMO;
    font-size: 80px;
    padding-top: 30px;
    line-height: normal;
    color: var(--textcolor);
}

.content-dist {
    padding-left: calc(2.2% + 200px);
}

header {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0) 100%
    );
}

#desert {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: 32px;
    background-image: var(--sand);
    z-index: 10;
}

#clouds {
    display: block;
    width: 100vw;
    top: 0px;
    bottom: 80vh;
    background-image: var(--clouds);
    background-repeat: repeat-x;
    background-position: top left;
    background-attachment: scroll;
    animation:
        r-t-l 500s linear infinite,
        u-d 300s ease-in-out infinite;
    z-index: -1;
    position: fixed;
}

@keyframes r-t-l {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 500px 0px;
    }
}
@keyframes u-d {
    0% {
        top: 5px;
    }
    25% {
        top: -5px;
    }
    50% {
        top: 5px;
    }
    75% {
        top: -5px;
    }
    100% {
        top: 5px;
    }
}

html {
    visibility: visible;
    opacity: 1;
}