/* Custom properties set that can be used in the entire design and layout, unless set differently, it also allows me to be consistent in my design*/
:root {
--navyblue: #0f0930;
--black: #000000;
--white: #ffffff;
--aqua: #31a6aa; 
--lightblue: #73a9c2;
--font1: 'Arial';
--font2: 'Serif';
}
   
/* removing default styling */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0; }

/* header formatting */
  header {
    background-color:#758da3; 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-weight:bold;
    padding:20px;
  
  }

  /* styling the name   */
  header h1{

    color:var(--navyblue);
    font-size:40px;
    /* font-weight:bold; */
    background-color:#aaa2a2;
    padding:10px;
    border:5px solid #aaa2a2;
    /* box-shadow: 4px 4px 6px #0f0930; */
    box-shadow: 5px 5px 6px rgba(128, 12, 12, 0.89);
      }
       
   h2{ 
    font-size:45px;

   }
/* anchor <a> formatting */
   header a{
    font-style: var(--font1);
    font-size: 24px;
    color: var(--navyblue);
    font-weight: bold;
  }
   
  /* 
  header nav {
    margin:20px;} 
  */
 header nav ul  {
padding-top: 15px;
margin-top:15px;
margin-bottom: 20px;
margin-right:20px;
margin-left: 20px;
/* float:left; */
font-family: var(--font1);
display:flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
        
        }
    
/* styling links in the header */
header nav ul li a {
padding: 8px;
font-size: 28px;
margin: 20px 20px 0 0;
font-weight: bold;}
 /*header hover formatting */ 
header nav ul li a:hover {
background: var(--lightblue);
color: var(--white);
border-radius: 10px;
      }

/* general format of body */
 body {
  font-family: var(--font2);
  color: var(--navyblue);
  background-color: var(--lightblue);}

/* setting main background */
/* main{
background-color: var(--lightblue);} */


  /* formatting and adding image and  quote */
 .backgroundimg{
background-image: url('../assets/images/web-developer-portfolio-png.png');
height:500px;
background-size: cover;
background-position: center;
display:flex;
align-items: center;
justify-content: space-around; }

/* avatar setting */

.backgroundimg img{

    height:350px;}

    /* .float-left{
float:left;}
.float-right{
    float:right;} */

/* formatting blockquote element inside the respective class */

.backgroundimg blockquote{
    font-size: 32px;
    display:flex;
    flex-flow:column;
    justify-content:right;
    text-align:justify;
    color:var(--white);}

.backgroundimg blockquote span{

  font-size:36px;}
 
/*  general format of sections*/

section {
  background-color:var(--lightblue);
  /* padding: 20px;*/ }

/* styling subheadings like about me work etc. */

.subheading{
border-right: 5px solid var(--navyblue);
text-align:center;
/* padding-right: 36px; */
min-width:20%;
max-width:20%;
min-height: 100%;
/* text-decoration:dashed;} */
/* vertical-align: middle;} */}

.subheading h2 { 
  font-size:40px; }

/* formatting about me section*/

.aboutme{
display:flex;
align-items: stretch;
justify-content: space-between;
padding-top:30px; }

.aboutme p  {
    padding: 0 30px;
    line-height:1.6;
    font-size: 22px;  
    width: 90%;
    text-align: justify;
  }
   
/* end of about me formatting */
    
/* formatting my work section */

.work{
    display:flex;
    justify-content:space-between;
    /* flex-direction: column; */
    /* align-items: center;*/
    padding: 30px 0px; 
    background-color: var(--white) ; }

 .work h2 {
  color:crimson; /*distinct color for work to stand out being the main part of the webpage*/
 }

/* creating a grid layout to view projects */

.gridsection{
  display:grid;
  /* align-content: center; */
  width: 70%;
  grid-template-columns: repeat(2,1fr); /* 2 columns and width we want in fraction unit*/
  grid-template-rows: repeat(4,1fr);/* 4 rows and width we want in fraction unit*/
  gap: 10px;}
  
  /*The grid wrapping plays an important part in the designing layout of a webpage.
  It aligns grid content within a central wrapper, while letting items to break out and align to the edge of the containing element, which is section in this case.*/

  .wrapper {
  display:flex;
  justify-content:center;
  width:80%;
  height:500px; 
  /* width: 100%; */
  /* padding: 10px;} */}

/* formatting the project work section - on the right */

.work-projects{
  display:flex;
  /* justify-content:flex-end; */
  align-items:flex-end;
  border: solid;
  color:var(--navyblue);
  background-size:cover;
  background-position: center;
  opacity: 0.5;
  text-decoration: none;
  margin:4px;
}

/* project hover format */
.work-projects:hover{
  opacity: 1.0; }

/* end of creating a project grid/section */

/* loading projects (load future projects here */
.project-oddquoteout{
  background-position: 52% 4%;
  grid-column: 1/3;
  grid-row: span 2;
  background-image: url("../assets/images/OQO-KE.png");

}

.library-project{

/* background-position:15% 50%; */

background-image: url("../assets/images/digitalLibrary.jpg");

}

.project-oddquoteout-T{
  font-family: 'Quicksand', sans-serif;
  background-color: rgb(236, 163, 115);
  color: var(--navyblue);
  padding:8px; 


}

.project3{
  background-image: url("../assets/images/helloWorld.png");
  /* background-position: 60% 50%;  */}

.project4{

  background-image: url("../assets/images/CSS-Cheat-Sheet-4.jpg");
  /* background-position: 60% 50%;  */ }

.project5{

  background-image: url("../assets/images/javascript-iterate-array.jpg");
  background-position: 60% 50%; }

/* project label on the left side on the top of project column*/

.project-title{
  background-color: rgb(36, 137, 177);
  color: var(--navyblue);
  padding:8px; 

  /* align-self: flex-start; */
  /* flex-flow: column-reverse; */}

/* end of work section formatting */

/* formatting contact me section using the footer element  */
    
  footer {
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 30px; 
    margin-bottom:30px; /*note to self - margin top will make the links appear to the very end*/
    text-align: center;
  }
  
/* footer content setting */
.footer-content{
  padding:12px;
  display:flex;
  width:80%;
  justify-content:center;
  align-items: center;
font-weight: bold;
}


.contact-means{
  width:60%;
}

/* footer links listed as a row */

footer ul{
display:flex;
flex-wrap: wrap;
list-style-type: none;
justify-content: space-evenly;
align-content:center;
font-size:28px;
font-weight: bolder;
text-decoration:underline;
/* padding:15px; */
/* border-radius: 12px; */
}

/* footer links formatting */
footer ul li a {
  text-decoration: none;
  color:var(--navyblue);
  /* padding-left: 0;
  padding-right: 30px; */
  margin-left: 92px;
  margin-right:60px;
  font-weight: bold;}

/* hover formatting for links in contact me */

 footer ul li a:hover{
 background-color: var(--navyblue);
 color:var(--white);
 /* padding-left: 0;
 padding-right: 0; */
 border-radius: 10px;

}

/* end of formatting contact me section  */

/* MEDIA QUERY FOR: TABLET SCREENS AND SMALLER */
@media screen and (max-width: 768px) {
    .backgroundimg blockquote {
        font-size: 26px;
        padding-right: 18px;
    }
    
    .backgroundimg blockquote {
        font-size: 32px;
    }

    .subheading h2 {
        font-size: 35px;
    }

    .aboutme p {
        font-size: 14px;
        padding:12px;
        line-height: 1.6;
    }
}

/* MEDIA QUERY FOR MOBILE PHONE SCREENS AND SMALLER */
@media screen and (max-width: 575px) {
    header {
        justify-content: center;
        padding: 20px;
    }

    header nav ul {
        min-height: 80px;
    }

    .backgroundimg {
        flex-direction: column;
    }

    .aboutme {
        flex-direction: column;
    }

    .subheading {
      padding:0;
      border-bottom: 6px solid #520808;
      border-right:none;
      text-align: center;
      min-width: 100%;
      max-width: 100%;
    }

    .aboutme p {
      width: 100%;
      padding: 15px;
      font-size: 16px;
      line-height: 1.6;
    }

    .work {
        flex-direction: column;
        padding: 30px 0;
    }

    .wrapper {
        width: 100%;
        padding: 10px;
    }
    
    .gridsection {
        width: 80%;
   
    }

    footer {
        flex-direction: column;
    }

    footer ul {
        flex-direction: column;
    }

    .footer-content {
        width: 100%;
    }

    footer ul li {
        display: flex;
        padding: 10px;
        text-align: center;
    }
    
}