html {
    font-size: 10px;
    background-color: rgb(225, 246, 255);
}

body {
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1;
}

/* rem sizing */
h1 {
    font-size: 2rem;
    /*10px is basic unit. 2rem -> 2*10px = 20px*/
    text-transform: uppercase;
    text-shadow: 3px 2px 4px rgb(194, 11, 214);
}

h2 {
    font-size: 1.5rem;
    /*1.5rem -> 1.5*10 = 15px*/
}

h3 { 
    font-size: 1.17rem;
}

h1, h2, h3 {
    text-align: center;
}

p {
    font-size: 1.2rem;
    line-height: 1.5rem;
    /* 1.5rem * 10px = 15px*/
}

.pre-wrap {
    white-space: pre-wrap;
}

.pre-line {
    white-space: pre-line;
}

#ugly {
    text-shadow: 2px 2px 1px rgb(30, 204, 102);
    text-align: right;;
}

#pretty {
    font-family: 'Bradley Hand';
    font-size: 2rem;
    background-color: whitesmoke;
}

#stars {
    text-shadow: 1px 1px 1px yellow;
}