/* Main Section */

main{
  font-family: 'Montserrat', sans-serif;

  margin: 0;
  padding:0;
}

.content{
  /* gives the content a margin from the bottom and top*/
  margin-top: 5%;
  text-align: justify;
  /*allows me to restrict how small the image gets without destroying its dimensions */
  min-height: 20em;
  max-height: 50vh;
}
/* surrounds all the content in the main part of the page */
.content_wrapper{
  background-color: #f5f5f5;

  width:100%;
  display:grid;
  justify-content: center;

}

.main_wrapper_div{

  width: 80vw;

  /*breaks the main container into two equal columns  */
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: .5fr 1fr;
  /*justifies the content in the middle of their respective columns */
  justify-content: center;
  /*variable definition is in navbar.css */
  color:var(--main-text-color);

}

/*styles the decription portion of the main content*/
.profile_desc{
  /* stops the container from getting any smaller than 18 em, which is the same as the image*/

  grid-row: 2;
  /* puts the description into the second grid column*/
  grid-column: 1;
  /* this makes it so when there is overflow, a scrollbar will appear and allow the user to scroll through the information*/
  overflow: auto;
  font-size: calc(.7vh + .7vw + 5px);

}

.profile_pic{
  /*sets the image into the first column */
  grid-row:1;
  grid-column: 1;
  width:20%;
  height:20%;
  margin-left:40%;
}
.profile_pic .self_picture{
  /* This allows me to edit the dimensions of the actual image content*/

  height:100%;
  /*stops the image from covering the entire container and ruining its proportions*/
  width:100%;
  border-radius:15px;
  /*cover fills the image to its container*/
  object-fit: cover;
  border: .15em solid #191919;
}

/* if the screen gets smaller than 650px implement these styling changes */
@media screen and (max-width: 650px) {

  .content{
    /* make each row of content 80vw */
    width: 80vw;
    /* helps center the content*/
    margin-left: auto;
    margin-right: auto;

  }



  .main_wrapper_div{
    /* changes the grid formation into 1 column and 2 rows*/
    display:grid;
    grid-template-columns: 1fr;
    /*this sets the size of each row, the second row can be larger due to more content being in it*/
    grid-template-rows: 1fr 1fr;
    max-height:none;
  }

  /* change the profile pic to the first row */
  .profile_pic{
    /*sets the picture into the first column first row*/
    grid-column: 1;
    grid-row: 1;

    max-height: 50vh;
  }
  /*  change the description to the second row */
  .profile_desc{
    /*sets the description into the second row*/
    margin-top: 15px;
    grid-column: 1;
    grid-row: 2;
    text-align: justify;
    /* this makes the overflow visible and no longer hides it or adds a scroll bar*/
    overflow: visible;
    font-size: 1rem;
  }


}