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

/* CUSTOM PROPERTIES */

@font-face {
    font-family: 'Rota-Regular';
    src: url(Fonts/Rota-Regular.otf) format("opentype");
}
@font-face {
    font-family: 'Rota-Medium';
    src: url(Fonts/Rota-Medium.otf) format("opentype");
}
@font-face {
    font-family: 'Rota-Thin';
    src: url(Fonts/Rota-Thin.otf) format("opentype");
}
@font-face {
    font-family: 'Rota-Bold';
    src: url(Fonts/Rota-Bold.otf) format("opentype");
}
@font-face {
    font-family: 'Made Soulmaze';
    src: url(/Fonts/MADE\ Soulmaze\ PERSONAL\ USE.otf) format("opentype");
}

:root {
    --ff-primary: 'Rota-Regular', sans-serif;
    --ff-secondary: 'Rota-Bold', monospace;

     --fw-thin: 100;
     --fw-reg: 300;
     --fw-bold: 900;

     --clr-light: #cccccc;
     --clr-dark: rgb(83, 83, 83);
    
     --clr-accent: #92c5e7f1;
     --clr-accent2: #239ff1d8;
     --clr-accent-light: #e6f7ff; /* #e6f7ff */
     --clr-accent-alt: #81c5fd; /* #e6f7ff */
     --clr-projct-1: rgb(199, 98, 132);
     --clr-projct-2: red;
     --clr-projct-3: red;
     --clr-projct-4: red;
     --fs-h1: 3rem;
     --fs-h2: 2.25rem;
     --fs-h3: 1.25rem;
     --fs-body: 1rem;
     --fs-body-project: 1rem;
     --bs: 0.25em 0.25em 0.75em rgba(0,0,0,.25),
           0.125em 0.125em 0.25em rgba(0,0,0,.15) ;

}

/* GENERAL STYLES */

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}


body {
    background: radial-gradient( #0c161d 10%, rgb(1, 12, 19) 100%);
    /* background-color: #020b11; */
    /* background-color: #222222; */
    color: rgb(220, 242, 253);
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    line-height: 1.6;
    overflow-x: hidden;
}



section {
    padding: 5em 1.8em;
}

p {
    letter-spacing: 1px;
}

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


:focus {
    outline: 1px solid var(--clr-accent);
    outline-offset: 3px;
   
}

/* Buttons */

.btn {
    display: inline-block;
    padding: .5em 1.5em;
    background-color: rgb(3, 21, 37);
    color: #d8d8d8;
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'rota-bold', sans-serif; 
    transition: color 0.1s ease-in-out, background-color 0.2s ease-in-out;
}

.btn:hover {
    color: rgb(3, 21, 37);
    background-color:rgba(214, 240, 255, 0.795);
}

/* Typography */

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

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

.section__title {
    margin-bottom: .15em;
    
}

.section__title--about {
    /* background-color: red; */
   position: relative;
   left: -5px;
}

.intro {
    opacity: 0;
    animation: fadein 1.2s ease-in-out;
    animation-fill-mode: forwards;
}

.section__title--intro {
    font-weight: var(--fw-thin);
    
   
}

.section__title--intro strong {
    display: block;
}

.section__subtitle {
    margin: 0;
    font-size: var(--fs-h3);
    color: rgb(216, 214, 214);
}

.section__subtitle--intro,
.section__subtitle--about {
    
    font-family: 'rota-medium', sans-serif;
    margin-bottom: 0.5em;
    padding: .25em;
    color: rgb(15, 55, 88);
    overflow: hidden;
}

.section__subtitle--about {
    position: relative;
    left: -6px;
    margin-bottom: 10px;
    color: rgb(129, 197, 253);
 }



.section__subtitle--intro {
    color: #92c5e7f1;
}

.section__subtitle--intro::after {
    content: "";
    position:absolute;
    margin:-20px;
    width: 40px;
    height: 40px;
    border-radius: 0px;
    top: 50px;
    left: 0px;
    transform:rotate(45deg);
   
  
}


/* HEADER */

.logo {
    
    padding: 10px;
    padding-left: 10px;
    
    border: 1px solid transparent;
    /* box-shadow: -10px -10px 1px var(--clr-accent); */
    transition: box-shadow 0.2s ease-in-out;
   
   }

   .logo:hover {
    box-shadow: -3px -3px 1px var(--clr-accent);
    border: 1px solid rgb(12, 30, 43);
   }

.logo h3 {
    font-size: 30px;
}

.logo a {
    text-decoration: none;
    color: var(--clr-accent-light)
   
    
}

header {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    
}

.decoration {
    position: absolute;
    z-index: 0;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 55px;
    background-color: #b8cbd4;
}


.nav {
    position: fixed;
    background-color: rgb(3, 18, 27);
    color: rgb(245, 245, 245);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
}

.nav__list {
    display: flex;
    list-style: none;
    height: 100%;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 50px;
    margin: 0;
    padding: 0;
    align-items: center;
   
}

.nav__link {
    font-family: 'rota-bold';
    color: rgb(212, 236, 255);
    font-size: var(--fs-h2);
    text-decoration: none;
  
   
}

.nav__link:hover {
    color: var(--clr-accent);
}

.nav-toggle {
   
    background:transparent;
    border: 0;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 300;
    
    border: 1px solid transparent;
    display: none;
    padding: 25px 15px 20px 10px;
   
}

/* .hamburger-toggle {
    background-color: red;
    width: 40px;
    height: 30px;
} */

.nav-toggle:focus  {
     outline: none;
     
}

.nav-toggle:active {
    background-color: none;
}



.nav-open .nav {
    
    transform: translateX(0%);
    opacity: 1;
   
}

.nav-open .nav-toggle {
     position: fixed;
    
     padding: 25px 15px 20px 10px;
}

.nav-open .hamburger {
    width: 1.8em;
}

.nav-open .hamburger::before {
    transform: translateX(15px) translateY(-2.4px) rotate(-50deg);
    width: 1em;
    
}

.nav-open .hamburger::after {
     opacity: 1;
     transform: translateX(15px) translateY(2px) rotate(50deg);
     width: 1em;
    
     
}


.nav-wide {
    /* background-color: rgb(145, 143, 146); */
    font-family: 'Rota-thin', sans-serif;
    padding: 10px;
}
.nav__list-wide  {
    list-style: none;
    display: flex;
    justify-content: center;
    margin-top: 5px;
    font-family: 'Rota-thin', sans-serif;
    transition: color 0.2s ease-in-out;
    text-decoration: none;
}
.nav__list-wide a {
    padding: 5px 15px 5px 15px;
    margin-left: 50px;
    border-radius: 50px;
    color: #dff1ff;
    font-size: 18px;
    text-decoration: none;
    font-family: 'Rota-regular', sans-serif;
    transition:color 0.2s ease-in-out;
  
   
}
.nav__list-wide a:hover {
  color: #b1b1b1;
}




.hamburger {
   
    position: relative;
    display: none;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    
    width: 2.5em;
    height: 3px;
    border-radius: 1em;
    transition: color 250ms ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out, transform 0.3s ease-in-out;
    background-color: rgb(204, 236, 252);
    z-index: 1000;
}


.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
}

.hamburger::before {
    top: 6px;
    width: 1em;
}

.hamburger::after {
    bottom: 6.2px;
    width: 1.8em;
}

/* Individual Project Styles */

.intro-project {
    color: var(--clr-accent-light);
    text-align: center;
    
}

.project-title {
   color: var(--clr-accent-light);
}

.project-subtitle {
    font-size: var(--fs-h3);
    color: rgb(149, 206, 255);
    text-align: center;
    padding: 0;
    margin-bottom: -60px;
 }

.project-para {
    letter-spacing: 0.8px;
    margin-bottom: 50px;
    /* color: var(--clr-accent-light); */
    text-align: center;
    color: var(--clr-accent-light);
    font-size: var(--fs-body-project);
   
    
}

.project-para strong {
    color: rgb(166, 213, 255);
    text-shadow: 1px 0px 10px rgba(27, 96, 165, 0.568);
    font-family: 'Rota-Bold', sans-serif;
}

.project-pics {
    margin-top: 40px;
    
}






/* nav {
    display: none;
} */

/* INTRO SECTION */

.intro {
    position: relative;
}

.intro__img {
    transform: skew(60deg) translateX(-40px) translateY(10px);
    
    
}

.intro__img::before {
    content: '';
    top: 0px;
    left: 100px;
    position: fixed;
    width: 300px;
    height: 150px;
    
    box-shadow: 0px 10px 70px rgba(179, 219, 245, 0.37),
    100px -110px 0px rgba(179, 219, 245, 0.034);
    
    
}

.intro__img-project {
     transition: height 0.3s;
     z-index: -20;
     height: 50px;
     background-color: rgb(6, 35, 61);
     transform: skew(60deg) translateX(-40px) translateY(10px);
     animation: openup 0.8s ease-in-out 0.1s;
     animation-fill-mode: forwards;
}

.intro__img-project::before {
    content: '';
    top: 0px;
    left: 50%;
    position: fixed;
    width: 300px;
    height: 150px;
    box-shadow: 0px 10px 70px rgba(179, 219, 245, 0.37),
    100px -110px 0px rgba(179, 219, 245, 0.034);
    
}



/* My services section */

.my-services {
    /* background-color: rgb(3, 21, 37); */
    background: linear-gradient(15deg,#47a6e6f1 22%, #b8cbd4 60%   ), url("/Web-Dev-Portfolio-Pictures/Green\ grass.jpg") no-repeat center; 
    background-size: cover;
    color: rgb(248, 248, 248);
    text-align: center;
    
}

.services {
    margin-bottom: 4em;
}

.services h3 {
    margin-bottom: 15px;
    margin-top: 15px;
    
}

.service {
    max-width: 500px;
    margin: 0 auto;
    color: rgb(19, 29, 39);
}

.service p {
    font-family: 'rota-regular', sans-serif;
    
}

.service h3 {
    font-family: 'rota-regular', sans-serif;
    font-size: 1.3em;
    letter-spacing: 1px;
}

.about-me__body p {
    margin-top: 10px;
    color: rgb(204, 236, 252);
}

.my-services img {
    object-fit: cover;    
}

.section__title--services {
    color: rgb(19, 29, 39);
    margin-bottom: 1.5em;
    position: relative;
}

.section__title--services::after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    margin: 0.5em auto 1em;
    background-color: rgb(2, 13, 26);
    opacity: 0.7;
    
}

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

.about-me__img {
      box-shadow: var(--bs);
      
}
.section__title-work {
    color: rgb(215, 239, 255);
    font-family: 'rota-regular', sans-serif;
    letter-spacing: 1px;
    
}


.section__title--about {
    color: rgba(232, 246, 255, 0.966);
    
}

.resume {
    display: inline-block;
    text-decoration: none;
    padding: 0.8rem;
    background-color: #1c2227;
     color: rgb(129, 197, 253);
     border-radius: 0.2rem;
     transition: color 0.2s, background-color 0.2s;
     font-size: 1.2em;
     font-family: 'rota-bold', sans-serif;
}

.resume:hover {
    background-color: rgb(129, 197, 253);
    color: #1c2227;
}

/* My Work */ 

.gradient-purposes {
    background: linear-gradient(rgba(147, 200, 252, 0.267)b(22, 23, 24) 10%,#030f16);
}

.my-work {
   
    color: rgb(220, 242, 253);
    text-align: center;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}



.section__subtitle-work {
    color: rgb(129, 197, 253);
    
    font-family: 'rota-regular', sans-serif;
   
    margin-bottom: 1em;
}

.portfolio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
    grid-gap: 4px;
   
}

.portfolio__item {
    /* background-color: var(--clr-accent); */
    overflow: hidden;
   border-radius: 4px; 
   box-shadow: 0px 0px 1px var(--clr-accent);
   border: 1px solid rgba(12, 14, 167, 0.185);
   transition: transform 0.3s, box-shadow 0.3s;
  
}

.portfolio__item:hover {
transform: translateY(-4px);
box-shadow: 0px 0px 10px var(--clr-accent);

}


.portfolio__img {
    transition: opacity 0.1s ease-in-out;
    object-fit: cover;
    width: 100%;
    height: 100%;
    background-color: var(--clr-accent);
    
}

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


.portfolio__item:focus .portfolio__img {
    opacity: 0.8;
   
}

.portfolio__item::before {
    content: '';
    transform: scale(2);
    display: block;
    position: absolute;
    background-color: red;
}

.next-and-previous {
   /* background: radial-gradient( #01060abd 10%, rgba(10, 30, 44, 0.726) 100%); */
    /* color: rgb(166, 213, 255); */
    text-align: center;
    padding: 2.5em 0;
    font-size: 18px;
    width: 100%;
    opacity: 0;
    animation: fadein 1.2s ease-in-out;
    animation-fill-mode: forwards;
 
}

.next-and-previous a {
   background-color: rgba(35, 41, 44, 0.459);
    /* color: inherit; */  
    padding: 10px;
    text-decoration: none;
    color: rgb(166, 213, 255); 
    transition: color 0.2s;
    border-radius: 3px;
}

.next-and-previous a:hover {
    color: #ccedff;
    
}




footer {
    background: #030f16;
    color: rgb(222, 239, 253);
    text-align: center;
    padding: 2.5em 0;
    font-size: 20px;
    width: 100%;
    opacity: 0;
    animation: fadein 1.2s ease-in-out;
    animation-fill-mode: forwards;
}

footer a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.footer__link {
    font-size: var(--fs-h3);
    font-family: 'rota-bold';
  
  
}

.footer__link:hover,
.social-list__link:hover {
    color: var(--clr-accent-alt);
}

.footer__link:hover {
    text-decoration: underline;
}

.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    width: 100%;
    transition: color 0.2s;
}

.social-list__item {
    margin: 0 .5em;
}




/* Individual portfolio item styles */

.project-pic-container {
    display: flex;
    justify-content: center;
    flex-direction: row;
   
    
    max-width: 2000px;
    opacity: 0;
    animation: fadein 1.2s ease-in-out;
    animation-fill-mode: forwards;
}

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

.portfolio-item-individual p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.portfolio-item-individual img {
   object-fit: cover; 
   margin-left: auto;
   margin-right: auto;
   border-radius: 1px;
   box-shadow: 0px 0px 20px rgb(10, 10, 10),
   0px 0px 0px 12px rgba(34, 68, 88, 0.233)
   ;
   background-color: var(--clr-accent-alt);
  border-radius: 2px;
  width: 100%;
}

.back-to-top {
    position: fixed;
    bottom: 56px;
    z-index: 123;
    right: 0;
    transform: translateX(-50%) translateY(50%);
    width: 55px;
    height: 55px;
    text-align: center;
    padding: 10px;
    background-color: rgba(193, 235, 255, 0);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'rota-thin';
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    
}
.name-emphasis {
    transition: margin-left 0.2s ease-in-out, text-shadow 0.8s ease-in-out;
 
}

.name-emphasis:hover {
   
    text-shadow: 2px 0px 1px rgb(223, 223, 223),
    4px 0px 1px rgb(7, 46, 65);
     margin-left: 10px;
     
     
 }

.back-to-top::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 10px;
    background-color: rgba(184, 234, 253, 0.836);
    border-radius: 50px;
    top: 10px;
    left: 30px;
    box-shadow: 0px 10px 1px rgba(28, 44, 51, 0.836),
    10px 10px 1px rgba(28, 44, 51, 0.836),
    -9px 11px 0px rgba(184, 234, 253, 0.836),
    10px 10px 1px  rgba(184, 234, 253, 0.836)
    ;
    transform: translate(-50%, 50%) rotate(-40deg);
    animation: glow-right 3s ease-in-out 5;
    
}
.back-to-top::after {
    position: absolute;
    content: '';
    width: 1px;
    height: 10px;
    box-shadow: 0px 10px 1px rgba(8, 19, 24, 0.836),
    -10px 10px 1px rgba(28, 44, 51, 0.836),
    9px 11px 0px rgba(184, 234, 253, 0.836),
    -10px 10px 1px  rgba(184, 234, 253, 0.836);
    background-color: rgba(184, 234, 253, 0.836);
    border-radius: 50px;
    top: 10px;
    left: 24px;
    animation: glow-left 3s ease-in-out 5;
    transform: translate(-50%, 50%) rotate(40deg);
}

/* background-color:rgba(8, 19, 24, 0.836) */

.back-to-top.active {
    
    pointer-events: auto;
    opacity: 1;
}


.loader {
    position: fixed;
    background-color: rgb(8, 13, 22);
    z-index: 1000;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.loader.hidden {
    animation: fadeOut 0.5s ease-in; 
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
}


/* Animations */


/* @keyframes bigger {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.01);
    }
    100% {
        transform: scale(1);
    }
} */


/* @keyframes slide {
   0% {
    left: -6em;
    opacity: 0;
    transform: skew(10deg);
   }

    100% {
        left: -1em;
        transform: skew(0deg);
        opacity: 1;
    }
} */

@keyframes glow-right {
    0% {
        box-shadow: 0px 10px 1px rgba(28, 44, 51, 0.836),
        10px 10px 1px rgba(28, 44, 51, 0.836),
        -9px 11px 0px rgba(184, 234, 253, 0.836),
        10px 10px 1px  rgba(184, 234, 253, 0.836)
        ;
    }
    50% {
        box-shadow: 0px 10px 1px rgba(28, 44, 51, 0.836),
        10px 10px 1px rgba(28, 44, 51, 0.836),
        -9px 11px 0px rgba(184, 234, 253, 0.836),
        10px 10px 10px  rgba(184, 234, 253, 0.836)
        ;
    }
    100% {
        box-shadow: 0px 10px 1px rgba(28, 44, 51, 0.836),
        10px 10px 1px rgba(28, 44, 51, 0.836),
        -9px 11px 0px rgba(184, 234, 253, 0.836),
        10px 10px 1px  rgba(184, 234, 253, 0.836)
        ;
    }
}

@keyframes glow-left {
    0% {
        box-shadow: 0px 10px 1px rgba(8, 19, 24, 0.836),
        -10px 10px 1px rgba(28, 44, 51, 0.836),
        9px 11px 0px rgba(184, 234, 253, 0.836),
        -10px 10px 1px  rgba(184, 234, 253, 0.836);
    }
    50% {
        box-shadow: 0px 10px 1px rgba(8, 19, 24, 0.836),
        -10px 10px 1px rgba(28, 44, 51, 0.836),
        9px 11px 0px rgba(184, 234, 253, 0.836),
        -10px 10px 10px  rgba(184, 234, 253, 0.836);
    }
    100% {
        box-shadow: 0px 10px 1px rgba(8, 19, 24, 0.836),
    -10px 10px 1px rgba(28, 44, 51, 0.836),
    9px 11px 0px rgba(184, 234, 253, 0.836),
    -10px 10px 1px  rgba(184, 234, 253, 0.836);
       
    }
}

@keyframes openup {
    0% {
      height: 50px;
     
    }
   
    100% {
        height: 0px;
       
    }
}

@keyframes fadein {
    
    
    100% {
        opacity: 1;
    }
}