/* reset rule */
* {
    margin: 0; padding: 0; border: 0;
}

body {
    background-color:aqua;   
    padding-bottom: 180px;
}

/*
CSS ruleset aka rule

selector {
    declaration 1;
    property1: value;
    property2: value value;
    }
*/
/* type selector */
h1 {
    text-align:center;
    color: rgb(124, 18, 101);
    border-color:rgb(56, 36, 168);
    border-width: 8px;
    border-style: groove;
    margin: 24px; /*outside of border*/
    margin-bottom: 100px;
    padding: 16px; /*inside of border*/
   /* create stripes as a background */
   background-image:
    repeating-linear-gradient(120deg, green, green 30px, pink 31px, pink 60px, #222 61px);
    position:relative;
}

/*descendent Selector */
h1 span {
    position: absolute;bottom: -100px; right: 100px;
}

/* ID selector and group selector */
#div1, #div2 {
   width:600px; height: 100px;
   border:20px solid darkred;
   margin: 50px auto; /* top, right, bottom, left*/
}

#div2 {
    width:200px; height: 200px;
    border:8px solid darkred;
    /* border-radius: 50%; */
    transform: rotate(40deg);
}
/* Class selector */
.but1{
    padding:12px 16px; /* top-bottom, left-right */
    background-color: #eee; color:#222;
    border: 2px solid darkred;
    margin: 8px;
}

.but2 {
    display: block;
    width: 100px; height:100px;
    border-radius: 50%;
    margin: 10px auto;
    background-color: #ffc;
    text-align: center;
    line-height: 100px;

}
dt {
    font-weight: bold;
    margin-left: 100px;
    font-size: 120%;
    margin-top: 20px;
}

dd{
    margin-left: 30px;
    font-style: italic ;
}
dd ul {
    margin-left: 30px;
}