@font-face {
    font-family: OldMoutOrchardHand;
    src: url("../assets/fonts/OldMoutOrchardHand.otf") format("opentype");
}

@font-face {
    font-family: OldMoutSchoolbookCond;
    src: url("../assets/fonts/OldMoutSchoolbookCond.otf") format("opentype");
}

* {
    font-family: OldMoutSchoolbookCond;
}

.all-caps {
    font-family: OldMoutOrchardHand;
}

.pineapple-and-raspberry {
    color: #d50037;
}

.kiwi-and-lime {
    color: #61a50e;
}

.berries-and-cherries {
    color: #81266a;
}

.strawberry-and-apple {
    color: #e1251b;
}

.cream {
    color: rgba(254, 252, 236, 1);
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: rgba(254, 252, 236, 1);
    overflow: auto;
}

.form-bg {
    /*
    background:
        linear-gradient(to right,
            rgba(254, 252, 236, 0) 0%,
            rgba(254, 252, 236, 1) 6%,
            rgba(254, 252, 236, 1) 94%,
            rgba(254, 252, 236, 0) 100%
        );
        */
}

/* 
body {
    display: flex;
    flex-direction: column;
} */

.overlayed {
    width: 100%;
    overflow-y: scroll;
}

.restrict-form-width {
    max-width: 500px;
}

.no-click {
    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Header */
.welcome {

    max-width: 90%;
    height: auto;
    position: relative;
    z-index: 2;
}

/* @media (max-width: 768px) {
    .welcome {
        max-height: 25%;
        width: auto;
    }
} */
.push-up {
    position: relative;
    z-index: 1111;
}

/* Form images */
.promo-header {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
}

/* Sun */
.promo-sun {
    position: absolute;
    top: 19%;
    left: 8%;
    
    width: 80px;
    height: auto;

    transform: translate(-50%, -50%);
}

/* Clouds */
.promo-cloud {
    position: absolute;
    width: 100px;
    height: auto;
    opacity: 0.9;

    transform: translate(-50%, -50%);
}

.cloud-1 {
    top: 1%;
    right: 1%;
}

.cloud-2 {
    top: 30%;
    right: 4%;
}

.cloud-3 {

    left: 5%;
    bottom: 1%
}

.cloud-4 {

    right: 0%;
    bottom: 10%;
}

.cloud-5 {
    left: 3%;
    bottom: 45%;
}

.cloud-6 {
    right: -4%;
    bottom: 35%;

}

/* Parachute Bottle */
.promo-parachute {
    position: absolute;
    top: 9%;
    right: 2%;
    width: 80px;
    height: auto;
    z-index: 3;
}