@font-face {
    font-family: 'ch-light'; /* Give your font a descriptive name */
    src: url('../fonts/cooper-hewitt-light.otf') format('opentype');
    font-weight: normal; /* Define the weight of this font file */
    font-style: normal;  /* Define the style of this font file */
    font-display: swap;  /* Optional: Controls how the font loads and renders */
}

@font-face {
    font-family: 'ch-regular'; /* Give your font a descriptive name */
    src: url('../fonts/cooper-hewitt-book.otf') format('opentype');
    font-weight: normal; /* Define the weight of this font file */
    font-style: normal;  /* Define the style of this font file */
    font-display: swap;  /* Optional: Controls how the font loads and renders */
}

@font-face {
    font-family: 'ch-thin'; /* Give your font a descriptive name */
    src: url('../fonts/cooper-hewitt-thin.otf') format('opentype');
    font-weight: normal; /* Define the weight of this font file */
    font-style: normal;  /* Define the style of this font file */
    font-display: swap;  /* Optional: Controls how the font loads and renders */
}

body, html {
    padding: 0px;
    margin: 0px;

    height: 100%;
}

body {
    background: radial-gradient(
        at top left, 
        #9698e2 0%,
        #9699eb 10%,
        Blue 100% /* Then it smoothly fades to Light Blue by the edge */
    )
}

#mainDiv {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    

}

#noneYetDiv {
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
}

#mainText {
    font-family: "ch-thin";
    color: white;
}

#cloud {
    width: 38px;
    height: 40px;

    margin: 0px;
    padding: 0px;
    animation: rotateCloud 1s ease-out infinite;
    animation-delay: 1s;
}

@keyframes rotateCloud {
    0% {
        transform: rotateZ(0deg);
    }
    19.8% { /* 33% of 60% */
        transform: rotateZ(-10deg);
    }
    39.6% { /* 66% of 60% */
        transform: rotateZ(10deg);
    }
    60% { /* The wiggle is complete here */
        transform: rotateZ(0deg);
    }
    100% { /* The pause is from 60% to 100% */
        transform: rotateZ(0deg);
    }
}