@import url('../styles/imageFrame-pc.css');
@import url('../styles/footer.css');
@import url('../styles/header.css');
@import url('../styles/nav.css');
@import url('../styles/work-in-progress');
@import url('../styles/cv-doc-page.css');

/* Author: L.Abu-Jaber
   Date: 04/2023 
   Description: Portfolio site to show current projects

   Contents:
    1. GLOBAL SETTINGS (29)
    2. TYPOGRAPHY (59)
    3. LAYOUT - MAIN COMPONENTS (145)
    4. LAYOUT - GENERAL REUSABLE COMPONENTS (185)
    4.1 GENERAL CONTAINERS (189)
    4.2 TEXT CONTAINERS (242)
    4.3 IMAGE CONTAINERS (332)
    5. PERSONAL PROJECTS (PP) COMPONENTS (354)
    6. UTILITIES (458)
    7. BUTTONS (480)
    8. ANIMATIONS (507)
    9. MEDIA QUERIES (688)
    # Note - line numbers are approx.
*/


/* ==================
* 1. GLOBAL SETTINGS
===================== */
/* use with Main and home html */
:root {
    --box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    --char-multiplier: 0.39dvw;
    --char-multiplier-nav: 0.29dvw;
    --focus-colour: 0 0 1px 2px rgb(234, 174, 61);
    --background-light: rgb(237, 241, 247);
    --background-main: rgb(250, 250, 250);
}

* {
    margin: 0;
    box-sizing: border-box;
}

html {
    color-scheme: normal;
    font-size: clamp(1rem, 1.2dvw, 1.45rem);
}

body {
    font-family: 'Nunito', 'Libre Franklin', sans-serif;
    line-height: 1.5;
    background-color: var(--background-main);
    font-weight: 400;
}

/* ==================
* 2. TYPOGRAPHY
=================== */
/* font styling */
h1 {
    text-align: center;
    font-size: calc(1rem + var(--char-multiplier));
}

/* h2 default, no additional styling */
h3 {
    background: linear-gradient(to right, green, rgb(2, 203, 103));
    font-size: calc(1.6rem + var(--char-multiplier));
    font-family: Arial;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*p {
    color: #302f2f;
}*/
#p6 {
    margin: 0;
    padding: 0;
    color: black;
    font-weight: 400;
}

/*general link styles for all pages*/
ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

li {
    text-align: center;
    flex: 3;
}

/*class for font awesome icons*/
.user {
    /*flex-shrink and grow 1, flex-basis 0*/
    flex: 1;
}

a {
    display: inline-block;
    width: fit-content;
    color: white;
    padding: 5px;
    text-decoration: none;
    text-align: center;
    font-size: calc(0.75em + var(--char-multiplier));
}

/*font awesome icons*/
i {
    width: 16px;
    color: rgb(234, 174, 61);
    transform: scale(1.5);
    margin: 0.5rem;
}

/* highlight active links on hover */
li a:hover:not(.active) {
    transition: all 500ms ease-in-out;
    transform: scale(1.05);
    color: white;
}

em {
    color: rgb(255, 115, 0);
}

li i:hover:not(.active) {
    color: white;
}

/* Used for name on home nav */
.italText {
    font-style: italic;
}

/* ================================
* 3. LAYOUT - MAIN COMPONENTS
================================ */

/* repeated base elements for each page */
.pageTitle {
    width: 100%;
    height: fit-content;
    font-size: calc(2.5rem + var(--char-multiplier));
    color: white;
    text-align: left;
    padding-left: 20px;
}

.pageTitle p {
    margin: 0;
    padding: 0;
    background-color: #666666;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255, 255, 255, 0.5) 0px 3px 3px;
}



.stickyColourChange1 {
    background-color: rgb(37, 123, 147);

}

.stickyColourChange2 {
    background-color: rgb(28, 129, 115);
}

.stickyColourChange3 {
    background-color: rgb(14, 168, 32);
}


/* ========================================
* 4. LAYOUT - GENERAL REUSABLE COMPONENTS
======================================== */

/* =========================
* 4.1 GENERAL CONTAINERS
========================== */
.wrapper,
.wrapper2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 2rem;
}

.wrapper-grid-2-col {
    background-color: red;
    display: grid;
}

.background-light {
    background-color: var(--background-light);
}

/* col1 used in each project page */
.col1 {
    width: 100%;
    min-height: 20dvh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
    align-content: center;
    padding: 0 10dvw;
}

/* box to contain links to zip file and github repos in degree projects*/
.colSpacer {
    width: 100%;
    min-height: 6dvh;
    margin: 1rem auto 3rem auto;
    text-align: center;
    align-items: center;
    padding: 0 5px;
    border-radius: 20px;
}

.colSpacer.line {
    border: 5px solid;
    border-color: gold;
}

.colSpacer.linearGradient {
    border: 3px solid;
    border-image-source: linear-gradient(145deg, gold, red, gold);
    border-image-slice: 1;
}

/* ============================================================
* 4.2 TEXT CONTAINERS 
* - used in all pages with either textBox or text-container
============================================================= */
/* general text box container */
.textBox {
    text-align: center;
    width: 100%;
    padding: 10px 20px;
}

.textBox p {
    color: #302f2f;
}

/* used for intro on home */
.textBox--Left {
    content: "";
    text-align: justify;
    padding: 10px 20px;
    margin: 30px 30px;
}

/* divider at end of each degree project with different content */
/* can't use ::before or ::after as col1 used elsewhere 
and different content in each */
.textBox--Divider {
    width: 100%;
    text-align: center;
    padding: 0 0 5px 0;
    margin-bottom: 20px;
    background-color: #ff6a06;
    text-shadow: rgba(255, 255, 255, 0.5) 0px 3px 3px;
}

.textBox--Divider p {
    color: rgb(238, 10, 10);
}

.text-container {
    max-width: 600px;
    height: auto;
    text-align: justify;
    padding: 0.25rem;
    margin: 0.5rem auto;
    border-radius: 3px;
    background-color: transparent;
}

.text-container p {
    color: #302f2f;
}

.text-container.dp {
    max-width: 100%;
}

/* for each project title */
.title {
    width: 100%;
    height: fit-content;
    font-size: calc(1.5rem + var(--char-multiplier));
    color: white;
    text-align: left;
    margin: auto;
}

/* cards in home page and cv for skills etc */
.card {
    width: 100%;
    display: flex;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
    margin: 2px;
    background-color: white;
}

.card-title {
    min-width: 30%;
    padding: 5px;
    color: white;
    font-style: oblique;
    display: flex;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    background-color: rgb(67, 98, 155);
    border-radius: 5px;
}

/* ============================================================
* 4.3 IMAGE CONTAINERS 
* - used in all pages with either textBox or text-container
============================================================= */
/* general elements for re-use over any page */
img {
    max-width: 100%;
    display: block;
    margin: auto;
    box-shadow: var(--box-shadow);
    border-radius: 8px;
}

/*image cards */
/* personal projects */
.imageCase.pp {
    max-width: 600px;
    margin: 1rem auto;
}


/* ====================================
* 5. PERSONAL PROJECTS (PP) COMPONENTS 
* - mainly for gallery displays
=====================================*/
.subtitle {
    font-size: calc(1.125rem + var(--char-multiplier));
}

/* racing game image display */
.img-RacingGame {
    background-color: transparent;
    width: fit-content;
    margin: 10px auto 10px auto;
    border-radius: 3px;
    display: flex;
    flex-direction: row;
    padding: 5px;
    justify-content: space-between;
    align-items: first baseline;
}

.img-RacingGame img {
    padding: 5px;
}

/* word guess game expanding gallery */
.gallery-container {
    display: flex;
    margin-bottom: 1rem;
    flex-direction: row;
    width: 100%;
    padding: 4% 2%;
    box-sizing: border-box;
    height: fit-content;
}

/* Gallery image behaviour */
.slide {
    flex: 1;
    overflow: hidden;
    transition: 0.5s;
    margin: 0 2%;
    line-height: 0;
}

.slide>img {
    width: 200%;
    height: calc(100% - 10vh);
    object-fit: cover;
    transition: 0.5s;
    border-color: white;
    border-style: solid;
    border-width: 5px;
}

.slide>span {
    font-size: calc(1rem + var(--char-multiplier));
    display: block;
    text-align: center;
    height: 40px;
    padding-top: 20px;
}

.slide:hover {
    flex: 1 1 50%;
}

.slide:hover>img {
    width: 100%;
    height: 100%;
}

/* An additional responsive grid gallery container for django pics. 
Added for mobile viewing as light-box is not effective */
.imgGridWrap {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0.5rem 1%;
}

.gallery {
    display: none;
    gap: 0.25rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    transition: all 500ms ease-in-out;
}

.imgGridWrap a:hover {
    filter: brightness(90%) drop-shadow(5px 5px 5px gray);
}

.btn-gallery:hover {
    box-shadow: 0 4px 8px 0 greenyellow;
    background-color: rgb(14, 168, 32, 0.6);
}



/* ==============
* 6. UTILITIES 
===============*/
/* show and hide additional descriptive text in text-containers*/
.show-text {
    display: block;
}

.hide-text {
    display: none;
}

.toggle-icon {
    cursor: pointer;
}

.fa-arrow-down,
.fa-arrow-up {
    margin: 0 2px;
    transition: transform 0.3s;
    transform: scale(1);
}

/* ===============
* 7. BUTTONS
-============== */
/* Return to top of section anchor */
.scrollToTopButton {
    position: relative;
}

.btn-gallery {
    margin: 1rem auto;
    background-color: white;
    border-style: none;
    cursor: pointer;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    padding: 0.5rem;
    transition: all 300ms ease-in;
}

.btn-gallery:active {
    outline: 0.2px solid rgb(255, 115, 0);
    border-radius: 6px;
    box-shadow: var(--focus-colour);
    transition: all 1s ease-in-out;
}

/* ================
* 8. ANIMATIONS
================= */
/* css animation element fade in courtesy of 
h ttps://alvarotrigo.com/blog/css-animations-scroll/*/
.reveal {
    position: relative;
    opacity: 0;
}

.reveal.active {
    opacity: 1;
}

.active.fade-bottom {
    animation: fade-bottom 1s linear;
}

.active.fade-left {
    animation: fade-left 1s ease-in-out;
}

.active.fade-right {
    animation: fade-right 1s ease-in-out;
}

.active.fade-in {
    animation: fade-in 1s ease-in-out;
}

.active.img-animate {
    animation: img-animate 3s ease-in-out;
}

@keyframes img-animate {
    0% {
        transform: scale(1.0) rotate(-2deg);
        opacity: 0;
    }

    100% {

        opacity: 1.0;
    }
}

@keyframes fade-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-right {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-away {
    0% {
        opacity: 1;
    }

    40% {
        transform: translateY(50px);
        opacity: 1;
    }

    100% {
        transform: translateY(-50px) rotateY(180deg);
        opacity: 0;
    }

    /*100% {
            animation: fade-in 2s ease forwards;
        }*/
}

/* toggle between fades for fun*/
.fade-out {
    cursor: pointer;
    position: relative;
    animation: fade-right 2s ease forwards;
}

.click-fade-out {
    animation: fade-away 3s ease forwards;
}

/*changing element's colour on interval*/
/*using background colour scheme in js file*/
.nav.nav-bg-colour1 {
    background-color: rgb(46, 117, 182);

}

.nav.nav-bg-colour2 {
    background-color: rgb(12, 68, 124);
    text-shadow: white 0px 0px 16px;
    text-transform: uppercase;
}

.nav.nav-bg-colour3 {
    box-shadow:
        inset 0.5px 0.5px 10px 0px rgb(114, 174, 231);
    background: linear-gradient(190deg,
            rgba(49, 116, 178, 0.9),
            rgba(11, 90, 163, 0.85),
            rgba(49, 116, 178, 0.9))
}

/*latop tilted left*/
.header.bg-header1 {
    color: black;
    text-shadow: rgba(214, 214, 214, 0.5) 0px 1px 5px;
    /*background-image: url(/pics/Banner-lapimage.png);*/
    background: linear-gradient(to bottom,
            rgba(46, 117, 182, 0.6),
            rgba(46, 117, 182, 1)),
        url(/pics/my-laptop2.jpg) no-repeat;
    background-size: cover;
}

/*hexagon shapes*/
.header.bg-header2 {
    /*background-image: url(/pics/Banner-lapimage.png);*/
    color: rgb(240, 240, 240);
    background: linear-gradient(to bottom,
            rgba(12, 68, 124, 0.6),
            rgb(12, 68, 124)),
        url(/pics/linkedin-banner2.jpg) no-repeat;
    background-size: cover;

}

/* laptop tilted right*/
.header.bg-header3 {
    color: rgb(0, 0, 0);
    background: url(/pics/Banner-lapimage.png);
    background-size: cover;
}

/* mini-projects section */
.hide-section {
    display: none;
}

/* ##################
* 9. MEDIA QUERIES
################## */
@media (width >=1000px) {
    .wrapper {
        padding: 2rem 10% 2rem 10%;
    }

    .textBox--Left {
        padding: 20px 150px;
    }
}

@media (width >=600px) and (width < 1000px) {
    .img-RacingGame {
        flex-direction: column;
        align-items: center;
    }

    .gallery-container {
        flex-direction: column;
    }
}

@media (width < 600px) {
    .img-RacingGame {
        flex-direction: column;
        align-items: center;
    }

    .col1 {
        padding: 0;
    }

    .gallery-container {
        flex-direction: column;
    }

    /*.header img:hover {
        transform: scale(0.7);
    }*/

    .textBox--Left {
        padding: 0 0;
    }
}

@media (prefers-reduced-motion) {
    html {
        scroll-behavior: none;
    }
}