/* Add screen styles below */
a.active {
    font-weight: bold;
}


:root{
    --paddingamt: 18px;
    --padding2: 38px;
    --txtcolor: #ffffff;
    --fontmain: 24px;
    --fonthero: 56px;
}


body{
    margin: 0 auto;
    margin-block: 0;
    background: #1C2D5B;
    color: var(--txtcolor);
    font-family: "Copperplate Gothic";
    font-weight: bold;
    font-size: var(--fontmain);
}


header{
    background: #B8BFC7;
    color: #000000;
}


h1{
    margin: 0;
    padding: var(--padding2);  /*38px*/
    font-size: var(--fonthero); /*56px*/
    letter-spacing: 3px;
}


h2{
    font-size: var(--fonthero); /*56px*/
    padding: var(--paddingamt); /*18px*/
    text-align: center;
    margin: 2.5% 20%; /*top&bottom 2.5|right&left 20*/
    letter-spacing: 2px;
}


#about{
    display: grid;
    grid-template-columns: .25fr .25fr .75fr; /*col 1: .25 unit|col 2: .25 unit|col3: .75 unit*/
    grid-template-rows: .2fr 1fr; /*row 1: .25 unit|row 2: 1 unit*/
    column-gap: 50px;
    row-gap: 0;
    margin: 0 5% 2.5% 10%; /*margins go clockwise => top: 0|right: 5|bottom: 2.5|left: 10*/
    padding: 1em;
}


#about img{
    width: 90%;
}


.grid{
    margin:0;
    font-weight: normal;
    margin-block: 0;  /*not sure why I have to set margin block again*/
    display: inline-flex; /*elements take up only what they need to
    and sit on same line as other elements*/
}


.grid:nth-child(1)
{
    grid-row: 1 / 3;
    grid-column: 1 / 3;
} /*photo starts in column & row 1 and ends column & row 3*/


.flexbox{
    display: flex;
    align-items: flex-start; /*content goes to the start of their 
    container (text to the top of their cell in this case)*/
    justify-content: center; /*content is centered w/in flexbox*/
    margin-block:0; /*setting margin block works here*/
}/*create flex box for h2&p*/

h3{
    font-size: 2em; 
    font-weight: normal;
    margin-block: 0;
    line-height: 40px;
}


p{
    font-weight: lighter;
    font-size: 22px;
    word-spacing: 5px;
    letter-spacing: 1px;
    line-height: 28px;
}