/* var used in order to homogenise the branding colours for ease of use  */
  @import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');

  /* These are the brand colours used throughout the doc. us var to colour in order to match  */
:root{
    --cream: #f4f3e8;
    --taupe: #e2d8c2;
    --zest: #ebfc72;
    --sky: #abbac0;
    --black: #000;
    --ZC-50-gradient: linear-gradient(to bottom right,#f4f3e8 50% ,#ebfc72, #f4f3e8);
    --CZT-gradient: linear-gradient(#f4f3e8, #ebfc72);
    --ZT-gradient: linear-gradient(to bottom left, #e2d8c2 50%, #ebfc72 , #f4f3e8);
    } 
    /* gradient is linear with 3 colours, teh first colour goes to a hard 50% of teh page 
    (in the direction of top left to bottom right) then the gradient between the last 2 colours begins */

/* My universal selector covers font family, main bg colour, and border box sizing  */
*{
    font-family: Roboto, helvetica, century-gothic, dejavu-sans, sans-serif;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
   }

/* generic brand bq colour set, width at 100% for all contained content. hyphens used to stop text 
from breaking when resizing */
body{
    background-color: var(--cream);
    width: 100%;
    hyphens: none;
     
}

/* setting generic img width at 100% at top of doc (overwrideen by more speciific classes/ids this corrects images from exceeding flex bounds*/
img {
    width: 100%;
    border-radius: 10%;
    }       

/* nav uses flex box, with logo at start(left) and links back to top of the page. Other nav links to the end (right) which take us to their respective sections
fixed nav keeps nav at the top of the page when scrolling
have given a z-index to stop hover effect from overlapping nav bar- nav bar stays on top of all content */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--sky); 
    width: 100%;
    padding: 20px;
    position: fixed;
    z-index: 1;
    /* position: fixed;  nav will always stay at the top of the doc */
   }

   /* defines nav logo height */
nav img {
    height: 75px;
    width: auto;
}

nav ul {
    display: flex;
    list-style-type:none;    
}

/* percentages used here made design responsive and stopped nav from dropping out of flow */
nav ul li{
    margin-left: 5%; 
    margin-right: 5%;   
}

/* anchor elements within nav list assigned font styles, colours and size, underline of link removed, letter spacing increased*/
nav ul li a{
    font-family: 'Yeseva One', Helvetica, serif; 
    font-weight: 500;
    font-size: 30px;
    text-decoration: none;
    letter-spacing: 2px;
    color: var(--zest);
    }

    /* pseudo element on nav list items to adjust colour and glow (shadow) when hovering*/
nav ul li :hover {
    color: var(--black);
    text-shadow: 0px 0px 5px var(--cream), 0px 0px 10px var(--zest), 0px 0px 50px var(--zest); 
}

/* h1 elements assigned font styles, colours and padding, all centred*/
h1 {
    font-family: 'Yeseva One', Helvetica, serif; 
    font-weight: bold;  
    font-size: 30px; 
    color: var(--black);
    padding: 25px;
    text-align: center;
 }

    /* emphasise text NAME */
 span{
    font-weight: 900;
        
 }
/* article element to take up half of the flex container*/
article {
    width: 50%;
    text-align: center; 
}

/* footer, flex box and styled */
footer{
    display: flex;
    flex-wrap: wrap;
    background-color: var(--sky);
    align-items: center;
    padding: 5%; /* maintains responsive layout with percentage */
    justify-content: space-between;
    
}

/* image width/height needs to be stated within flex box in order to contain it- otherwise it is HUGE */
footer img{
    width: 10%;
    }

/* styling contact info, removed bullet points, centred */
footer li {
    font-size: 20px ;
    text-align:center;
    list-style-type:none; 
    width: auto ;  
}

/* anchor styled to remove underline and add a different colour to link */
footer a {
    text-decoration: none;
    color: var(--taupe);
}

/* hover shifts the colour to emphasise link*/
footer a :hover{
    color: var(--black);
}

/* padding large prevents fixed header from covering content, have also added wrap reverse so image seamlessly 
wraps when moving into mobile/tablet mode as per media query */
.about {
    padding: 50px;
    padding-top: 150px; 
    display: flex;
    flex-wrap:wrap-reverse;
    justify-content: space-around;
    align-items: center;
    background: var(--ZC-50-gradient);
        }

 /* box shadow used for glow fx, in order: x offset, y offset, blur size, spread size, color.
 transition effects makes responsive resizing look nicer */
 .about img {
    border-radius: 50%;
    width: 40%;
    height:40%;
    box-shadow: 0 0 50px 0px var(--zest); 
    transition: .5s ease;
         
    }

/* flex container/row/wrap/centred with gradient bg */
.portfolio {
    padding: 50px;
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    background: var(--CZT-gradient);
   
}

/* hover over linked portfolio pieces transition makes hover effect look nicer*/
 .portfolio li :hover {
    filter: brightness(1.2);
    border-radius: 0;
    transition: .5s ease; 
  }
   
 
/* flex container lives inside portfolio/row/wrap/centred have removed bullet points of contained list item, this is for MAIN portfolio image */
.image-gallery-01{
    display: flex;
    flex-wrap: wrap;
    list-style-type:none; 
    padding: 20px;
    justify-content: center;
    align-items: center;
}

/* flex container lives inside portfolio/row/wrap/centred seperate to 01 gallery, have removed bullet points of contained lists, this creates a new flex box for the sub-images */
.image-gallery-02{
    display: flex;
    flex-wrap: wrap;
    list-style-type:none; 
    padding: 20px;
    justify-content: space-between; 
    align-content: space-between;
}

/* styling flex box items for sub images within flex container */
.image-gallery-02 li{
    width: 50%;
    padding:3px;
}

/* contact section bg*/
.contact {
    background: var(--ZT-gradient);
    padding-bottom: 25px;  
}

.contact li{
    font-size: 20px ;
    text-align:center;
    list-style-type:none; 
    width: auto ; 
}

/* contact links formatted eith an id so they dont look so bad
tried to use contact class a but it was slow to load so added id */
#social-link a {
    color: var(--black); 
    text-decoration: underline;
    font-weight: 900;
}
/* change of colour wen hovering over link */
#social-link a :hover{
    font-weight: 900;
    color: var(--sky); 
}
/* media query supports responsive design at mobile and tablet break point
snaps to new dimensions. using tablet sizing for btoh tablet and mobile verticle */
@media screen and (max-width:767px) { 

    
 /* image pops to center on tablet/mobile */
    nav {    
        justify-content: center;
        }

 /* nav drops off on tablet/mobile */
    nav ul {
        display:none; 
    }
 /* article centres on tablet/mobile */
    article {
        width: 100%;
        padding: 0%;
        }

/* footer adjusts for tablet/mobile to clear space */
    footer{
        width: 100;
        justify-content: center;
    }
    footer ul{
        display: none;
    }

    footer img{
        width: 20%;
        }
    
    

/* profile photo reorganises to top on mobile, everything center */
    .about {
        padding: 50px, 0px, 0px, 0px;
        flex-direction: column-reverse;     
        justify-content: center;
        width: 100%;
    }

/* image adjusted to suit mobile design */
    .about img {
    border-radius: 50%;
    width:100%;
    height:auto;;   
        
    }

 /* flex box adjusted to suit mobile design and prevent breaking of entire layout*/           
    .portfolio {
        padding: 10px;
        justify-content: center;
        width: 100%;
    }
}