* {
    margin: 0; padding: 0; border: 0; 
    box-sizing: border-box; /* ensures elements will be the exact width you specify, even if you use borders */
}

body {
    background-color: rgb(192, 211, 45);
    color: #071013;
    font-family: Verdana, Tahoma, sans-serif;

}

nav {
    text-align: center;
    font-size: 200%;

}

/* group selecors - styles different elements the same */

header, main, footer{
    margin: 10px auto; /* center block elements - 100px top and botom, auto left and right */
    
}
header {
    border: 10px dashed #222; 
    text-align: center;
    border-width: 20px;
    border-color: rgb(174, 28, 182) rgb(77, 23, 104); /* this is a shorthand property when they are in line like this */
    /* border-style: dashed; */
    width: 500px;

}

main {
    border: 10px solid #222;
    text-align: center;
    width: 300px;

}

footer {
    border: 10px solid #222;
    text-align: center;

}

img {
    width: 100%;
    

}

.button1 {
    display: block; /*make them into block elements */
    background-color: rgb(248, 248, 161);
    color: rgb(204, 161, 212);
    font-weight: bold;
    text-decoration: none; /* get rid of the underline */
    border-radius: 30px;
    padding: 12px; /* space between tex and border */
    width: 550px;
    margin-bottom: 20px;
    text-align: center; /* center the text within a block */
    text-shadow: 5px 5px 5px black;
    
    margin: 20px auto; /* center a block element on the page */

    /* transition effect for button hover */
    transition: all .3s ease-in-out;

}



/* class selector */

 .myimage {
    border: 20px solid #222; 
    margin-left: 20%;
    /* float: left;  floating an object pushes it to the side so other content wraps around */
    width: 500px;
    
    /* overflow: hidden;  hides any part that spills out of the parent container */
    /* transform: translateX(-50%); rotate:(-5deg); slides the object to the left by 50% of the object's width */
    /* box-shadow: 4px 5px 4px #222;  horizontal, vertical, blur, color */
 }
/* descendent selector */