body{
    background-color:rgb(231, 240, 243);
    color: darkslateblue;
    font-family: "Chakra Petch", sans-serif;
}
/* serif
sans-serif
monospace
cursive
fantasy
*/

p{
    /*border expects border-width, border-style, and border-color */
    border:10px dashed red;
    padding: 20px;
    margin: 60px auto;
    max-width: 600px;
}
.banner{
    background-color:rgb(246, 247, 186);
    font-family: "Libre Barcode 128 Text", system-ui;
    font-size:150px;
    text-align:center;
    color:red;
    border: 5px dashed;
    padding: 20px;
    margin: 50px auto;
}
p:hover {
background-color:chartreuse;
}
h1 {

    text-decoration:underline ;
}
img{
    border: 30px dashed chartreuse;
    max-width: 100%;
}

summary{
    padding: 10px;
    cursor:pointer;
}

div{
    background-color:cadetblue;
}
.test{
    background-color:crimson;
}
#special{
    background-color:blue;
}
#special{
    background-color:chartreuse;
}
.small{
    font-size:70%;
    font-style: italic;
    letter-spacing: 10px;

}
.big{
    font-size: 200%;
    font-weight:bolder;
    letter-spacing: 6px;
}
.circle{
    
    width: 300px;
    height: 300px;
    background-color: red;
    border-radius: 100%;
    margin:10px auto;

}
/* margin:
1 value- all around
2 value- top/bottom, left/right
 4 values- top, right, bottm, left */