/* This is really fugly placeholder code with just absolute positioned images: The real site is coming sooner or later ;) */

html, body {
    margin: 0;
    padding: 0;
    background-color: #111;
}

div, a {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

#first {
    margin: 0;
    width: 0;
    padding: 0;
    height: 0;
}

#root {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#top {
    display: block;
    height: 0vw;
    margin-top: -2.5vw;
    width: 100%;
    background-color: #0a0a0a;
    position: relative;
}

#cover {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 0;
    top: 0vw;
    padding-bottom: 50%;
    background-image: url("this-is-carloscar-header-1-black-web-noise-8.webp");
    background-color: #111;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    opacity: 0.95;
}

.no-webp #cover {
    background-image: url("this-is-carloscar-header-1-black-web-noise-8.jpg");
}

#text {
    width: 70%;
    margin-left: 14.25%;
    background-image: url("text.webp");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 53.284011508425811754%;
    height: 0;
    position: relative;
    top: 0;
    margin-bottom: 10px;
}

.no-webp #text {
    background-image: url("text.png");
}

#creative {
    width: 100%;
}

#creative .dots-black {
    background-color: #111;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("dots-black.webp");
    width: 100%;
    padding-bottom: 10.075%;
    position: relative;
    z-index: 0;
    margin-top: -40px;
    opacity: 0.4;
}

.no-webp #creative .dots-black {
    background-image: url("dots-black.png");
}

#creative hr {
    height: 1px;
    border: 0;
    background-color: #272727;
    width: 70%;
    margin-top: 60px;
    margin-bottom: 60px;
}

#photography {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("photography-lowres.webp");
    padding-bottom: 50.4%;
    height: 0;
    position: relative;
    z-index: 1;
}

.no-webp #photography {
    background-image: url("photography-lowres.png");
}

#software-wrapper {
    background-color: #fff;
    width: 100%;
}

#software-wrapper .dots {
    background-color: #fff;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("dots.webp");
    width: 100%;
    padding-bottom: 10.075%;
    margin-top: -5px;
    position: relative;
    z-index: 0;
    margin-bottom: 0px;
    opacity: 0.3;
}

.no-webp #software-wrapper .dots {
    background-image: url("dots.png");
}

#software {
    background-color: #fff;
    width: 65%;
    overflow: hidden;
    position: relative;
    margin-left: 17.5%;
    border-radius: 8px;
    padding-bottom: 40px;
    margin-bottom: -20px;
}

#software-wrapper .text {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("code-text.webp");
    width: 94%;
    padding-bottom: 5.969%;
    margin-left: 3.52%;
    margin-bottom: 45px;
    margin-top: -10px;
    z-index: 2;
    position: relative;
    cursor: pointer;
    display: block;
}

.no-webp #software-wrapper .text {
    background-image: url("code-text.png");
}

#software .image {
    position: relative;
    left: 0;
    margin-bottom: 0px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("tomodachi.gif");
    padding-bottom: 36.7%;
    height: 0;
}

#mtglife {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("mtglife.webp");
    width: 100%;
    padding-bottom: 112.03333%;
    position: relative;
    margin-top: 5px;
}

.no-webp #mtglife {
    background-image: url("mtglife.jpg");
}

#techno {
    background-position: center -1px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("techno.webp");
    width: 100%;
    padding-bottom: 108.35%;
    position: relative;
    margin-bottom: -20px;
}

.no-webp #techno {
    background-image: url("techno.jpg");
}

#techno .text {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("techno-text.webp");
    width: 80%;
    margin-left: 10%;
    top: 22%;
    padding-bottom: 2.1%;
    position: absolute;
    display: block;
    cursor: pointer;
}

.no-webp #techno .text {
    background-image: url("techno-text.png");
}

#me {
    background-position: center 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("me-lowres.webp");
    width: 100%;
    padding-top: 0;
    padding-bottom: 99%;
    margin-bottom: -1px;
    margin-top: 0px;
}

.no-webp #me {
    background-image: url("me-lowres.jpg");
}

p {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 1;
    height: 1;
    margin: 0;
    padding: 0;
    font-size: 1px;
}

@media screen and (max-width: 1500px) {
    #top {
        margin-top: 3.5vw;
    }

    #cover {
        padding-bottom: 59%;
    }
}

@media screen and (max-width: 1200px) {
    #top {
        margin-top: -3vw;
        height: 0vw;
    }

    #cover {
        width: 120%;
        margin-left: -10%;
    }

    #text {
        width: 82%;
        margin-left: 8.8%;
        padding-bottom: 62.418413481298808055%;
    }
}

@media screen and (max-width: 1000px) {
    #top {
        margin-top: -3.5vw;
    }

    #cover {
        width: 125%;
        margin-left: -12.5%;
    }

    #text {
        width: 90%;
        margin-left: 4.9%;
        padding-bottom: 68.508014796547472256%;
    }

    #creative hr {
        height: 1px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}