style.css

* {
    margin: 0;
    padding: 0;
}



img {
    width: 100%;
    height: auto;
}

/* NAVBAR CSS */
nav{
    padding-left:4em;
    padding-right: 4em;
    /* TODO: figure out no longer staying fixed */
    position: fixed;
    width: 100%;
    top:0;
    left:0;
    z-index:10;
    background-color: black;
  }

  nav ul {
    margin:0;
    padding:0;
    display:flex;
  }
  nav li{
    padding: 1em 0;
    list-style-type: none;
    padding: 25px;
    font-size: 1.7em;
  }
  
  nav li a {
    color:white;
    font-weight: 600;
    opacity: 80%;
    text-decoration: none;
    transition: .3s;
    font-family: 'futura-pt', sans-serif;
    font-weight: 400;
  }
  
  nav li a:hover {
    color:#F46262;
    opacity: 1;
    text-decoration: none;
  }

  /* HEADER CSS */
.header {
    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    background-color: black;
}


.welcome{
    margin-top: 25vh;
    text-align: left;
    margin-left: 100px;
    font-weight: 500;
    font-size:4em;
    color:white}

#changingword {
    color:#F46262;
      } 

/* IMAGE GALLERY CSS */
.image-gallery {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr minmax(350px, 1fr)  minmax(350px, 1fr) minmax(350px, 1fr) 1fr;
    grid-template-rows: auto;
    grid-gap: 20px;
    padding-top: 200px;
    padding-bottom: 200px;
    grid-template-areas:
    ". a b c ."
    ". d e f ."
    ;
}

.box-styling {
    height: 350px;
    background-color: rgb(110, 110, 110);
    /* clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); */
  }

.box-wrapper{
  height:350px;
  border-radius: 10%;
}
.box1 {
    grid-area: a;
    /* clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); */

}

.box2 {
    grid-area: b;
}

.box3 {
    grid-area: c;
}

.box4 {
    grid-area: d;
}

.box5 {
    grid-area: e;
}

.box6 {
    grid-area: f;
}

.bigText {
    font-size: 2em;
    padding-right: .5ch;
}


/* ABOUT ME CSS*/
.about-me {
    height: 100vh!important;
    background-color: white !important;
    padding: 20vh 50px 0 50px;
    column-count: 2;
}

.about-me img{
  width: 80%;
  border-radius: 8%;
  margin-bottom: 4em;
  margin-left: 3.7em;
  margin-top: 4.5em;
}

.about-me p{
  text-align: left;
  font-size:1.2em;
  line-height: 1.5rem;
  padding-top: 160px;
  font-family: 'futura-pt', sans-serif;
}

.paragraph2{
  text-indent: 2em;
}
/* the span tag that wrap starts off my paragraph */
.bigText {
  font-size:3em;
  padding-right:.5em;
  color: #F46262;
  font-family: 'futura-pt', sans-serif;
  font-weight: 700;
}

/* CONTACT CSS */
.contact {
    display: grid;
    justify-items: center;
    font-family: 'futura-pt', sans-serif;
    align-items: center;
    height: 25vh !important;
    padding-bottom: 50vh;
    background-color: #F46262!important;
    grid-template-columns: 3fr minmax(2fr, 1fr) minmax(2fr, 1fr) 3fr;
    grid-template-rows: auto;
    grid-template-areas:
    ". title title ."
    ". logo wrapper ."
    ;
}

.contact-title {
    font-size: 2em;
    grid-area: title;
    font-family: 'futura-pt', sans-serif;
    font-weight: 700;
    color: white;
}

.logo-svg {
    width: 250px;
    grid-area: logo;
}

.contact-wrapper {
    grid-area: wrapper;
    font-size: 1.5em;
    color: white;
    width: 450px;
}

.projectpics {
  padding-top: 1%;
  padding-left: 5%;
  padding-right: 5%;
}

.lifepics {
  padding-top: 5%;
}


.bzybee-title {
  padding-top: 16%;
  padding-bottom: 2%;
  color: #ffce34;
  font-family: 'futura-pt', sans-serif;
  font-weight: 700;
  font-size: 3em;
  text-align:left;
  padding-left: 10%;

}

.life-title {
  padding-top: 16%;
  padding-bottom: 2%;
  color: #f5c6dd;
  font-family: 'futura-pt', sans-serif;
  font-weight: 700;
  font-size: 3em;
  text-align:left;
  padding-left: 10%;
  font-style: italic;
}

.fnf-title {
  padding-top: 16%;
  padding-bottom: 2%;
  color: #42a5dd;
  font-family: 'futura-pt', sans-serif;
  font-weight: 700;
  font-size: 3em;
  text-align:left;
  padding-left: 10%;

}

.futura-title {
  padding-top: 16%;
  padding-bottom: 2%;
  color: #ff0033;
  font-family: 'futura-pt', sans-serif;
  font-weight: 700;
  font-size: 3em;
  text-align:left;
  padding-left: 10%;

}



.project-description {
  color: black;
  text-align:left;
  padding-left: 10%;
  padding-right: 10%;
}

h1 {
  font-size: 1.2em;
  font-family: 'futura-pt', sans-serif;
  font-weight: 400;
}


   /* footer section */
   footer{
    grid-area:footer;
    font-family: 'futura-pt', sans-serif;
  }
  footer p{
    font-size:2em;
  }
  footer li {
    display:inline;
  }
  footer ul {
    max-width: 640px;
    margin: 2em auto;
    padding:0;
    text-align: center;
    display: flex;
    flex-direction: row;
  }
  footer ul li{
    list-style: none;
    align-self:flex-end;
  }
  footer ul li a {
    text-decoration:none;
    color: black;
    transition: .3s;
  }
  footer ul li a:hover {
    text-decoration:none;
    color:#F46262;
  }
  footer svg {
    width:20%;
  }
  footer p{
    font-size: 1em;
  }



  /* MEDIA QUERY FOR SMALL SCREENS */
 @media (max-width:1100px){
    .image-gallery {
      padding-bottom: 0px;
        margin-bottom: 600px;
        grid-template-columns: 1fr minmax(350px, 1fr) minmax(350px, 1fr) 1fr;
        grid-template-areas:
        ". a b ."
        ". c d ."
        ". e f ."
        ;
    }
 }

/* MEDIA QUERY FOR MOBILE */
 @media (max-width:735px){
     nav {
         padding-left: 0;
     }

    .image-gallery {
        padding-bottom: 200%;
        grid-template-columns: 1fr minmax(400px, 1fr) 1fr;
        grid-template-areas:
        ".a."
        ".b."
        ".c."
        ".d."
        ".e."
        ".f."
        ;
    }

    .contact {
        padding-bottom: 200%;
        grid-template-columns: 3fr minmax(2fr, 1fr) 3fr;
        grid-template-rows: auto;
        grid-template-areas:
        ". title ."
        ". logo ."
        ". wrapper ."
        ;
    }
    
 }