body {
    background-color: lightblue;
    color:darkslategray;
    font-family: "Gruppo", sans-serif;
}

p {
   
    
    color: darkslategrey;
       /*border expects border-width, border-style, border-color */
    border: 2px dashed ;
 padding: 10px;
 margin:20px;
 margin-left: 100px;
 width :600px;
}

.banner {
     background-color: aliceblue;
     font-size: 30px;
     text-align:center;
     color:midnightblue;
     border: 5px dotted;
     padding: 20px;
     margin: 50px;
     font-family: "Danfo", serif;
}

p:hover {
    background-color: antiquewhite;
}


h1{
     color: darkslategray;
     text-decoration:underline;
}

li {
   color: rgb(122, 92, 122);
}

img {
    border:10px inset rgb(145, 180, 192);
width: 230px; 
height: 500px;
    max-width: 100%;
}

details {
    background-color: cornflowerblue;
    
     margin-bottom: 30px;
}

summary {
    background-color: lightsalmon;
    cursor: pointer;
   padding: 10px;
}

summary:hover {
    background-color: antiquewhite;
}

a{
    color:red;
    text-decoration: line-through;
}

a:hover {
    color:bisque;
    font-size:30px;
    background-color: cornflowerblue;
}


div {
    background-color:lightblue;
}

.test {
    background-color: rgb(4, 241, 122);
}

#special {
    background-color: crimson;
}

#special {
    background-color: darkmagenta;
}

.small {
    font-size: 60%;
    font-style: italic;
    letter-spacing: 10px;
}

.big {
    font-size: 200%;
    font-weight: bold;
    letter-spacing: 6px;
}

.circle {
    width:300px;
    height:300px;
    
   
    margin: 0 auto;
}

/* 
margin:
1 value= all around;
2 values= top/bottom, left/right;
3 values= top, right, bottom, left;
 */