* {
    box-sizing: border-box;
}

body { padding-top: 70px; }

html {scroll-padding-top: 70px}

h1 {
    color: black;
}

/* on PC */
@media screen and (min-width: 800px) {
    .panel {
        width: 80%; 
        margin: auto; 
        /* border: 3px solid black; */
    }
    
    .image_text {
        display:flex;
        width: 100%; 
        /* border: 2px solid blue; */
    }
    
    .featured_image{
        /* width: 20%;  */
        width:200px;
        display: flex;
        align-items: center; 
        padding: 10px;
        /* border: 1px solid green */
    }
    
    .description{
        width: 80%; 
        display: flex;
        align-items: center; 
        /* border: "1px solid red"; */
        padding: 10px;
    }

    .headshot {
        float: right; 
        width: 25%; 
        height: auto; 
        margin: 10px;
    }
}
    
/* on Mobile */
@media screen and (max-width: 800px) {
    .panel {
        width: 100%; 
        margin: auto; 
        /* border: 3px solid black; */
    }
    
    .image_text {
        /* display:flex; */
        width: 100%; 
        /* border: 2px solid blue; */
    }
    
    .featured_image{
        width: 50%; 
        display: flex;
        align-items: center; 
        padding: 10px;
        margin: auto;
        /* border: 1px solid green */
    }
    
    .description{
        width: 100%; 
        display: flex;
        margin: auto;
        align-items: center; 
        /* border: "1px solid red"; */
        padding: 10px;
    }

    .headshot {
        width: 50%; 
        height: auto; 
        margin: auto;
    }
}