/* recommendations */
/* font = rem */
/* width: % - in combination with max-width */
/* height "do i need to specify height?" - use min height if so */
/* padding/margin = rem/em(padding of buttons)  */
/* media queries = em */
/* px = shadows, borders, etc */


/* CONTENT

1-global styles

2-typography

3-layout-global

4-About me section

5-skills section

6-Projects section

7-Contact me section

8-Navigation

9-mobile hamburger menu 

10-footer

11-misc aria, accesbility etc

12-form thankyou page

13-hero-animation

14-generated-section-boundaries 

*/

/*  ================
    1-global styles
    ================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,700;1,600&family=Tenor+Sans&display=swap');

:root{
    --main-black: hsl(0,0%,0%);
    --main-white: hsl(0,0%,100%);
    --main-grey: hsl(260, 4%, 15%);
    --submit-button: hsl(0,0%,100%);
    --form-outline: hsl(0,0%,100%);
    --icon-skills: hsl(56, 100%, 50%);
    --hover: hsl(56, 100%, 50%);
    --submit-button-background: hsl(0,0%,0%);
    --nav-bar-background: hsl(0,0%,5%,0.7);
    --nav-bar-links: hsl(0,0%,100%);
    --space-blue: hsl(216, 53%, 9%);
   

    --background-1: hsl(307, 50%, 34%);

    --col-0: hsl(307, 69%, 60%);
    --col-1: hsl(307, 69%, 34%);
    --col-2: hsl(302, 66%, 32%);
    --col-3: hsl(295, 63%, 32%);
    --col-4: hsl(288, 61%, 32%);
    --col-5: hsl(288, 61%, 32%);
    --col-6: hsl(280, 60%, 32%);
    --col-7: hsl(273, 58%, 32%);
    --col-8: hsl(264, 57%, 32%);
    --col-9: hsl(255, 56%, 32%);
    --col-10: hsl(255, 56%, 10%);
    
    --main-font-family: 'Archivo', sans-serif;
    --second-font-family:  'Tenor Sans', sans-serif;
}
*{
    box-sizing: border-box;
    margin: 0;
}
html{
    scroll-behavior: smooth;
}
.section-about-me{
    background-color: var(--main-grey);
}
.section-skills{
    background-color: var(--col-9);
}
.section-projects{
    background-color: var(--main-grey);
}
.section-contact{
    background-color: var(--col-9);
}
.footer{
    background-color: var(--main-grey);
}

/*  ================
    2-typography - headings, links, emphasis, anything text
    ================ */

    h1,h2,h4,h5,h6{
        font-family: var(--main-font-family);
        margin: 2rem 0;
    }

    h1{
        font-size: 3rem;
    }

    h2{
        font-size: 2rem;
    }

    h3{
        font-size: 1.5rem;
        margin-bottom: 1rem;
       
    }

    p{
        font-size: 1.25rem;
        line-height: 1.75;
    }

/*  ================
    3-layout-global 
    ================ */

    body{
        font-family: var(--second-font-family);
        color: var(--main-white);
        overflow-x: hidden; /* hide nav bar overflow */
    }

    .wrapper{
        /* contains section contents whilst allowing section backgrounds to fill page width */
        padding: 1rem;
        max-width: 1260px;
        margin: 0 auto;   
    }

    section{
       padding-block: 10rem;
       padding-inline: 1rem;
    }

    .section-hero{
        position: relative;
        min-height: max(100vh, 600px);
        padding: 0;
        background-image: linear-gradient(var(--space-blue),var(--col-9));
    }

    .hero-contents-container{
        margin-top: 35vh;
        left: 10%;
        position: absolute;
        z-index: 100;
    }

/*  ================
    4-About me section
    ================ */

/*  ================
    5-skills section
    ================ */
    .skills-list{
        display: grid;
        grid-template-columns: repeat(auto-fill, 100px);
        gap: 1rem;
        text-align: center;
    }
    .icon{
        color: var(--icon-skills);
        font-size: 5rem;
    }

    .icon-text{
        margin: 0.5rem 0  1rem 0;
    }

/*  ================
    6-Projects section
    ================ */
    .project-card{
      overflow: hidden;
    }

    .project-card:not(:last-child){
        margin-bottom: 7.5rem;
    }

    .project-image{
        margin-bottom: 1rem;
    }

    .project-image img{
     display: block;
      width: 100%;
      min-width: 100%;
      /* object-fit: cover; */
    }

    .project-description p{
        margin-bottom: 1rem;
    }

    .project-title{
        color: var(--hover);
    }
    
    .tool{
        display: inline-block;
        background-color: var(--main-black);
        padding-block: 0.5rem;
        padding-inline: 0.6rem;
        font-size: 1.2rem;
        margin-right: 0.5rem;
        margin-bottom: 1rem;
        color: var(--icon-skills);
    }
    .project-link-icon{
        padding-right: 0.5rem;
    }

    #projectscont{
        color: yellow;
    }
    
    .projects-wrapper > h3{
        margin-bottom: 7.5rem;
    }

    @media(min-width: 45rem){
        .project-card{
            overflow: hidden;
            display: flex; 
            justify-content: space-between;
            padding-block: 1.2rem;
          }

          .project-card:nth-child(even){
            flex-direction: row-reverse;
          }
      
          .project-image{
              width: 55%;
          }
          .project-image img{
            display: block;
            width: 100%;
            min-width: 100%;
            object-fit: cover;
    
          }
      
          .project-description{
              width: 40%;
          }
    }
    
   /*  ================
    7-Contact me section
    ================ */

    .contact-wrapper{
        display: flex;
        flex-wrap: wrap;
    }

    .contact-info{
        width:50%;
        padding-right: 2rem;
    }

    .contact-info p{
        margin-bottom: 2rem;
    }

    .socials-icon{
        font-size: 2rem;
        margin-right: 0.75rem;
        transition: all 0.2s ease-in-out;
        color: var(--main-white);
    }

    .socials-icon:hover,
    .socials-icon:focus{
        transform: scale(1.5);
        color: var(--hover);
        outline: none;
        cursor: pointer;
    }

    form{
        max-width: 600px;
        border: 1px solid var(--form-outline);
        padding: 2rem;
        width:50%;
    }

    form *{
        height: 2.5rem;
        width:100%;
        margin-bottom: 1.5rem;
        font-size: 1.2rem;
        border: 1px solid var(--main-black);
        padding: 0.5rem;
    }

    #comment{
        height: 12rem;
    }

    #submit{
        background-color: var(--submit-button-background);
        color: var(--submit-button);
        margin: 0;
    }

    #submit:hover{
        cursor: pointer;
        background-color: var(--submit-button);
        color: var(--submit-button-background);
    }

/*  ================
    8-Navigation
    ================ */

    .mobile-nav-toggle{
        display: none;
    }

    .header{
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 5000;
    }
   
    .nav-bar-list{
        display: flex;
        justify-content: right;
        gap: clamp(3rem , 5vw, 5rem);
        list-style: none;
        padding-block: 2rem;
        padding-inline: clamp(3rem, 10vw, 10rem);
        background: var(--nav-bar-background);
   
    }

    @supports (backdrop-filter: blur(2rem)){
        .nav-bar-list{
            backdrop-filter: blur(2rem);
        }
    }

    .nav-link{
        text-decoration: none;
        color: var(--nav-bar-links);
        font-size: 1.2rem;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        padding: 1.25rem 0;
        margin: 0 2rem;
        transition: all 0.3s ease-in-out; 
    }

    .nav-link:hover,
    .nav-link:focus{
        outline: none;  
        border-top: 4px  solid var(--main-white);
        border-bottom: 4px  solid var(--main-white);
        padding: 0.5rem 0;
    }

/*  ================
    9-mobile hamburger menu 
    ================ */

    @media (max-width: 45rem){

        .nav-bar-list{
            position: fixed; 
            z-index: 1000;
            inset: 0 0 0 30%;
            flex-direction: column;
            padding: min(30vh,10rem) 2rem;
            transform: translateX(100%);
            transition: transform 350ms ease-out;
        }

        .nav-bar-list[data-visible="true"]{
            transform: translateX(0%);
        }

        .mobile-nav-toggle[aria-expanded="true"]{
                background-image: url(../assets/cross-icon.svg);
                background-position: 50% 50%;
                cursor: pointer;
        }

        .mobile-nav-toggle{
            display: block;
            position: absolute;
            z-index:9999;
            cursor: pointer;
          
            background-image: url(../assets/menu-icon.svg);
            background-repeat: no-repeat;
            
            border: 0;
            aspect-ratio: 1;
            top: 1rem;
            right: 2rem;

            background-position: 50% 50%;
            border-radius: 50%;
            width: 4rem;
            background-color: hsla(0, 0%, 100%, 0.5);
        }
    }

/*  ================
    10-footer
    ================ */

    .footer-note{
        text-align: center;
        padding: 1rem;
        font-size: 1rem;
    }

/*  ================
    11-misc aria - screen readers, accessibility, etc. 
    ================ */

    @media (max-width: 992px){
        form {
            width: 100%;
        }
        .contact-info{
            margin-bottom: 2rem;
            width: 100%;
        }
    }

    @media (max-width: 45rem){

        h1 {
            font-size: 2rem;
        }
        .hero-contents-container{
            margin-top: 20vh;
        }
        
        .skills-list{
            grid-template-columns: repeat(auto-fill, 90px);
            gap: 0.5rem;
        }
        .icon-text{
            font-size: 1rem;
        }
    }
  
    .sr-only{
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    /*  ================
    12-form thankyou page 
    ================ */

    #thankyou-hero{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .thankyou-content-wrapper{
        text-align: center;
        background: var(--nav-bar-background);
        padding: 3rem;
    }
    
    
    /*  ================
    13-hero-animation 
    ================ */
    .shapes-container{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    
    .shape{
        position: absolute;
        height: 25px;
        width: 25px;
        background: var(--main-white);
        border-radius: 50%;
        bottom: 0;
    
        box-shadow: 
        0 0 5px 3px #0ff,
        0 0 60px pink,
        0 0 60px var(--main-white);
    
        left: var(--j);
        animation: hero-animation 15s linear infinite;
        animation-duration: calc(125s / var(--i));    
    }
    
    @keyframes hero-animation {
        0%{
            transform: translate(0) scale(0);
            opacity: 1;
        }
        80%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            transform: translateY(min(-100vh, -600px)) scale(1);
        }   
    }
    
    
    /*  ================
    14-generated-section-boundaries 
    ================ */
    .transition-container{
        position: relative;
    }
    .divider-1 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        transform: rotate(180deg);
    }
    
    .divider-2, .divider-3, .divider-4 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
    }
    
    .divider-1 svg,
    .divider-2 svg,
    .divider-3 svg,
    .divider-4 svg{
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
    }
    
    .divider-3, .divider-4 {
        transform: rotate(180deg);
    }
    
    .divider-1 svg {
        height: 174px;
    }
    .divider-2 svg {
        height: 56px;
    }
    .divider-3 svg {
        height: 108px;
    }
    .divider-4 svg {
        width: calc(146% + 1.3px);
        height: 136px;
    }
    
    .divider-1 .shape-fill,
    .divider-2 .shape-fill,
    .divider-4 .shape-fill {
        fill: var(--main-grey);
    }
    
    .divider-3 .shape-fill {
        fill: var(--col-9);
    }