@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&family=Fredericka+the+Great&display=swap');

@counter-style emojis {
    system: cyclic;
    symbols: "\1F63A" "\1F49C" "\1F98A" "\1F49C" "\1F427" "\1F49C" "\1F438" "\1F49C" "\1F995" "\1F49C" "\1F9AD" "\1F49C" "\1F98B" "\1F49C";
    suffix: " ";
}

html {
    background-image: url("./images/SealBackground.gif");
    font-family: "Annie Use Your Telescope", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: large;
    text-align: center;
}

ol {
    list-style-type: emojis;
    list-style-position: inside;
    padding: 0;
}

.content, .header {
    padding: 10px;
    margin: 20px;
    margin-right: 15%; 
    margin-left: 15%;
    outline-style: double;
    outline-color: blueviolet;
    background-image: linear-gradient(rgb(238, 126, 255, 0.90), rgb(206, 194, 255, 0.90));
    /* background-color: hsl(240, 100%, 85%, 0.85); */
    border-radius: 12px;
}

.header {
    position: sticky;
    background-image: radial-gradient(rgb(238, 126, 255, 0.80), rgb(206, 194, 255, 0.80));
    font-family: "Fredericka the Great", serif;
    font-weight: 400;
    font-style: normal;
    
}