@charset "UTF-8";
/* CSS Document used for Web Project 1 
Author: Ashley Crawford
Course: ITWP 1000
File: styles.css*/

h1 {
    text-align: center;
    font-size: 45px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #0e0e50; /* dark blue */
    margin-top: 5px; 
    margin-bottom: 5px;    
    }

p{
    text-align: center;
    font-size: 16px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #000000; /* black */
}

h2{
    text-align: center;
    font-size:20px;
    font-style: italic; 
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #020214d2; /* medium blue */   
    }


h3{
    text-align: center;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 12px;
}

h4{
    text-align: center;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 16px;
    font-weight: bold; 
}
h5{
    text-align: center;
    font-size: 25px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #0e0e50; /* dark blue */
    margin-top: 5px; 
    margin-bottom: 5px;
    padding-top: 5px;    
}


.button{
    display: block;
    height: 25px;
    width: 150px;
    background: #b6bdee;
    border: 2px solid #0e0e50;
    color: black;
    text-align: center;
    font: bold 20px "Trebuchet MS", Arial, sans-serif;
}
    
table{
    margin: auto;
}   
  
.responsive{
    border: 1px solid #51471A;
    border-radius: 10px;
} 

.education{
    text-align: center;
    font-size:12px;
    font-family: "Trebuchet MS", Arial, sans-serif;;
    font-style: italic; 
    color: #2123c2; /* cool blue */ 
}
    
footer{
    text-align:center;
    margin-top: 10px;
}

.space{
    margin-bottom: 20px;
}


figure{
    display: table; 
    margin: auto;
    padding-top:8px;
  }

figcaption{
    display: table-caption;
    caption-side: top;   
    border: #0e0e50;
    background-color: rgb(133, 174, 235);
    color: rgb(0, 0, 0);
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 2px;
    text-align: center;
    width: 500px;
  }

@media only all and (max-width: 550px) {
    img{
        display: none;
    }
}