*,
*::before,
*::after {
    box-sizing: border-box; 
}

/* CUSTOM PROPERTIES - CHANGE THESE FOR MY OWN DESIGN */

:root {
    --ff-primary: 'Roboto', sans-serif;
    --ff-secondary: 'Roboto', sans-serif;

    --fw-light: 100;
    --fw-midlight:300;
    --fw-reg: 400;
    --fw-bold: 900;
    
    --clr-light: #fff;
    --clr-dark: #303030;
    --clr-accent: #66CED6;
    
    /* FONT SIZES - MOBILE */
    
    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;
    --fs-smallbody: 0.8125rem;
    
    
    /* PROPERTIES FOR SHADOWS */
    --bs: 0.25em 0.25em 0.75em rgba(0,0,0,.25),
        0.125em 0.125em 0.25em rgba(0,0,0,.15);
    
}



/* FONT SIZES - DESKTOP */


@media (min-width: 800px) { 
    :root { 
    --fs-h1: 4.5rem;
    --fs-h2: 3.7rem;
    --fs-h3: 1.5rem;
    --fs-body: 1.125rem;
    --fs-smallbody: 0.8250rem;
    }
    
}

strong {font-weight: (var--fw-bold)}





/* Smooth Scroll Effect */

html {
  scroll-behavior: smooth;
}



/* GENERAL STYLES */

body {
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 0;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    line-height: 1.6;
    
}

section {
    
    padding: 5em 2em;
}

img {
    display: block;
    max-width: 100%;
    
}

/* TYPOGRAPHY */

h1,
h2,
h3 {
    line-height: 1.0;
    margin: 0;
}

h1 { font-size: var(--fs-h1) }
h2 { font-size: var(--fs-h2) }
h3 { font-size: var(--fs-h3) }




/* HEADER AND NAVIGATION */

header { 
    background: var(--clr-light);
    text-align: center;
    position: relative;
    z-index: 999;
    width: 100%;    
}


/* Navigation Toggle Button */

.nav-toggle {
    display: none;
}

.nav__toggle--label {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 1em;
    height: 100%;
    display: flex;
    align-items: center;
}


.nav__toggle--label span,
.nav__toggle--label span::before,
.nav__toggle--label span::after {
    display: block;
    background: var(--clr-dark);
    height: 2.5px;
    width: 2em;
    border-radius: 2px;
    position: relative;
}

.nav__toggle--label span::before,
.nav__toggle--label span::after {
    content: '';
    position: absolute;
    
}

.nav__toggle--label span::before{
    bottom: 7px;
    
}

.nav__toggle--label span::after{
    top: 7px;
    
}


/* LOGO - STYLING */

.logo {
    margin: 10px;
    max-width: 60px; 
}



/* NAVIGATION STYLING */

nav {
    position: absolute;
    text-align: center;
    top: 100%;
    left: 0;
    background: var(--clr-light);
    width: 100%;
    /* NAVIGATION TRANSFORM SYSTEM */
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
}

/* STYLING NAVIGATION LIST */

.nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
    
}

.nav__item {
    margin-bottom: 1em;
    margin-left: 1em;  
}

/* NAVIGATION TEXT STYLING */

 nav a {
    color: var(--clr-dark);
    text-decoration: none;
    font-size: var(--fs-smallbody);
    text-transform: uppercase;
    font-weight: var(--fw-midlight);
    
    /* NAVIGATION TRANSFORM SYSTEM */
    opacity: 0;
    transition: opacity 150ms ease-in-out;
    

}


/* NAVIGATION HOVER OPACITY EFFECT - NOT WORKING RIGHT NOW?? */

.nav a:hover { opacity: .7;

}


/* NAVIGATION TRANSFORM SYSTEM */

.nav-toggle:checked ~ nav {
 transform: scale(1,1);   
}

.nav-toggle:checked ~ nav a {
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;
}


/* NAVIGATION BAR/LOGO GRID LAYOUT */

@media screen and (min-width: 800px){
    .nav__toggle--label {
        display: none;
    }

    /* SPACING BETWEEN WORDS ON HEADER */
    header {
        display: grid;
        grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
    }    
    
    .logo {
        grid-column: 2 / 3;
    }
    
    /* APPARENTLY 'ALL' ISN'T FULLY IMPLEMENTED IN INTERNET EXPLORER, SO ILL NEED TO TEST THAT */
    
    nav {
        all: unset;
        grid-column: 3 / 4;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    
    .nav__list {
        display: flex;   
    }
    
    
    .nav__item {
        margin-left: 3em;
        margin-bottom: 0;
    }
    
    
    nav a {
        opacity: 1;
    }
    
}

/* END OF NAVIGATION AND HEADER SECTION */





/* ABOUT ME */

.section__title--about {
    font-size: var(--fs-h3);
    color: var(--clr-dark);
    font-weight: var(--fw-reg);
    text-transform: uppercase;
    position: relative;
    text-align: center;
}


.section__title--about::after {
    content:'';
    display:block;
    width: 10em;
    height: 1px;
    margin: 0.5em auto 0em; 
    background: var(--clr-dark);
    opacity: 0.25;
}


.about-me__body {
    color: var(--clr-dark);
    font-weight: var(--fw-midlight);
    font-size: var(--fs-smallbody);
    text-align: center;
}



.section__subtitle--about {
    text-align: center;
    color: var(--clr-dark);
    font-size: var(--fs-body);
    font-weight: var(--fw-midlight);
    text-transform: uppercase;
    position: relative;
}





.about-me {
    max-width: 1000px;
    margin: 0 auto;
    
}

/* ABOUT ME - IMAGE BOX SHADOW */

.about-me__img {
    box-shadow: var(--bs);
}

@media (min-width: 600px){
    .about-me {
        display: grid;
        grid-template-columns: 1fr 300px;
        grid-template-areas: 
            "title img"
            "subtitle img"
            "text img";
            grid-column-gap: 2em;
    }
    
    .section__title--about{
        grid-area: title;
    }
    
    
    .section__subtitle--about {
        grid-area: subtitle;
    }
    
    .about-me__img {
        grid-area: img;
        position: relative;
        z-index: 2;
    }
}

.section__subtitle--about {
    text-transform: uppercase;
    font-size: var(--fs-body);
}






/* SERVICES SECTION */

.my-services { 
     background-color: var(--clr-dark);
     text-align: center;
}


.section__title--services {
   font-size: var(--fs-h3);
    color: var(--clr-light);
    font-weight: var(--fw-reg);
    text-transform: uppercase;
    position: relative;
    text-align: center;
}

.section__title--services::after {
    content:'';
    display:block;
    width: 10em;
    height: 1px;
    margin: 0.5em auto 1em; 
    background: var(--clr-light);
    opacity: 0.25;
}

.services {
    margin-bottom: 3em;
}


.skills__subtitle {
    padding-top: 2em;
    color: var(--clr-light);
    font-size: var(--fs-body);
    font-weight: var(--fw-midlight);
    text-transform: uppercase;
}


.service p {
    font-size: var(--fs-smallbody);
    font-weight: var(--fw-midlight);
}


.service {
    max-width: 500px;
    margin: 0 auto; 
    color: var(--clr-light);
    font-size: var(--fs-smallbody);
    
}



@media (min-width: 800px) {
    .services {
        display: flex;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
 
    }
    
    .service + .service {
     margin-left: 2em;
        
    }
}



/* PORTFOLIO SECTION */

.my-portfolio {
    padding-top: 10em;
    background-color: var(--clr-light);
    color: var(--clr-light);
    text-align: center;       
}


.section__title--work {
    text-transform: uppercase;
    font-size: var (--fs-body);
    color: var(--clr-dark);
    font-weight: var(--fw-reg);
    text-align: center;
}


.section__subtitle--work {
    text-transform: uppercase;
    font-size: var(--fs-smallbody);
    color: var(--clr-dark);
    font-weight: var(--fw-midlight);
    text-align: center;
    padding-bottom: 5em;
    
}


/* 'SAM WESTON'S SPACE' UNDERLINE */

.section__title--work::after {
    content:'';
    display:block;
    width: 10em;
    height: 1px;
    margin: 0.5em auto 1em; 
    background: var(--clr-dark);
    opacity: 0.2;
}


/* PORTFOLIO GRID - EACH GRID HAS A MINIMUM WIDTH OF 300PX */


.portfolio {
    display: grid;
    grid-gap: 1.25em 1.25em;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    max-width: 66em; 
    margin: 0 auto;
}


/* Portfolio Label */

.portfolio-item-description {
    padding: 0.5em;
    text-align: center;
    z-index: 5;
    background: var(--clr-light);
    color: var(--clr-dark);
    position: relative;
    font-size: var(--fs-smallbody);
    text-transform: uppercase;
    font-weight: var(--fw-midlight);
}


/* Controls Underline from text */

.portfolio__item {
  text-decoration: none;  
}


/* PORTFOLIO HOVER EFFECT AND OUTLINE (REMOVE OUTLINE EFFECT IF NOT WANTED) */

.portfolio__item {
    background: var(--clr-accent);
    overflow: hidden;  
}

.portfolio__img {
    transition: 
        transform 750ms cubic-bezier(.5, 0, .5, 1),
        opacity 250ms linear;    
}


.portfolio__item:focus {
    position: relative;
    z-index: 2;  
}

.portfolio__img:hover,
.portfolio__item:focus .portfolio__img{
    transform: scale(1.1);
    opacity: .75; 
}



/* CONTACT PAGE */

.section__title--contact {
    font-size: var(--fs-h3);
    color: var(--clr-dark);
    font-weight: var(--fw-reg);
    text-transform: uppercase;
    position: relative;
    text-align: center;
}


.section__title--contact::after {
    content:'';
    display:block;
    width: 10em;
    height: 1px;
    margin: 0.5em auto 0em; 
    background: var(--clr-dark);
    opacity: 0.25;
}


.contact__body {
    color: var(--clr-dark);
    font-weight: var(--fw-midlight);
    font-size: var(--fs-smallbody);
    text-align: center;
}

.contact-detail {
    margin-bottom: 5em;
}


.section__subtitle--contact {
    text-align: center;
    color: var(--clr-dark);
    font-size: var(--fs-body);
    font-weight: var(--fw-midlight);
    text-transform: uppercase;
    position: relative;
}


.contact-me {
    max-width: 600px;
    margin: 0 auto;
    
}


.contact-social-list__link:hover { opacity: .7;
}


.contact-social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 1em 0 0;
    padding: 0;
}


.contact-social-list__item {
    margin: 0 1em;
    margin-bottom: 1em;
}

.contact-social-list__link {
    padding: .5em;
}














/* FOOTER */

.footer {
    background: #111;
    color: var(--clr-accent);
    text-align: center;
    padding: 2.5em 0;
    font-size: var(--fs-smallbody);
    font-weight: var(--fw-midlight);
}

.footer a { color: inherit;
text-decoration: none;
}

.footer__link {
    font-size: var(--fs-smallbody);
    font-weight: var(--fw-midlight);
}




/* FOOTER HOVER, OPACITY, AND DECORATION/UNDERLINE EFFECTS */

.footer__link:hover,
.social-icon-img:hover { opacity: .7;
}


.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
}


.social-list__item {
    margin: 0 .5em;
    margin-bottom: 1em;
    margin-top: 0.5em;
}

.social-list__link {
    padding: .5em;
}



.social-icon-img {
    max-width: 35px;
}

/* Footer Logo */

.logo-footer {
    max-width: 80px;
    margin: 1em;
    display: inline-block;    
}






/* PORTFOLIO ITEM INTRO */

.intro {
    
position: relative;
}


.section__title--intro {
font-size: var(--fs-h3);
    color: var(--clr-dark);
    font-weight: var(--fw-reg);
    text-transform: uppercase;
    text-align: center;
    }


  .section__title--intro::after {
    content:'';
    display:block;
    width: 10em;
    height: 1px;
    margin: 0.5em auto 1em; 
    background: var(--clr-dark);
    opacity: 0.2;
}


.section__subtitle--intro {
    text-transform: uppercase;
    font-size: var(--fs-smallbody);
    color: var(--clr-dark);
    font-weight: var(--fw-midlight);
    text-align: center;
    
}


@media (min-width: 600px) { 
    .intro {
        display: grid;
        width: min-content;
        margin: 0 auto;
        grid-column-gap: 1em;
        grid-template-areas:
        "img title"
        "img subtitle";
        grid-template-columns: min-content max-content;
        max-height: 250px;
    }  

      .section__title--intro {
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 1;
        text-align: center;
        position: relative;
        width: calc(100%);
    }
    

    
    .section__subtitle--intro {
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 2;
        text-align: center;
        position: relative;
        width: calc(100%);
    }
            
}












/* Portfolio-Item-Individual */


.section__title--about {
    font-size: var(--fs-h3);
    color: var(--clr-dark);
    font-weight: var(--fw-reg);
    text-transform: uppercase;
    position: relative;
    text-align: center;
}



.portfolio-item-individual {
    padding: 0 2em 2em;
    max-width: 800px;
    margin: 0 auto; 
}


.portfolio-item-individual p {
    font-size: var(--fs-smallbody);
    color: var(--clr-dark);
    font-weight: var(--fw-midlight);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2em;
}


/* MULTIPLE IMAGES TOGETHER STYLING */

.column {
  float: left;
  width: 50.0%;
  padding: 5px;
}

/* Clear floats after image containers */

.row::after {
  content: "";
  clear: both;
  display: table;
}

@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}



/* PORTFOLIO ITEM INDIVIDUAL PARAGRAPH STYLING */



.portfolio-img-caption {
    padding: 1em;
    padding-bottom: 2em;
    text-align: center;
    z-index: 5;
    background: var(--clr-light);
    color: var(--clr-dark);
    position: relative;
    font-size: var(--fs-smallbody);
    text-transform: uppercase;
    font-weight: var(--fw-midlight);
}