/* Regular Weight */
@font-face {
    font-family: "Chancery";
    src: url("./fonts/Apple-Chancery.ttf"), local("cursive");
}

/* SemiBold (600) Weight */
@font-face {
    font-family: "Chancery";
    src: url("./fonts/Apple-Chancery.ttf"), local("cursive");
    font-weight: 600;
}

/* Bold Weight */
@font-face {
    font-family: "Chancery";
    src: url("./fonts/Apple-Chancery.ttf"), local("cursive");
    font-weight: bold;
}

/* Bold Italic Weight */
@font-face {
    font-family: "Chancery";
    src: url("./fonts/Apple-Chancery.ttf"), local("cursive");
    font-weight: bold;
    font-style: italic;
}

/* Italic Weight */
@font-face {
    font-family: "Chancery";
    src: url("./fonts/Apple-Chancery.ttf"), local("cursive");
    font-weight: normal;
    font-style: italic;
}


/* Regular Weight */
@font-face {
    font-family: "myArial";
    src: url("./fonts/Arial.ttf"), local("sans-serif");
}

/* SemiBold (600) Weight */
@font-face {
    font-family: "myArial";
    src: url("./fonts/Arial-Bold.ttf"), local("sans-serif");
    font-weight: 600;
}

/* Bold Weight */
@font-face {
    font-family: "myArial";
    src: url("./fonts/Arial-Bold.ttf"), local("sans-serif");
    font-weight: bold;
}

/* Bold Italic Weight */
@font-face {
    font-family: "myArial";
    src: url("./fonts/Arial-Bold-Italic.ttf"), local("sans-serif");
    font-weight: bold;
    font-style: italic;
}

/* Italic Weight */
@font-face {
    font-family: "myArial";
    src: url("./fonts/Arial-Italic.ttf"), local("sans-serif");
    font-weight: normal;
    font-style: italic;
}

/* Regular Weight */
@font-face {
    font-family: "goodTimes";
    src: url("./fonts/Times-New-Roman.ttf"), local("serif");
}

/* SemiBold (600) Weight */
@font-face {
    font-family: "goodTimes";
    src: url("./fonts/Times-New-Roman-Bold.ttf"), local("serif");
    font-weight: 600;
}

/* Bold Weight */
@font-face {
    font-family: "goodTimes";
    src: url("./fonts/Times-New-Roman-Bold.ttf"), local("serif");
    font-weight: bold;
}

/* Bold Italic Weight */
@font-face {
    font-family: "goodTimes";
    src: url("./fonts/Times-New-Roman-Bold-Italic.ttf"), local("serif");
    font-weight: bold;
    font-style: italic;
}

/* Times Italic Weight */
@font-face {
    font-family: "goodTimes";
    src: url("./fonts/Times-New-Roman-Italic.ttf"), local("serif");
    font-weight: normal;
    font-style: italic;
}

body {
    margin: 0;
    overflow: hidden;
    background: #ffffff;
}

.cursive-font {
    font-family: "Chancery";
    color: #ffffff;
}

.sans-serif-font {
    font-family: "myArial";
    color: #ffffff;
}

.bold {
    font-weight: bold;
}

.italic {
    font-weight: normal;
    font-style: italic;
}

.bold-italic {
    font-weight: bold;
    font-style: italic;
}

.serif-font {
    font-family: "goodTimes";
    color: #ffffff;
}

#defaultCanvas0 {
    margin: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lucky-layer {
    text-align: center;
    position: absolute;
    color: black;
    width: 100%;
    height: 15%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

#lucky-message {
    width: 47%;
    margin: auto;
    display: block;
    font-size: 2em;
}

@media only screen and (max-width: 600px) {
    #lucky-message {
        width: 88%;
        font-size: 1.2em;
    }
}

.lucky-button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    min-width: 117px
}