/* reset rule */

* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

body {
    background-color: paleturquoise;
    padding-bottom: 500px;
}

/*

CSS ruleset aka rule

selector {
    dedlaration 1;
    property1: value;
    property2: value value value;
    }
*/

/* type selector */
h1 {
    text-align: center;
    color: navy;
    border-color: darkred;
    border-width: 9px;
    border-style: groove;
    margin: 24px; /* outside of the border */
    padding: 16px; /* inside of the border */
    /* create stripes as a background */
    background-image: 
        repeating-linear-gradient(140deg,yellowgreen, yellow 51px, burlywood 53px, greenyellow 80px);
    position: relative; /* if you want to position a child */
}

/* descendant selector */
h1 span {
    position: absolute; bottom: -0.1px; right: 1px;
    letter-spacing: 2px;
}

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

#div2 {
    /* -webkit-transform-origin: 100% 100%; Was trying to stretch the box here, no such luck, lol */
    width: 200px; height: 200px; 
    border: 8px solid darkred;
    /* border-radius: 50%; makes it round */
    transform: rotate(45deg); 
}

/* class selector */

.but1 {
    padding: 12px 16px; /* top-bottom, left-right */
    background-color: #eee; color: #222;
    border: 2px solid darkred;
    margin: 8px;
}

.but2 {
    display: block; /* makes them block elements */
    width: 100px; height: 100px;
    border-radius: 50%;
    margin: 10px auto;
    background-color: #ffc;
    text-align: center; /* horizontal centering */
    line-height: 97px; /* vertical centering */
}

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;
}