* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}


/* phone */

body {
        background-color:#5ac3b5;
      }

      header {
         text-align: center;
         border: 2px solid #454545;
         background-color: #F4F0E4 ;
         color: black;
         font-family:"IBM Plex Serif", serif;
         letter-spacing: 4px;
         padding: 8px;
      }


       h1 span {
         color: #286058; 
         font-family: cursive;
      }

    section {
        padding: 10px;
    }

    .page_body {
      display: flex;
      flex-flow: row wrap;
     }
     
      nav {
      text-transform: uppercase;
      text-align: center;
      min-height: 40px;
      flex-basis: 100px;
      flex-grow: 1;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-evenly;
      gap: 5px;
      padding: 10px 8px;
      }

      nav a {
        color: black;
        padding: 5px 10px;
        text-decoration: none;
      }

      nav a:hover {
        background-color: #F4F0E4; 
        color: black;
        border: 2px solid black;
        padding: 0px;
      }


      article {
      min-height: 700px;
      flex-basis: 340px;
      flex-grow: 1;
      padding: 10px 20px;
      }

      article > figure {
        margin: 8px;
        background-image: url(../images/dakotah-photo.jpeg);
        background-size: cover;
        background-position: center;
        aspect-ratio: 1.25;
      }
      
       figure {
        border-radius: 15%;
         margin-left: auto;
         margin-right: auto;
         display: block;
         box-shadow: -6px 10px 7px #F4F0E4;
    }

  
     h2 {
      color: #F4F0E4;
      padding: 10px;

     }

     p {
      padding: 10px;
      line-height: 1.5;
     }

     .webdev p {
      padding: 20px;
     }

      footer {
     border-top: 4px solid rgb(26, 1, 26);
     margin-top: 400px;
     background-color: #F4F0E4; 
     padding: 20px;
     text-align: center;
    }

    .hometown #deschutes {
    
      margin: 20px 60px 5px 0px;
      line-height: 1.5;
     }

     .hometown #bend {
      margin: 20px 10px 0px 60px;
      line-height: 1.5;
      
     }
     .hometown #bachelor {
      float: right;
      margin: 20px 60px;
     }
     
     .hometown footer {
      margin-top: 800px;
     }



    /* landscape tablet and bigger */

 @media screen and (min-width:1020px) {
     
  article {
    flex-basis: 400px;
  }

    article > figure {
      margin: 16px;
      width: 260px; 
      aspect-ratio: 1;
      float: left;
     }

  .nav_bar {
    flex-grow: 0;
  }


  nav {
    border: 2px solid #F4F0E4;
    margin: 10px;
  }

 }