/* css reset rule */

* {
    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: #9db4ab;
    color: #071013;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


/* group selector - styles different elements the same */
header, main, footer {
    margin: 50px auto; /*center block elements - 100px top and bottom, auto left and right */
    width: 500px;
    padding: 10px;
}


header {
    /* border: 50px solid #222; */ /*short hand version of the border declarations */
    text-align: center;
    border-width: 10px;
    border-color: #222 #555 /* red green purple */;
    border-style: solid /* double dashed dotted */;
}



main {
    border: 10px solid #222;
}



footer {
    border: 10px solid #222;
}

.myImage {
    border: 10px solid teal;
    /* margin: 50px; */ /* not necessary when using postion declaration */
    /* float: left; floating an object pushes it to the side so other content wraps around */
    width: 350px; height: 290px;
    overflow: hidden; /* hides any part that spills out of the parent container */
    position: fixed; bottom: 40px; left: 50%;   /*position point is the bottom-left corner of the object */ /* risk of messed up content when resizing windows */
    transform: translateX(-50%) rotate(-5deg); /* slides the object to the left by 50% of the objects width */
    box-shadow: 4px 5px 4px #222;
    border-radius: 35px;
    transition: .5s;
      
}

.myImage:active {
    /* transform: translateX(-880px); */
    transform: translateX(-50%) rotate(0deg);
    width: 90%; height: 90%;
}



/* descendant selector */
.myImage img {
    width: 100%; /* the image width is 100% of its parent's width */
    height: 100%; /* risk of distorting image */
}