@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 5
   Coding Challenge 2
   
   Filename: code5-2_layout.css

*/
html {
   width: 100%;
}
body {
   min-width: 10px;
   width: 95%;
   margin: 0px auto;
}

body > h1 {
   font-size: 3em;
   text-align: center;
   font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
   color:white;
   text-shadow: 0px 0px 1px teal, 0px 0px 5px teal, 0px 0px 20px teal;
   letter-spacing: 0.1em;
   margin: 10px 0px;
}

div.card {
   border: 1px solid rgb(81, 81, 81);
   border-radius: 20px;
   box-shadow: inset 0px 0px 3px teal, inset 0px 0px 10px teal, inset 0px 0px 20px teal, 0px 0px 25px 1px black;
   margin: 15px;
   height: 150px;
}

div.card header {
   background-color: rgba(179,244,227,0.3);
   width: 100%;
   height: 30px;
   border-bottom: teal 4px solid;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;   
}
div.card header h1 {
   font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
   color: teal;
   text-align: center;
   font-size: 1.5em;
   line-height: 1em;
   margin: 5px 0px;
}

div.card img {
   display: block;
   width: 60px;
}

div.card footer {
   font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";   
   color: teal;
   background-color:rgba(240,237,206,0.4);
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   font-size: 0.9em;
   font-weight: bold;
   text-align: center;
   height: 25px;
   width: 100%;
   border-top: 3px solid teal;
}