/* global props | markup */
* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
}
body {
    font-family: 'Harmattan', sans-serif;
}
section {
    text-align: center;
}
#maps {
    width: 100%;
    height: 350px;
}
#maps a {
    background: none;
    color: #000;
}
/* global containers */
.section__container,
.tickets__container {
    padding: 5px 10px;
}

.section__container a {
    background-color: #333;
    border-radius: 10px;
    border: none;
    color: #fff;
    font-size: 30px;
    height: 100px;
    margin: 10px auto;
    padding: 5px;
    text-decoration: none;
    transition: all 2s ease-in;
    width: 200px;
}

.section__container a:hover {
    text-decoration: underline;
    background-color: rgb(43, 201, 153);
}
.section__container .box__med h4 {
    margin: auto;
    font-size: 30px;
}
#caseID a:hover,
#gall a:hover,
#projects a:hover,
#blogProjects a:hover {
    background-color: rgb(43, 201, 153);
    text-decoration: underline;
}
/* tickets contact info */
.tickets {
    background-color: #333;
    border-radius: 5px 5px;
    margin: 8px;
    padding: 10px;
    transition: all 1.5s;
}
.tickets:hover {
    background-color: rgb(43, 201, 153);
    font-size: 125%;
    transform: scale(1.1);
}
.tickets__container a {
    background: none;
    color: #fff;
    letter-spacing: 2px;
    text-decoration: none;
    transition: all 1.5s;
}
.tickets__container a:hover {
    text-decoration: underline;
}
/* global box positioning props */
.box {
    height: 350px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 1px solid #333;
    margin: auto;
    background: #333;
}
.box__animate {
    background-position: center;
    background-size: cover;
}
.ball__med {
    background: #000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    display: flex;
    height: 250px;
    margin: 10px auto;
    width: 250px;
}
.box__med {
    background: #000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid #333;
    border-radius: 10px;
    height: 250px;
    margin: 10px auto;  
    width: 90%;
}
.box__sml {
    background: #000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    height: 150px;
    margin: 10px auto;  
    width: 150px;
}
    
/* global responsive images */
img {
    height: auto;
    width: 100%;
}

/* global props | headings */
h2 { /* section heading */
    text-decoration: underline;
    letter-spacing: 3px;
}
h3 {
    text-decoration: underline;
    font-weight: bold;
}
#contact h4 {
    text-align: left;
}


/* header + footer props */
.header,
.footer {
    background: #fff;
    height: 30px;
    padding: 8px;
    font-size: 1em;
}
.footer {
    text-align: center;
}
.header a {
    color: #333;
    text-decoration: none;
    padding: 8px;
    font-size: 1em;
    font-weight: bolder;
}
.header a:hover {
    border-bottom: 4px solid rgb(43, 201, 153);
    border-width: 8px;
    color: rgb(43, 201, 153);
    

}
.header .fas {
    color: rgb(43, 201, 153);
    font-size: 14px;
    padding-left: 10px;
}

/* Global props | spans alignment */
.left {float: left;}
.right {float: right;
}


/* site wide banner */
.banner {
    clear: both;  /*clearfix for above span elements */
    color: #fff;
    width: 100%;
    margin: auto;
    background: #333;
    text-align: center;
    margin-bottom: 10px;
}
.banner i {
    padding: 10px;
    color: rgb(43, 201, 153);
    text-decoration: none;
    font-size: 1.2em;
    transition: all 1s ease;
}
.banner h1 {
    text-decoration: underline;
}
.banner h1,
.banner h2 {
    width: 100%;
    color: #fff;
}

/* maps */
/* #maps {
    height: 400px;
    width: 100%;
    background: #333;
} */

/* .tickets__container a {
    background-color: rgb(43, 201, 153);
    border-radius: 10px;
    border: none;
    color: #fff;
    font-size: 25px;
    height: 100px;
    margin: 10px auto;
    padding: 10px;
    text-decoration: none;
    transition: all 2s ease-in;
    width: 200px;
} */


/* case buttons */
/* #projects a,
#galLink a,
#blog a,
#casestudy a,
#devWork a,
#comments a,
#caseID a  {
  background-color: #333;
  border-radius: 10px;
  border: none;
  color: #fff;
  font-size: 25px;
  height: 100px;
  margin: 10px auto;
  padding: 10px;
  text-decoration: none;
  transition: all 2s ease-in;
  width: 200px;
} */
/* case buttons : interactive */
/* #projects a:hover,
#galLink a:hover,
#blog a:hover,
#casestudy a:hover,
#devWork a:hover,
#comments a:hover,
#caseID a:hover {
    background-color: rgb(43, 201, 153);
    text-decoration: underline;
} */


.box,
.box__med {
    display: flex;
}

/* global props | font awesome icons */
#casestudy i {color: rgb(43, 201, 153);}
.fab, .far, .fas {
    font-size: 26px;
    color: #fff;
}
/* project sections website icons */
#projects .fab,
#projects .far,
#projects .fas,
#overview .far {
    color: rgb(43, 201, 153);
    font-size: 26px;
}



/* #devWork .box {
    height: 350px;
} */

/* projects.html JavaScript project props */
.box__js-projects {
    border-radius: 15px;
    height: 200px;
    width: 100%;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}


.box__js-projects h5 {background: rgba(255, 255, 255, 0.2);}

.box__js-projects h5,
.box__js-projects a
{
    color: #FFF;
    font-size: 1.3em;
    text-shadow: 4px 2px rgb(43, 201, 153);
    letter-spacing: 2px;
    text-decoration: none;
    width: 100%;
    transition: all 1s ease-in;
}
.box__js-projects a:hover {
    border-bottom: 4px solid rgb(43, 201, 153);
}

/* case study page banners */
.case__heading {
    height: 20vh;
    background-attachment: top;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}
.case__bottom {
    height: 20vh;
    background-position: bottom center;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}
/* case-[project].html specific props */
/* case preview containers */

/* case study icons */
#overview .fab,
#overview .far,
#overview .fas {
    color: rgb(43, 201, 153);
    font-size: 26px;
}

/* case study [travel brochure] */
.box__trvl-concept {background-image: url("../img/case-study/travelBrochure/xdconcept.JPG");}
.box__trvl1 {background-image: url("../img/case-study/travelBrochure/landing.JPG");}
.box__trvl2 {background-image: url("../img/case-study/travelBrochure/content.JPG");}
.box__trvl3 {background-image: url("../img/case-study/travelBrochure/feature.JPG");}

.box__trvl-html {background-image: url("../img/case-study/travelBrochure/trvl-html.JPG");}
.box__trvl-css {background-image: url("../img/case-study/travelBrochure/trvl-css.JPG");}
.box__trvl-js {background-image: url("../img/case-study/travelBrochure/trvl-js.JPG");}

/* case study [coffee shop] */
.box__coffee-concept {background-image: url("../img/case-study/travelBrochure/xdconcept.JPG");}
.box__coffee1 {background-image: url("../img/case-study/coffeeShop/landing.JPG");}
.box__coffee2 {background-image: url("../img/case-study/coffeeShop/content.JPG");}
.box__coffee3 {background-image: url("../img/case-study/coffeeShop/feature.JPG");}

.box__coffee-html {background-image: url("../img/case-study/coffeeShop/coff-html.JPG");}
.box__coffee-css {background-image: url("../img/case-study/coffeeShop/coff-css.JPG");}
.box__coffee-js {background-image: url("../img/case-study/coffeeShop/coff-js.JPG");}
.box__coffee-test {background-image: url("../img/case-study/coffeeShop/coff-test.JPG");}
.box__coffee-xd {background-image: url("../img/case-study/coffeeShop/xdscreen.JPG");}


/* case-[project].html box images */
.box__book1 {background-image: url("../img/case-study/bookmarkApp/js-icon.JPG");}
.box__book2 {background-image: url("../img/case-study/bookmarkApp/js-input.JPG");}
.box__book3 {background-image: url("../img/case-study/bookmarkApp/css-hover.JPG");}
.box__bookdev {background-image: url("../img/case-study/bookmarkApp/develop.JPG");}
.box__booktest {background-image: url("../img/case-study/bookmarkApp/testing.JPG");}


/* Index.html box background images */
.box__gallery {background-image: url("../img/box-preview/gallery.JPG");}
.box__casestudy {background-image: url("../img/box-preview/casestudy.JPG");}

/* personal projects box backgrounds */
.box__medical {background-image: url("../img/box-Medical.JPG");}
.box__coffee {background-image: url("../img/box-Cafe.JPG");}
.box__tech {background-image: url("../img/box-Tech.JPG");}
.box__travel {background-image: url("../img/box-Travel.JPG");}

.box__project-blog {background-image: url("../img/project-blog.JPG");}

/* projects.html box background images */
/* javascript projects */
.box__bookmark {background-image: url('../img/box-preview/bookmarkApp.JPG');}
.box__weather {background-image: url('../img/box-weather.JPG');}


.box__clock {background-image: url('../img/box-clock.JPG');}

.box__futurama {background-image: url('../img/box-futurama.JPG');}
.box__manager {background-image: url('../img/box-manager.JPG');}

/* hosted websites */
.box__material {background-image: url('../img/box-preview/materialize.JPG');}
.box__holidayspecial {background-image: url('../img/box-preview/holidayspecial.JPG');}
.box__gigabyte {background-image: url('../img/box-preview/gigabyte.JPG');}

#blogProjects .box__js-projects {
    border-radius: 50%;
    height: 350px;
    width: 350px;
}

/* projects.html mos-item background for Grid Elements */
/* grid background props */
.mos-item {
    background-position: center;
    background-origin: border-box;
    background-size: cover;
    height: 350px;
    margin: 0 auto;
    width: 100%;
  }
/* mos-item backgrounds */
.one {background-image: url("../img/grid-gal/grid-item-1.JPG");}
.two {background-image: url("../img/grid-gal/grid-item-2.JPG");}
.three {background-image: url("../img/grid-gal/grid-item-3.JPG");}
.four {background-image: url("../img/grid-gal/grid-item-4.JPG");}
.five {background-image: url("../img/grid-gal/grid-item-5.JPG");}
.six {background-image: url("../img/grid-gal/grid-item-6.JPG");}
.seven {background-image: url("../img/grid-gal/grid-item-7.JPG");}
.eight {background-image: url("../img/grid-gal/grid-item-8.JPG");}
.nine {background-image: url("../img/grid-gal/grid-item-9.JPG");}
.ten {background-image: url("../img/grid-gal/grid-item-10.JPG");}


/* misc props & elements */
/* personal portrait props */
.portrait {
    border-radius: 50%;
    filter: grayscale(100%);
    margin: auto;
    max-width: 250px;
    max-height: 250px;
}

/* case study  */
.accentHeading {
    color: rgb(43, 201, 153);
    text-decoration: underline;
    text-decoration-color: rgb(43, 201, 153);

}
.plink {
    color: green;
    background: none;

    font-size: 0;
}


/* media queries for desktop */
/* desktop props + components:
    Grid photo gallery for devices over 960px in width,
    Animated div.box containers on hover or mouseover,
    Flexbox layout for JavaScript projects
*/
@media screen and (min-width: 960px) {
    /* personal projects box props */
    .box__animate,
    .box__med {
        background-position: top;
        background-size: cover;
        transition: all 3.5s ease;
    }
    .box__animate:hover,
    .box__med:hover {
        background-position: bottom;
        background-size: auto;
    }
    .box {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        border: 1px solid #333;
        border-radius: 10px;
        max-width: 940px;
        width: 750px;
        height: 450px;
    }
    #maps {
        border: 1px solid lightslategray;
        border-radius: 10px;
        height: 470px;
        width: 750px;
        margin: 0 auto;
    }
    .box__js-projects {
        margin: 10px auto;
        max-width: 900px;
        height: 300px;
    }
    img {
        height: 450px;
        max-width: 940px;
        width: 750px;
    }

    /* global desktop props */
    .banner {
        margin: auto;
        width: 100%;
    }
    .flex {
        display: flex;
        margin: auto;
    }
    .flex .box__js-projects {
        width: 100%;
    }
    .footer-left {
        float: left;
    }
    .footer-right {
        float: right;
    }
    .section__container,
    .tickets__container {
        max-width: 900px;
        margin: auto;
    }
    .section__projects {
        width: 100%;
        margin: auto;
    }
    

    /* Specific desktop elements */
    .header a:hover {
        border-bottom: 4px solid rgb(43, 201, 153);
        border-width: 8px;
        color: rgb(43, 201, 153);
        font-size: 1.2em;
    }
    .tickets {
        border: 2px solid #333;
        padding: 10px;
    }
    
    /* Grid props 
        Components: 
        .grid-item .mosaic-container .mos-item
    */
    .grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, 1fr);
        width: 100%;
    }
    .grid-item {
        height: 300px;
        width: 100%;
        background-color: #333;
        background-position: inherit;
        background-size: contain;
        background-position: center;
    }
    /* gallery.html [GRID Gallery] */
    .mosaic-container {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 10px;
        height: 100%;
        width: 100%;
    }
    .mos-item {
        align-items: center;
        color: #000;
        display:flex;
        justify-content: center;
        transition-property: all 2s ease;
        transition-duration: 2s;
        opacity: 0.5;
    }
    .mos-item:hover {
        background-position: center;
        border-radius: 20px;
        transform: scale(1.1);
        z-index: 1000;
        opacity: 1;
    }
    /* Grid mos-item hover props */
    .one,
    .three,
    .five {background-position: top left;}
    
    .two,
    .four,
    .six {background-position: top right;}

    .seven,
    .eight,
    .nine,
    .ten { background-position: bottom right;}
       
    /* Grid-mos Child elements
    Classes: smal, medium, large, wide and tall
    Sizing:  1x1, 2x2, 3x3, 2x3, 3x2  */
    .small {
        grid-row: span 1;
        grid-column: span 1;
        padding: 0;
        margin: 0;
    }
    .medium {
        grid-row: span 2;
        grid-column: span 2;
        padding: 0;
        margin: 0;
    }
    .large {
        grid-row: span 3;
        grid-column: span 3;
        padding: 0;
        margin: 0;
    }
    .wide {
        grid-row: span 2;
        grid-column: span 3;
        padding: 0;
        margin: 0;
    }
    .tall {
        grid-row: span 3;
        grid-column: span 2;
        padding: 0;
        margin: 0;
    }

    /* Case Study, header + footer banner
        Screenshots from created pages */
    .case__heading {
        height: 30vh;
        background-attachment: fixed;
        background-origin: border-box;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
    }
    .case__bottom {
        height: 30vh;
        background-attachment: fixed;
        background-origin: border-box;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

}