/* 
  ========================================
            TABLE OF CONTENTS:
   I. VARIABLES
        A) COLORS
  II. GENERIC SITE STYLES
  III. SHARED STYLES
        A) TYPOGRAPHY
            ALL SCREEN SIZES (320-1920+)
            SMALL SCREENS (320-499)
            SMALL & MEDIUM SCREENS (320-849)
            MEDIUM SCREENS (500-849)
            LARGE SCREENS (850-1359)
            LARGER SCREENS (1360-1920+)
        B) PORTFOLIO NAVIGATION
            SMALL & MEDIUM SCREENS (320-849)
            LARGE & LARGER SCREENS (850-1920+)
        C) BUTTONS
            CODEPEN, FEEDBACK, CLASS CENTRAL LIST, BLOG, TWITTER, LINKEDIN BUTTONS
            SUBMIT BUTTON
            BACK TO TOP BUTTON
            TYPOGRAPHY BUTTON
        D) ANIMATIONS
        E) YELLOW WAVES AS BG
            SMALL SCREENS (320-499)
            MEDIUM SCREENS (500-849)
            LARGE SCREENS (850-1359)
            LARGER SCREENS (1360-1920+)
        F) IMAGES SIZING
            HOME
            PROJECTS > FEEDBACK
            ABOUT
            SKILLS
            EDUCATION
            CONTACT
        G) SECTIONS' POSITIONING & SPACING (EXCEPT FOR HOME)
            FLEXBOX FOR MAIN AND SUB SECTIONS
            CHILDREN 100% FLEXBASIS SO ALL BE CENTERED UP TO 1200PX
            MAX WIDTH & HEIGHT, MARGIN FOR SECTIONS / SUBSECTIONS
  IV. CUSTOM STYLES
        A) HOME SECTION
            MEDIUM SCREENS (500-849)
            LARGE & LARGER SCREENS (850-1920+)
        B) PROJECTS SECTION
            SMALL SCREENS (320-499)
                FLIP CARD
                FEEDBACK
                DISPLAY OFF THE MEDIUM, LARGE & LARGER LAYOUT
            MEDIUM - LARGE SCREENS (620-1359)
                DISPLAY ON THE MEDIUM & LARGE LAYOUT
                FLEXBASIS FOR CONSUMED SPACE
                FILLING SPACE IN EMPTY DIVS
                STYLING LANGUAGES LIST & LOGOS, PROJECTS' PREVIEW 
                GRID FOR ARRANGING THE CELLS UNDER PROJECT ARTICLES 
                TEXT ALIGN LEFT FOR PROJ INFO LEFT & RIGHT 
                ADDING PADDING AT ONE SIDE TO PROJ INFOS 
                CENTERING THE PROJ PREVIEW & BUTTON 
            LARGER SCREENS LAYOUT (1360-1920) 
                EVEN PROJECTS MOVE TO LEFT SIDE 
                MARGIN BETWEEN SECTIONS 
        C) ABOUT SECTION
            CODE DESIGN SOLUTION SUB SEC 
            ONE STEP SUB SEC 
            CON-PER-FAI-SUB-SEC 
            LARGER SCREENS LAYOUT (1360-1920) 
        D) SKILLS SECTION
            GAINED SKILLS SUB SEC
            CURRENTLY LEARNING SUB SECTION 
            LARGE SCREEN LAYOUT (1360-1920) 
        E) EDUCATION SECTION
            CLASS CENTRAL LIST SUB SECTION, BLOG TWITTER LINKEDIN SUB SECTION
            LARGE SCREEN LAYOUT (1360-1920) 
        F) CONTACT SECTION
            FORM
            LINKS
        G) FOOTER
            MEDIUM SCREENS (500-849)
            LARGER SCREENS (1360-1920+)
   V. CREDITS FOR RESOURCES USED
	    A) FLIP CARD IN SMALL SCREENS: 
            @w3schools
        B) ANIMATION: 
                @animista
        C) YELLOW WAVES AS BACKGROUND FOR MAIN HEADINGS: 
                @haikei
        D) ICONS / PICTURES / LOGOS: 
                @font awesome
                @canva 
                @github
                @freecodecamp
        E) OFF CANVAS MENU (CSS ONLY):
                @frontend masters
        F) BACK TO TOP BUTTON (CSS ONLY):
                @freeCodeCamp News/Articles
        G) FONT FAMILY:
                @google
        H) BORDER BOX:
                @brumm
        I) DESIGN TOOLS:
                @canva
                @open color
  ========================================
*/ 

/*
  ========================================
  I. VARIABLES:
    COLORS
  ========================================
*/ 
:root {
    --color-white: #FFFFFF;
    --color-different-white: #EDF2F7;
    --color-black: #343A40;
    --color-grey: #737373;
    --color-yellow: #FFF3BF;
    --color-yellow-opacity: rgba(255, 243, 191, 0.8);
    --color-yellow-brighter: #FFE066;
    --color-nav-ul-bg: #1a1a1a;
    --color-nav-li-border: #383838;
    --color-menu-backdrop: rgba(0,0,0,.85);
}

/*
  ========================================
  II. GENERIC SITE STYLES
  ========================================
*/
/* border box to always account border and padding when sizing*/
    html {
        box-sizing: border-box;
        height: 100%;
    }

    *, *::before, *::after {
        box-sizing: inherit;
    }
/* avoiding instant jump to diff sections */
    html {
            scroll-behavior: smooth;
    }

body {
    height: 100%;
    padding: 0;
    margin: 1rem auto;
    background-color: var(--color-white);
    /* to remove horizontal scrolling */
        overflow-x: hidden;
    /*to position top button*/
        text-align: right; 
}

/* since a pure css top button is used I have to adjust the whole content's margin */
.welcome-section {
        margin: 0 1rem -2rem 1rem;
        height: 100vh;
}
@media (min-width:1360px) {
    body {
        background-color: var(--color-white);
    }
    /* to center the content & to add a shadow on the whole content when viewed in a large screen - cool */
        .welcome-section {
            margin: 0 auto;
        }
}

/*
  ========================================
  III. SHARED:
    A) TYPOGRAPHY
  ========================================
*/
/* ALL SCREEN SIZES (320-1920+) */
    /* setting font family & color for all text */
        body {
            font-family: 'Montserrat', Arial, Verdana, "Trebuchet MS", sans-serif;
            color: var(--color-black);
            margin: 0 auto;
            padding-top: 0px;
            margin-top: 0px;
            display: block;
            height: 100vh;
        }
    /* centering all text */
        .welcome-section {
            text-align: center;
            max-width: 1374px;
            background-color: var(--color-white);
        }
    /* align some text */
        .home,
        .about .code-design-solutions-problems-sub-section p,
        .about .one-step-sub-section p,
        .skills .gained-skills-intro-p,
        .skills .currently-learning-intro-p,
        .education .class-central-list-intro-p,
        .education .blog-twitter-linkedin-intro-p {
            text-align: left;
        }
    /* adding left border on some text for easier reading */
        .about .code-design-solutions-problems-sub-section p,
        .about .one-step-sub-section p,
        .skills .gained-skills-intro-p,
        .skills .currently-learning-intro-p,
        .education .class-central-list-intro-p,
        .education .blog-twitter-linkedin-intro-p {
            border-left: 5px solid var(--color-grey);
            padding-left: 1rem;
        }
    /* removing all possible deafult margin and padding */
        h1, 
        h2,
        h3,
        p,
        label,
        input,
        button,
        textarea {
            margin: 0;
            padding: 0;
        }
    /* color for all links */
        a {
            text-decoration: none;
            color: var(--color-black);
        }
    /* background color for links in text */
        .link-in-text {
            background-color: var(--color-yellow-opacity);
        }
    /* contact form text */
        label,
        input,
        button,
        textarea {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
        }
        ::placeholder {
            color: var(--color-white);
            opacity: 1;
        }

/* SMALL SCREENS (320-499) */
    /* font sizes, style, weight  */
        h1 {
            font-size: 2.3rem;
            font-weight: 800;
            font-style: italic;
        }
        h2,
        h3 {
            font-size: 1.15rem;
            font-weight: 600;
        }
        .title-project {
            font-size: 1.4rem;
        }
        p,
        .skill-label,
        label {
            font-size: 1rem; /* just making sure lol */
            font-weight: 400;
        }
        .skills .skill-label {
            font-weight: bold;
        }
        .contact label {
            font-weight: 600;
        }
        .contact .link-label {
            font-size: 0.8rem;
        }

/* SMALL & MEDIUM SCREENS (320-849) */
    /* off canvas menu - toggle of on icons */
        .fa-bars,
        .fa-close {
            font-size: 2rem;
        }
        @media (min-width: 500px) {
            .fa-bars,
            .fa-close {
                font-size: 2.5rem;
            }
            .contact .link-label {
                font-size: 1rem;
            }
        }
        
        @media (min-width: 850px) {
            .fa-bars {
                font-size: 3rem;
            }
            .header .nav-link {
                font-size: 1.3rem;
                font-weight: 600;
            }
        }

/* MEDIUM SCREENS (500-849) */
    @media (min-width: 580px) {
        /* yellow waves intro */
            .waves-section-intro h2 {
                font-size: 1.4rem;
            }
            .waves-section-intro h1 {
                font-size: 2.8rem;
            }
    }
    @media (min-width: 630px) {
        /* yellow waves intro */
            .waves-section-intro h2 {
                font-size: 1.8rem;
            }
            .waves-section-intro h1 {
                font-size: 3.5rem;
            }
    }
    @media (min-width: 700px) {
        /* headings, sub-headings, project title */
            h1 {
                font-size: 2.8rem;
            }
            h2,
            h3,
            .skill-label {
                font-size: 1.4rem;
            }
            .title-project {
                font-size: 1.6rem;
            } 
    }
    @media (min-width: 737px) {
        /* paragraphs */
            p {
                font-size: 1.05rem;
            }
    }
    @media (min-width: 769px) {
        /* paragraphs */
            p {
                font-size: 1.1rem;
            }
    }
    @media (min-width: 801px) {
        /* headings, sub-headings, project title */
            h1 {
                font-size: 3.5rem;
            }
            h2,
            h3 {
                font-size: 1.6rem;
            }
            .title-project {
                font-size: 1.8rem;
            }
    }

/* LARGE SCREENS (850-1359) */
    @media (min-width: 850px) {
        /* paragraphs */
            p {
                font-size: 1.15rem;
            }
            .home p {
                padding-bottom: 1rem;
            }
        /* yellow waves intro */
            .waves-section-intro h2 {
                font-size: 2rem;
            }
            .waves-section-intro h1 {
                font-size: 4.5rem;
            }
    }
    @media (min-width: 1100px) {
        /* yellow waves intro */
            .waves-section-intro h2 {
                font-size: 3rem;
            }
            .waves-section-intro h1 {
                font-size: 5.5rem;
            }
    }

/* LARGER SCREENS (1360-1920+) */
    @media (min-width: 1360px) {
        /* yellow waves intro */
            .waves-section-intro h2 {
                font-size: 3rem;
            }
            .waves-section-intro h1 {
                font-size: 5.5rem;
            }
    }

/*
  ========================================
  III. SHARED:
    B) PORTFOLIO NAVIGATION
  ========================================
*/
/* SMALL & MEDIUM SCREENS (320-849) */
    /* display off the second nav bar */
        .navbar {
            display: none;
        }
    /* for the toggle meanu to be rightly positioned */
        header .row {
            display: flex;
            flex-flow: row nowrap;
        }
        .header {
            margin: 1rem 1rem 0 1rem;
        }
    /* For screen reader only https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html for more info */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            border: 0;
        }
    /* logo sizing to fit in the nav menu */
        .header nav li:first-child img {
            width: 70px;
            height: auto;
        }
    /* to rightly position the menu toggle - hamburger button, 
    & adding color to it */
        .menu-toggle {
            color: var(--color-black);
            margin-left: -1rem;
            position: fixed;
            z-index: 998;
        }
    /* menu toggle changes color when hovered */
        .menu-toggle:hover,
        .menu-toggle:focus {
            color: var(--color-grey);
        }
    /*  > menu set to fixed and 100% in height so users can't scroll away from it and it'll occupy 100% of the screen height.
        > display, left - to have scrollbars appear when needed
        > overflow to have possible long nav names to be fully visible
        > z-index is for layering the main-menu, close icon button and ul (CSS line 524), and the backdrop (CSS line 537) */
        .main-menu {
            position: fixed;
            height: 100%;
            display: none;
            left: -200px;
            overflow-x: visible;
            overflow-y: auto;
            transition: left 0.3s ease;
            top: 0;
            z-index: 999;
        }
    /*  > turn off bullets
        > set bg color of flyout menu
        > "width" here and the "left" property in .main-menu should be the same absolute manner */
        .main-menu ul {
            list-style: none;
            background-color: var(--color-nav-ul-bg);
            width: 200px;
            margin: 0;
            padding-top: 2.5em;
            padding-left: 0;
            min-height: 100%;
        }
    /*  removes underline in links */
        .main-menu a {
            text-decoration: none;
        }
    /*  > setting the "a" in li (< ul < nav) to grid so i can arrange the icons and labels within it
        > set some padding and marge to rightly position the links
        > set some color on link text
        > added border on top of each link for easier reading */
        .main-menu .nav-link {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: 25% 75%;
            padding: 0.75rem;
            padding-left: 1.25rem;
            margin: 0;
            color: #fff;
            border-bottom: 1px solid var(--color-nav-li-border);
        }
    /* added border top on "projects" link for easier reading */
        /* .header nav .projects-link {
            border-top: 1px solid var(--color-nav-li-border);
        } */
     /*positioning of icons in first column */
        .main-menu .nav-link i {
            grid-column: 1/ span 1;
        }
    /*positioning of p and logo img in second column */
        .main-menu .nav-link p,
        .main-menu .nav-link img {
            grid-column: 2/ span 2;
        } 
    /* flex for home icon to rightly position it with the logo img */
        .main-menu .nav-link .fa-home {
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
            align-content: center;
        }
    /* setting styles for the close X icon */
        .main-menu .fa-close {
            padding: 1rem;
            text-decoration: none;
            color: var(--color-white);
        }
    /* setting a small margin on top of the logo img to have space betweeen it and the close icon */
        .main-menu .first-link {
            margin-top: 2rem;
        }
    /* size and alignment of the text in links for easier reading */
        .main-menu a {
            font-size: 1.2rem;
            text-align: left;
        }
    /* to slowly zoom in on logo img when hovered */
        .header nav li:first-child img:hover {
            transform: scale(1.1);
            transition: 0.5s;
        }
    /* to slowly zoom in on links when hovered */
        .main-menu a:hover,
        .main-menu a:focus {
            background: var(--color-black);
            transform: scale(1.1);
            transition: 0.5s;
        }
    /*  > to position the close icon button in the upper right corner */
        .main-menu .menu-close {
            position: absolute;
            right: 0;
            top: 0;
        }
    /*  
    Q1: How is the menu showed when clicked?
        > when users target (or click) the main-menu (hamburger icon button), the navigation menu shows because we set the left property to 0 from -200px (CSS line 431)
    Q2: But how does the main-menu (hamburger icon link button) target the off-canvas menu or the hidden nav bar?
        >   follow HTML line 23: 
                <a href="#main-menu" id="main-menu-toggle" class="menu-toggle" aria-label="Open main menu">
        >   if it's targeted (or clicked), the href targets the main-menu, both class and ID. follow HTML line 29:
                <nav id="main-menu" class="main-menu" aria-label="main menu">       */
        .main-menu:target {
            display: block;
            left: 0;
            outline: none;
        }
    
    /* this brings the close X button icon to the top of ul so it can be clicked */
        .main-menu:target .menu-close {
            z-index: 1001;
        }
    /* this brings ul to the top of main menu so it can be clicked */
        .main-menu:target ul {
            position: relative;
            z-index: 1000;
        }
    /* 
    > "+ .backdrop" is used instead of ".main-menu:target:after" to make it clickable letting users easly go back to the main content without clicking the close X button 
    > the backdrop is the link on HTML line 80: 
        <a href="#main-menu-toggle" class="backdrop" hidden tabindex="-1"></a>
    > here it's set as block & fixed
    > it's moved below of the main menu (notice the z-index values)
    > set height and width to 100% so that it occupies the remaining space of the screen after main menu is displayed
    > gave it a light grey color to distinguish it from the main menu and and to make the main content slightly be seen for easier navigation */
        .main-menu:target + .backdrop {
            position: fixed;
            display: block;
            left: 0;
            top: 0;
            z-index: 998;
            width: 100%;
            height: 100%;
            background: var(--color-menu-backdrop);
            cursor: default;
        }

/* LARGE & LARGER SCREENS (850-1920+) */
    @media (min-width: 850px) {
        /* display off for the nav menu in small screen */
            .small-medium-nav,
            .header .home-link p {
                display: none;
        }
        /* header styling */
            .header {
                display: flex;
                flex-flow: row wrap;
                justify-content: center;
                align-items: center;
                align-content: center;
            }
        /* navigation bar */
            .header nav {
                flex-basis: 100%;
                width: 100%;
                height: 70px;
                background-color: var(--color-black);
                position: fixed;
                top: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 999;
            }
        /* removing refault styles for ul's */
            .header nav ul {
                list-style-type: none;
                padding: 0;
                margin: 0;
                background-color: var(--color-black);
            }
        /* flex for main ul list */
            .header nav .main-ul-list {
                flex-basis: 100%;
                display: flex;
                flex-flow: row wrap;
                justify-content: center;
                align-content: center;
                align-items: center;
            }
        /* first main li */
            .header nav .first-main-li {
                flex-basis: 15%;
            } 
            /* first nav grp */
                .header nav .nav-grp1 {
                    display: flex;
                    flex-flow: row wrap;
                    justify-content: center;
                    align-items: center;
                    align-content: center;
                }
        /* second main li */
            .header nav .second-main-li {
                flex-basis: 85%;
            }
            /* second nav grp */
                .header nav .nav-grp2 {
                    display: flex;
                    flex-flow: row wrap;
                    justify-content: flex-end;
                    align-items: center;
                    gap: 2rem;
                }
                .header nav .nav-grp2 li:last-child {
                    margin-right: 2rem;
                }
        /* styles for links */
            .header .nav-link {
                margin: 0;
                padding: 0;
                margin-bottom: -0.2rem;
                text-decoration: none;
                display: block;
                color: var(--color-white);
            }
            .header .nav-link p {
                font-size: 1.1rem;
            }
            .header nav .nav-grp1 img {
                width: 90px;
                height: auto;
            }
            .header .nav-link:hover {
                transform: scale(1.1);
                transition: 0.5s;
            }
            .header .home-link p {
                display: none;
            }
        /* logo sizing */
            .header nav li:first-child img {
                width: 90px;
            }
    }

    @media (min-width: 1300px) {
        /* nav links */
            .header .nav-link p {
                font-size: 1.5rem;
            }
        /* bigger size for logo */
            .header nav li:first-child img {
                width: 106px;
                height: auto;
            }
        /* bigger nav bar */
            .header nav {
                height: 70px;
            }
    }

/*
  ========================================
  III. SHARED: 
    C) BUTTONS
  ========================================
*/
/* CODEPEN, FEEDBACK, CLASS CENTRAL LIST, BLOG, TWITTER, LINKEDIN BUTTONS */
    .codepen-link-button,
    .fb-link-button,
    .cc-link-button,
    .bg-link-button,
    .tr-link-button,
    .ln-link-button {
        width: 280px;
        height: 50px;
    }
    .codepen-button,
    .feedback-button,
    .list-class-central-button,
    .blog-button,
    .twitter-button,
    .linkedin-button {
        /* looks */
        width: 100%;
        height: 100%;
        border-radius: 10px;
        background-color: var(--color-black);
        color: var(--color-white);
        /* positioning */
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 20% 80%;
    }
    .codepen-button i,
    .feedback-button i,
    .list-class-central-button i,
    .blog-button i,
    .twitter-button i,
    .linkedin-button i,
    .codepen-button p,
    .feedback-button p,
    .list-class-central-button p,
    .blog-button p,
    .twitter-button p,
    .linkedin-button p  {
        grid-row: 1/ span 1;
    }
    .codepen-button i,
    .feedback-button i,
    .list-class-central-button i,
    .blog-button i,
    .twitter-button i,
    .linkedin-button i {
        grid-column: 1/ span 1;
    }
    .codepen-button p,
    .feedback-button p,
    .list-class-central-button p,
    .blog-button p,
    .twitter-button p,
    .linkedin-button p  {
        grid-column: 2/ span 1;
    }
    .codepen-button .link-icon,
    .feedback-button .link-icon,
    .list-class-central-button .link-icon,
    .blog-button .link-icon,
    .twitter-button .link-icon,
    .linkedin-button .link-icon,
    .codepen-button .view-on-codepen,
    .feedback-button .leave-a-message,
    .list-class-central-button .view-on-class-central,
    .blog-button .view-on-blog,
    .twitter-button .view-on-twitter,
    .linkedin-button .view-on-linkedin {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        align-content: center;
    }
    .codepen-button .link-icon,
    .feedback-button .link-icon,
    .list-class-central-button .link-icon,
    .blog-button .link-icon,
    .twitter-button .link-icon,
    .linkedin-button .link-icon {
        justify-content: flex-end;
    }
    .codepen-button .view-on-codepen,
    .feedback-button .leave-a-message,
    .list-class-central-button .view-on-class-central,
    .blog-button .view-on-blog,
    .twitter-button .view-on-twitter,
    .linkedin-button .view-on-linkedin {
        justify-content: flex-start;
        margin-left: 1.5rem;
    }

/* SUBMIT BUTTON */
    #contact input[type="submit"] {
        display: block;
        width: 100%;
        max-width: 550px;
        margin: 1em auto;
        height: 50px;
        font-size: 1.1rem;
        background-color: var(--color-yellow-brighter);
        border-color: var(--color-yellow-brighter);
        border-radius: 0.25rem;
        cursor: pointer;
        color: var(--color-black);
        font-weight: 600;
        font-size: 1.25rem;
    }
    #contact input[type="submit"]:hover {
        background-color: var(--color-black);
        border-color: var(--color-black);
        color: var(--color-white);
    }

/* BACK TO TOP BUTTON */
    .top-button {
        place-self: end;
        position: sticky;
        bottom: 20px;
        margin-right: 1.5rem;
        margin-top: 100vh;
        text-decoration: none;
        padding: 0px;
        color: var(--color-black);
        font-size: 3rem;
    }
    @media (min-width: 850px) {
        .top-button {
            bottom: 40px;
            margin-right: 3rem;
        }
    }
    @media (min-width:1300px) {
        .top-button {
            bottom: 50px;
            margin-right: 4rem;
            font-size: 5rem;
        }
    }

/* TYPOGRAPHY BUTTON */
    .codepen-button p,
    .feedback-button p,
    .list-class-centralbutton p,
    .blog-button p,
    .twitter-button p,
    .linkedin-button p {
        font-size: 1.2rem;
    }
    .codepen-button .link-icon,
    .feedback-button .link-icon,
    .cc-link-button .link-icon,
    .bg-link-button .link-icon,
    .tr-link-button .link-icon,
    .ln-link-button .link-icon {
        font-size: 1.75rem;
    }
    @media (min-width:850px) {
        .view-on-class-central p {
            font-size: 1.05rem;
        }
    }
    #projects .feedback-button .leave-a-message p {
        margin: 0;
    }
    .education .view-on-class-central {
        font-size: 1.05rem;
    }

    .codepen-button:hover,
    .feedback-button:hover,
    .list-class-central-button:hover,
    .blog-button:hover,
    .twitter-button:hover,
    .linkedin-button:hover {
        color: var(--color-black);
        background-color: var(--color-yellow);
        border: 1px solid var(--color-black);
    }


/*
  ========================================
  III. SHARED:
    D) ANIMATIONS
  ========================================
*/
/* ----------------------------------------------
 * Generated by Animista on 2022-2-3 15:6:36
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
 .slide-in-left {
    -webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
            animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
}
    @-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }

  .contact-link-hover:hover {
    transform: scale(1.1);
    transition: 0.5s;
}

/*
  ========================================
  III. SHARED: 
    E) YELLOW WAVES AS BG
  ========================================
*/
/* SMALL SCREENS (320-499) */
    .new-yellow-waves {
        margin-bottom: 5rem;
        margin-top: 4rem;
    }
    .new-yellow-waves img {
        height: 142px;
        width: auto;
    }
    .new-yellow-waves .waves-section-intro {
        margin-top: -6.5rem;
    }

    @media (min-width: 410px) {
        .new-yellow-waves img {
            height: 173px;
            width: auto;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -7.5rem;
        }
    }

/* MEDIUM SCREENS (500-849) */
    @media (min-width: 500px) {
        .new-yellow-waves img {
            height: 185px;
        }
    }
    @media (min-width: 530px) {
        .new-yellow-waves img {
            height: 200px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -8.5rem;
        }
    }
    @media (min-width: 575px) {
        .new-yellow-waves img {
            height: 220px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -9.5rem;
        }
    }
    @media (min-width: 630px) {
        .new-yellow-waves img {
            height: 245px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -10.5rem;
        }
    }
    @media (min-width: 700px) {
        .new-yellow-waves img {
            height: 280px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -11.75rem;
        }
        .new-yellow-waves {
            margin-bottom: 7rem;
        }
    }
    @media (min-width: 800px) {
        .new-yellow-waves img {
            height: 300px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -11.75rem;
        }
    }

/* LARGE SCREENS (850-1359) */
    @media (min-width: 850px) {
        .new-yellow-waves img {
            height: 333px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -13.5rem;
        }
    }
    @media (min-width: 950px) {
        .new-yellow-waves img {
            height: 351px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -14.5rem;
        }
        .new-yellow-waves {
            margin-bottom: 9rem;
        }
    }
    @media (min-width: 1000px) {
        .new-yellow-waves img {
            height: 386px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -15.5rem;
        }
    }
    @media (min-width: 1100px) {
        .new-yellow-waves img {
            height: 421px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -17.5rem;
        }
    }
    @media (min-width: 1200px) {
        .new-yellow-waves img {
            height: 456px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -18.5rem;
        }
        .new-yellow-waves {
            margin-top: 3rem;
        }
    }
    @media (min-width: 1300px) {
        .new-yellow-waves img {
            height: 490px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -20.5rem;
        }
    }

/* LARGER SCREENS (1360-1920+) */
    @media (min-width: 1360px) {
        .new-yellow-waves {
            margin-top: 3rem;
            margin-bottom: 11rem;
        }
    }

/*
  ========================================
  III. SHARED: 
    F) IMAGES SIZING
  ========================================
*/
/* HOME */
    .jewel-keith-dp {
        width: 100%;
        max-width: 350px;
        height: auto;
        /* margin-bottom: 1rem; */
    }
/* PROJECTS > FEEDBACK */
    .feedback img {
        width: 150px;
        max-width: 200px;
        height: auto;
}

/* ABOUT */
    .code-design-pics-list img {
        width: 100%;
        max-width: 200px;
        height: auto;
        margin-bottom: 1rem;
    }
    .one-step-goal-flag-pics-list img {
        width: 100%;
        max-width: 200px;
        height: auto;
    }
    .con-per-fai-pics-list img {
        width: 100%;
        max-width: 150px;
        height: auto;
    }

/* SKILLS */
    .html-css-des-pics-list img,
    .js-uxui-pics-list img {
        height: 100%;
        max-height: 80px;
        width: auto;
    }
    @media (min-width: 580px) {
        .html-css-des-pics-list img,
        .js-uxui-pics-list img {
            max-height: 100px;
        }
    }

/* EDUCATION */
    .list-brain-strengthening-pics-list img,
    .happy-sharing-writings-money-pics-list img {
        width: 100%;
        max-width: 200px;
        height: auto;
        margin-bottom: 1rem;
    }

/* CONTACT */
    .contact-links-pics img {
        width: 80px;
        height: auto;
    } 

/*
  ========================================
  III. SHARED: 
    G) SECTIONS' POSITIONING & SPACING (EXCEPT FOR HOME)
  ========================================
*/
/* FLEXBOX FOR MAIN AND SUB SECTIONS */
    .projects,
    .projects article,
    .flip-yeah,
    .feedback,
    .about,
    .about article,
    .skills,
    .skills article,
    .education,
    .education article,
    .contact {
        padding: 0;
        margin: 0 auto; 
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        gap: 1rem;   
    }

    .projects .feedback {
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

    .h3-feedback-intro,
    .feedback img {
        flex-basis: 100%;
    }

/* CHILDREN 100% FLEXBASIS SO ALL BE CENTERED UP TO 1200PX*/
    /* projects */
        .projects article {
            flex-basis: 100%;
        }
    /* about */
        .about article,
        .about .code-design-solutions-problems-sub-section,
        .about .one-step-sub-section,
        .about .con-per-fai-sub-section {
            flex-basis: 100%;
        }
    /* skills */
        .skills article {
            flex-basis: 100%;
        }
    /* education */
        .education article {
            flex-basis: 100%;
        }
    /* contact */
        .contact .intro-and-contact-form,
        .contact .links-my-accounts  {
            flex-basis: 100%;
        }
        .contact .links-my-accounts {
            max-width: 610px;
        }

/* MAX WIDTH & HEIGHT, MARGIN FOR SECTIONS / SUBSECTIONS */
    /* projects */
        .projects {
            max-width: 1600px;
            margin: 0 auto;
        }
        .projects article {
            flex-basis: 100%;
            max-width: 610px;
            margin: 0 auto;
            margin-left: 1rem;
            margin-right: 1rem;
        }
        .projects .title-project {
            flex-basis: 100%;
        }
        
        .projects article {
            margin-bottom: 1rem;
        }
    /* about */
        .about article {
            max-width: 1600px;
        }
        .about article section {
            max-width: 610px;
            margin: 0 auto;
        }

        .about .code-design-solutions-problems-sub-section,
        .about .one-step-sub-section {
            margin-bottom: 3rem;
        }

        @media (min-width: 760px) {
            .about article {
                margin-left: 3rem;
                margin-right: 3rem;
            }
        }
    /* skills */
        .skills article {
            max-width: 1600px;
            margin: 0 auto;
        }
        .skills article section {
            flex-basis: 100%;
            margin: 0 auto;
        }
        .skills .gained-skills-intro-p,
        .skills .currently-learning-intro-p {
            max-width: 610px;
            margin: 0 auto;
        }
        .skills .skill-label {
            margin-bottom: 0.5rem;
        }
        @media (min-width: 1360px) {
            .skills .currently-learning-sub-section {
                max-height: 324px;
            }
        }
    /* education */
        .education article {
            max-width: 1600px;
            margin: 0 auto;
        }
        .education article section {
            flex-basis: 100%;
            max-width: 700px;
            margin: 0 auto;
        }
        .education .class-central-list-intro-p,
        .education .blog-twitter-linkedin-intro-p {
            max-width: 610px;
        }

/*
  ========================================
  IV. CUSTOM: 
    A) HOME SECTION
  ========================================
*/
.empty-div-home {
    display: none;
}
.home {
    margin-top: 4rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 2rem;
}

/* .home {
    height: 100vh;
} */

.jewel-keith-intro-home,
.home img {
    flex-basis: 100%;
}

/* MEDIUM SCREENS (500-849) */
    @media (min-width:620px) {
        .home img {
            order: 1;
        }
        .jewel-keith-intro-home {
            order: 2;
        }
        .jewel-keith-intro-home {
            flex-basis: 70%;
            max-width: 325px;
        }
        .home img {
            flex: 30%;
            max-width: 200px;
        }
    }
    @media (min-width:700px) {
        .home img {
            max-width: 220px;
        }
    }
    @media (min-width:801px) {
        .home img {
            max-width: 250px;
        }
        .jewel-keith-intro-home {
            max-width: 447px;
        }
    }

/* LARGE & LARGER SCREENS (850-1920+) */
    @media (min-width:850px) {
        .home {
            margin-top: 7rem;
        }
    }
    @media (min-width: 1100px) {
        .home img {
            max-width: 360px;
        }
        .jewel-keith-intro-home {
            max-width: 631px;
        }
        .home h1 {
            font-size: 5.5rem;
        }
        .home h2 {
            font-size: 3rem;
        }
        .home p {
            font-size: 1.5rem;
        }
        .home {
            margin-top: 8rem;
        }
    }



/*
  ========================================
  IV. CUSTOM: 
    B) PROJECTS SECTION
  ========================================
*/
/* SMALL SCREENS (320-499) */
    /* 1) FLIP CARD */
        .flip-card {
            width: 280px;
            height: 280px;
            perspective: 1000px;
            margin: 0.4rem 0 0.4rem 0;
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }

        .flip-card-front, 
        .flip-card-back5, 
        .flip-card-back6,
        .flip-card-back3,
        .flip-card-back4 {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .flip-card-back5,
        .flip-card-back6,
        .flip-card-back3,
        .flip-card-back4 {
            transform: rotateY(180deg);
            background-image: url('../img/(Light-Projects)_Small_Pp/Projects_Window_W_lightbg_Back.png');
            background-size: 100% 100%;
        }

        .flip-card-back5 p,
        .flip-card-back6 p,
        .flip-card-back3 p,
        .flip-card-back4 p {
            font-size: 0.9rem;
            text-align: left;
            padding: 2.4rem 1rem 0 1rem;
            font-style: italic;
        }
        .flip-card-back5 .languages,
        .flip-card-back6 .languages,
        .flip-card-back3 .languages,
        .flip-card-back4 .languages {
            padding: 0.4rem 1rem 0 1rem;
        }

        .flip-card-back5 .languages,
        .flip-card-back6 .languages,
        .flip-card-back3 .languages,
        .flip-card-back4 .languages,
        .flip-card-back5 li,
        .flip-card-back6 li,
        .flip-card-back3 li,
        .flip-card-back4 li {
            font-style: normal;
            font-weight: bold;
        }

        .flip-card-back5 ul,
        .flip-card-back6 ul,
        .flip-card-back3 ul,
        .flip-card-back4 ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row wrap;
        }

        .flip-card-back5 li,
        .flip-card-back6 li,
        .flip-card-back3 li,
        .flip-card-back4 li {
            text-align: center;
            flex-basis: 10%;
            font-size: 0.7rem;
            padding: 0.3rem 0 0 1rem;
        }

        .flip-card-back5 li:first-child,
        .flip-card-back6 li:first-child,
        .flip-card-back3 li:first-child,
        .flip-card-back4 li:first-child {
            padding: 0.3rem 0 0 2rem;
        }

        .flip-card-back5 img,
        .flip-card-back6 img,
        .flip-card-back3 img,
        .flip-card-back4 img {
            width: 40px;
            height: auto;
        }
        
    /* 2) FEEDBACK */
        .feedback p {
            margin: 0 1rem 0 1rem;
        }
        .feedback-info-button {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
        }
        .feedback-info-button .feedback-info-margin {
            margin-top: 0.5rem;
            margin-bottom: 1rem;
        }

        @media (min-width: 410px) {
            .feedback-info-button .feedback-info-margin {
                flex-basis: 79%;
            }
        }

    /* DISPLAY OFF THE MEDIUM, LARGE & LARGER LAYOUT */
        .projects .empty-div-1-left,
        .projects .empty-div-1-right,
        .projects .empty-div-2-left,
        .projects .empty-div-2-right,
        .project-preview-left,
        .project-preview-right,
        .project-info-right,
        .project-info-left {
            display: none;
        }

/* MEDIUM - LARGE SCREENS (620-1359) */
    @media (min-width: 620px) {
    /* DISPLAY OFF THE SMALL LAYOUT FOR MEDIUM AND LARGE */
            .flip-yeah {
                display: none;
        }

    /* DISPLAY ON THE MEDIUM & LARGE LAYOUT  */
        .projects .empty-div-1-left,
        .projects .empty-div-1-right,
        .projects .empty-div-2-left,
        .projects .empty-div-2-right,
        .project-preview-left,
        .project-preview-right,
        .project-info-right,
        .project-info-left {
            display: block;
        }

    /* FLEXBASIS FOR CONSUMED SPACE */
        .title-project-left,
        .empty-div-1-right,
        .project-preview-left,
        .project-info-right,
        .codepen-link-button-left,
        .empty-div-2-right,
        .empty-div-1-left,
        .title-project-right,
        .project-info-left,
        .project-preview-right,
        .empty-div-2-left
        .codepen-link-button-right {
            flex-basis: 45%;
        }

    /* FILLING SPACE IN EMPTY DIVS */
        .empty-div-1-left,
        .empty-div-1-right,
        .empty-div-2-left,
        .empty-div-2-right {
            height: 25px;
            width: auto;
        }

    /* STYLING LANGUAGES LIST & LOGOS, PROJECTS' PREVIEW */
        .project-info-left ul,
        .project-info-right ul {
            list-style-type: none;
            padding: 0;
            padding-left: 2rem;
            margin: 0;
            display: flex;
            flex-flow: row wrap;
        }
        .project-info-left li,
        .project-info-right li {
            font-style: normal;
            font-weight: bold;
            text-align: center;
            flex-basis: 10%;
            font-size: 1rem;
            padding: 0.3rem 0 0 1rem;
        }
        .project-info-left .languages,
        .project-info-right .languages {
            font-weight: bold;
            margin-top: 0.5rem;
        }
        .project-info-left ul img,
        .project-info-right ul img {
            width: 40px;
            height: auto;
        }
        .project-preview-left,
        .project-preview-right {
            display: inline-block;
            width: 280px;
            max-width: 300px;
            height: auto;
        }

    /* GRID FOR ARRANGING THE CELLS UNDER PROJECT ARTICLES */
        .projects .first-project,
        .projects .second-project,
        .projects .third-project,
        .projects .fourth-project {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: 50% 50%;
        }
        /* UNIFORM ROWS */
        .title-project-left,
        .empty-div-1-right,
        .empty-div-1-left,
        .title-project-right {
            grid-row: 1/ span 1;
        }
        .project-preview-left,
        .project-info-right,
        .project-info-left,
        .project-preview-right {
            grid-row: 2/ span 1;
        }
        .codepen-link-button-left,
        .empty-div-2-right,
        .empty-div-2-left
        .codepen-link-button-right {
            grid-row: 3/ span 1;
        } 
        /* ODD PROJECTS - LEFT SIDE */
        .title-project-left,
        .project-preview-left,
        .codepen-link-button-left {
            grid-column: 1/ span 1;
        }
        .empty-div-1-right,
        .project-info-right,
        .empty-div-2-right {
            grid-column: 2/ span 1;
        }
        /* EVEN PROJECTS - RIGHT SIDE */
        .empty-div-1-left,
        .project-info-left,
        .empty-div-2-left {
            grid-column: 1/ span 1;
        }
        .title-project-right,
        .project-preview-right,
        .codepen-link-button-right {
            grid-column: 2/ span 1;
        }
        
    /* TEXT ALIGN LEFT FOR PROJ INFO LEFT & RIGHT */
        .project-info-right,
        .project-info-left {
            text-align: left;
        }
    /* ADDING PADDING AT ONE SIDE TO PROJ INFOS */
        .project-info-right {
            padding-left: 0.5rem;
        }
        .project-info-left {
            padding-right: 0.5rem;
        }
    /* CENTERING THE PROJ PREVIEW & BUTTON */
        .project-preview-left,
        .project-preview-right,
        .codepen-link-button-left,
        .codepen-link-button-right {
            margin: 0 auto;
        }
    }

/* LARGER SCREENS LAYOUT (1360-1920) */
        @media (min-width: 1360px) {
        /* EVEN PROJECTS MOVE TO LEFT SIDE */
            .title-project-right,
            .project-preview-right,
            .codepen-link-button-right {
                grid-column: 1/ span 1;
            }
            .empty-div-1-left,
            .project-info-left,
            .empty-div-2-left {
                grid-column: 2/ span 1;
            }
        /* MARGIN BETWEEN SECTIONS */
            .projects .third-project,
            .projects .fourth-project,
            .projects .feedback {
                margin-top: 2rem;
            }
        }

/*
  ========================================
  IV. CUSTOM: 
    C) ABOUT SECTION
  ========================================
*/
/* CODE DESIGN SOLUTION SUB SEC */
    /* GRID */
        .about .code-design-solutions-problems-sub-section {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: auto;
        }
        .code-design-pics-list,
        .code-design-solutions-problems-sub-section p {
            grid-column: 1/ span 1;
        }
        .code-design-pics-list {
            grid-row: 1/ span 1;
        }
        .code-design-solutions-problems-sub-section p {
            grid-row: 2/ span 1;
        }
    /* FLEXBOX */
        .about .code-design-pics-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: 1rem;
        }
/* ONE STEP SUB SEC */
    /* GRID */
        .about .one-step-sub-section {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: auto;
            grid-gap: 5% 0;
        }
        .one-step-goal-flag-pics-list,
        .one-step-sub-section p {
            grid-column: 1/ span 1;
            margin: 0 auto 1rem auto;
        }
        .one-step-goal-flag-pics-list {
            grid-row: 1/ span 1;
        }
        .one-step-sub-section p {
            grid-row: 2/ span 1;
        }
    /* FLEXBOX */
        .about .one-step-goal-flag-pics-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: 1rem;
        }

/* CON-PER-FAI-SUB-SEC */
    /* GRID */
        .about .con-per-fai-sub-section {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: auto;
            grid-gap: 10%;
        }
        .con-per-fai-pics-list,
        .con-per-fai-sub-section h3 {
            grid-column: 1/ span 1;
        }
        .con-per-fai-pics-list {
            grid-row: 1/ span 1;
        }
        .con-per-fai-sub-section h3 {
            grid-row: 2/ span 1;
        }
    /* FLEXBOX */
        .about .con-per-fai-pics-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: 1rem;
        }

/* LARGER SCREENS LAYOUT (1360-1920) */
@media (min-width: 1360px) {
/* grid for about article to position the sub sections*/
    .about article {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-gap: 2% 2%;
    }
    /* row */
        .about .code-design-solutions-problems-sub-section,
        .about .one-step-sub-section {
            grid-row: 1/ span 1;
        }
        .about  .con-per-fai-sub-section {
            grid-row: 2/ span 1;
        }
    /* column */
        .about .code-design-solutions-problems-sub-section {
            grid-column: 1/ span 1;
        }
        .one-step-sub-section {
            grid-column: 2/ span 1;
        }
        .con-per-fai-sub-section {
            grid-column: 1/ span 2;
        }
}

/*
  ========================================
  IV. CUSTOM: 
    D) SKILLS SECTION
  ========================================
*/
/* GAINED SKILLS SUB SEC */
    /* GRID */
        .skills .gained-skills-sub-section {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: auto;
            grid-gap: 5%;
            margin-bottom: 5rem;
        }
        .html-css-des-pics-list,
        .skills-label-p,
        .gained-skills-intro-p {
            grid-column: 1/ span 1;
        }
        .html-css-des-pics-list {
            grid-row: 1/ span 1;
        }
        .skills-label-p {
            grid-row: 2/ span 1;
        }
        .gained-skills-intro-p {
            grid-row: 3/ span 1;
        }
        
    /* FLEXBOX */
        .skills .html-css-des-pics-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: 2rem;
        }
/* CURRENTLY LEARNING SUB SECTION */
    /* GRID */
        .skills .currently-learning-sub-section {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: auto;
            grid-gap: 5%;
        }
        .js-uxui-pics-list,
        .learning-skills-label-p,
        .currently-learning-intro-p {
            grid-column: 1/ span 1;
        }
        .js-uxui-pics-list {
            grid-row: 1/ span 1;
        }
        .learning-skills-label-p {
            grid-row: 2/ span 1;
        }
        .currently-learning-intro-p {
            grid-row: 3/ span 1;
        }
    /* FLEXBOX */
        .skills .js-uxui-pics-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: 2rem;
        }
        
/* LARGE SCREEN LAYOUT (1360-1920) */ 
    @media (min-width: 1360px) {
        /* grid for about article to position the sub sections*/
            .skills article {
                display: grid;
                grid-template-columns: auto;
                grid-template-rows: auto;
                grid-gap: 2% 2%;
            }
            /* row */
                .skills .gained-skills-sub-section,
                .skills .currently-learning-sub-section {
                    grid-row: 1/ span 1;
                }
            /* column */
                .skills .gained-skills-sub-section {
                    grid-column: 1/ span 1;
                }
                .skills .currently-learning-sub-section {
                    grid-column: 2/ span 1;
                }
        }

/*
  ========================================
  IV. CUSTOM: 
    E) EDUCATION SECTION
  ========================================
*/
/* CLASS CENTRAL LIST SUB SECTION,
    BLOG TWITTER LINKEDIN SUB SECTION */
    /* GRID */
        .education .class-central-list-sub-section,
        .education .blog-twitter-linkedin-sub-section {
            flex-basis: 100%;
            padding: 0;
            padding-bottom: 1rem;
            margin: 0 auto;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            align-content: flex-start;
            gap: 1rem;
        }
        
        .list-brain-strengthening-pics-list,
        .happy-sharing-writings-money-pics-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: 1rem;
        }
        
        .grateful-label-p,
        .actions-thank-you-label-p {
            flex-basis: 100%;
        }
        
/* LARGE SCREEN LAYOUT (1360-1920) */ 
    @media (min-width: 1360px) {
        /* grid for about article to position the sub sections*/
            .education article {
                display: grid;
                grid-template-columns: auto;
                grid-template-rows: auto;
                grid-gap: 2% 2%;
            }
            /* row */
                .education .class-central-list-sub-section,
                .education .blog-twitter-linkedin-sub-section {
                    grid-row: 1/ span 1;
                }
            /* column */
                .education .class-central-list-sub-section {
                    grid-column: 1/ span 1;
                    margin-left: 4rem;
                }
                .education .blog-twitter-linkedin-sub-section {
                    grid-column: 2/ span 1;
                    margin-right: 4rem;
                }
        }

/*
  ========================================
  IV. CUSTOM:
    D) CONTACT SECTION
  ========================================
*/
/* FORM */
    .contact form {
        max-width: 550px;
        min-width: 295px;
        margin: 0 auto;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 0.25rem;
    }

    .contact fieldset {
        border: none;
        padding: 0;
        margin: 0 auto;
        max-width: 550px;
    }

    .contact label {
        display: block;
        margin: 0.5rem 0;
        text-align: left;
    }

    .contact input,
    .contact textarea {
        margin: 10px 0 0 0;
        width: 100%;
        min-height: 2em;
        padding: 5px;
        background-color: var(--color-black);
        color: var(--color-white);
        border: 1px solid var(--color-black);
        border-radius: 0.25rem;
    }

/* LINKS */
    .contact-links-pics {
        flex-basis: 100%;
        list-style-type: none;
        padding: 0;
        margin-top: 1.5rem;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .contact-links-pics li {
        text-align: center;
        flex-basis: 25%;
    }
    @media (min-width: 620px) {
        .contact-links-pics li {
            flex-basis: 17%;
        }
    }

    .contact-links-pics p {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-weight: 400;
    }
    .contact .links-my-accounts p {
        margin-bottom: 1.5rem;
    }

/*
  ========================================
  IV. CUSTOM:
    E) FOOTER 
  ========================================
*/
.footer .footer-info {
    margin-top: 3.5rem;
    padding-bottom: 3rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
}

/* MEDIUM SCREENS (500-849) */
    @media (min-width: 500px) {
        .footer .footer-info {
            margin-bottom: 0;
        }
    }

/* LARGER SCREENS (1360-1920+) */
    @media (min-width: 1360px) {
        .footer {
            padding-bottom: 2rem;
        }
    }


/*
  ========================================
  VI. CREDITS FOR RESOURCES USED 
    A) FLIP CARD IN SMALL SCREENS: 
            @w3schools - https://www.w3schools.com/
                >tutorial link: https://www.w3schools.com/howto/howto_css_flip_card.asp
    B) ANIMATION: 
            @animista - https://animista.net/
                >slide-in-left link: https://animista.net/play/entrances/slide-in/slide-in-left
                >price: free! just make sure to give some credits
                >discovered it through Brett's AWESOME WebGuide - https://webguide.space/theguide/
    C) YELLOW WAVES AS BACKGROUND FOR MAIN HEADINGS: 
            @haikei - https://app.haikei.app/
                >layered waves: found at "layered waves" section
                >discovered it through Brett's AWESOME WebGuide - https://webguide.space/theguide/
    D) ICONS / PICTURES / LOGOS: 
            @font awesome - https://fontawesome.com/
                >icons in buttons, navigation bar: all under free category
            @canva - https://www.canva.com
                >icons or pictures in projects, about, skills, and education sections: free for all canva users (Many icons were a combination of different free icons and shapes. I put them together to create better images more suitable for my specific needs.)
                >logos in projects & contact section (except for github & freeCodeCamp): free for all canva users
            @github - https://github.com/logos
                >github logo used in contact section
                >the link points out to a page where it discusses how the github logo must be used. (In my case, I used it to link to my github profile which is one of the awesome things to do under their rules.)
            @freecodecamp - https://design-style-guide.freecodecamp.org/
                >freecodecamp logo used in contact section to point out to my learner's profile where you can see my learning progress under the curriculum
    E) OFF CANVAS MENU (CSS ONLY):
            @frontend masters - https://frontendmasters.com/
                >course: Advanced CSS Layouts by Jen Kramer
                >section: Pure CSS Off-Canvas Menu
                >link: https://frontendmasters.com/courses/advanced-css-layouts/
                >price: 5months free access for those who have the github student developer pack - https://education.github.com/pack
    F) BACK TO TOP BUTTON (CSS ONLY):
            @freeCodeCamp News/Articles - https://www.freecodecamp.org/news
                >article: How to Make an Animated Back to Top Button Using Only CSS by Temani Afif
                >link: https://www.freecodecamp.org/news/css-only-back-to-top-button/
    G) FONT FAMILY:
            @google - https://fonts.google.com/
                >montserrat - https://fonts.google.com/specimen/Montserrat
    H) BORDER BOX:
            @brumm - https://shadows.brumm.af/
                >used it to make the whole content 3d or like popping out when view on a large screen
                >discovered it through Brett's AWESOME WebGuide - https://webguide.space/theguide/
    I) DESIGN TOOLS:
            @canva - https://www.canva.com (I used it to design and customize the overall layout, typography and colors of my website and logo.)
            @open color - https://yeun.github.io/open-color/ (I used it for building my color palette. Discovered it through Brett's AWESOME WebGuide - https://webguide.space/theguide/)
  ========================================
*/