:root {
--white-main:#f5f5f5;
--yellow-main:#ffdd00;
--blue-main:#3399cc;
--red-main:#ed2024;
--black-main:#000;
--text-clr:#000;
--font-fam-brandon-gro: "brandon-grotesque", sans-serif; 
--font-fam-futura-pt:"futura-pt", sans-serif;
--fontfam-layout:  "hwt-mardell", sans-serif;
--fontfam-logo:  "rig-solid-bold-halftone",  system-ui, sans-serif;
--fontfam-web:   "unibody-8-new",  system-ui, sans-serif;
--fontfam-illustration: "active",  system-ui, sans-serif;
--drop-shadow-right: drop-shadow(0.3rem 0.4rem 0.2rem rgba(0, 0,0, 0.25));
--drop-shadow-right-bottom: drop-shadow(0.2rem 0.2rem 0.13rem rgba(0, 0,0, 0.25 ));
--drop-shadow-left: drop-shadow(-0.5rem 0.32rem 0.2rem rgba(0, 0,0, 0.25));
--drop-shadow-down: drop-shadow(0rem 0rem .2rem rgba(0, 0,0, 0.25));
--neon-text-color: #ed2024;
--neon-border-color:#3399cc;
}

html{
    margin: 0;
    padding: 0;
}


body {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #F5F5F5;
overflow-x: hidden;
overflow-y: auto;
scroll-behavior: smooth;
scroll-snap-type:mandatory;
font-family: var(--font-fam-brandon-gro);
font-size: 1.1rem;
}


/* scroll bar */

/* width */
::-webkit-scrollbar {
width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 9px rgb(0, 0, 0,0.2); 
border-radius: 2px;
background-color: var(--gray-white);
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #ffdd00; 
border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background:#000;
}

h1,h2,h3,h4,h5,h6,a{
font-weight: normal;
font-size: minmax(14pt, 18pt) ;
font-family: var(--font-fam-brandon-gro) ;
}


*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
scroll-behavior: smooth;
scroll-snap-type:mandatory;
}


header{

margin: 0;
padding: 0;



} 




nav {
position: fixed;
z-index: 1000 !important;
margin: 0;
padding: 0; 
background-color: var(--yellow-main);
margin: 0;
padding: 0;
overflow:hidden;
height: 100%;
width: 130px;
border-top: none;
border-right: 3px solid var(--white-main);
box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
text-align: center;
}

@media screen and (max-width: 700px){
nav {
right: 0;
left: 0;
bottom: 0;
margin: 0;
height: 75px;
width: 100%;
border-right: none;
border-top: 3px solid var(--white-main);
border-right: none;
}
}



nav ul {
width: 100%;
display: flex;
z-index: 100 !important;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: space-around;
justify-items: center;
margin: 0;
padding: 0;

}
@media screen and (max-width: 700px) {
nav a img {
width: 100%;
max-width: 42px !important;
}
}



@media screen and (min-width: 700px) {
nav ul {
height: 100lvh;
}}

@media screen and (max-width: 700px) {
nav ul {
flex-direction: row;
height: 75px;
}
}



nav img{

position: relative;
width: 100%;
max-width: 50px !important;
}


nav img:hover{
animation: gelatine 1.9s infinite;
cursor: pointer;
}
@keyframes gelatine {
from, to { transform: scale(1, 1); }
25% { transform: scale(0.9, 1.1); }
75% { transform: scale(1.1, 0.9); }
50% { transform: scale(0.95, 1.05); }
25% { transform: scale(0.9, 1.1); }
50% { transform: scale(1.1, 0.9); }
75% { transform: scale(0.95, 1.05); }
}

nav ul li{
position: relative;
display: grid;
place-content: center;
padding: 0;
list-style: none;
}

nav ul li a{
color: var(--black-main);
font-family: var(--font-fam-brandon-gro) !important;
font-weight: 600;
letter-spacing: .71pt;
z-index: 100 !important;
text-align: center;

}


nav ul li a:hover{
color: var(--blue-main);
}



@media screen and (max-width: 700px){
#mobile-hidden{
display: none;
}
}

@media screen and (min-width: 700px) {
nav ul li.active {
background: var(--white-main);
padding-block: 1rem;
padding-inline: 100%;
position: relative;
border-radius: 0;
z-index: 13;
min-height: 1rem;
letter-spacing: .7pt;
font-weight: 700;
overflow: hidden;
font-size: 1.2rem;
filter: var(--drop-shadow-down);

}
}

@media screen and (max-width: 700px) {
nav ul li.active {
margin: 0;
padding: 0;
background: var(--white-main);
padding-inline: 1rem;
position: relative;
border-radius: 0;
z-index: 13;
height: 100%;
letter-spacing: .7pt;
font-weight: 700;
overflow: hidden;
font-size: 1.2rem;
filter: var(--drop-shadow-down);

}

}


nav ul li.active a {
color: #3399cc;
z-index: 1000;
}



/* ------ Main --------------------------------------------------------------------------------- */

main{
position: relative;
display: grid;
background-color: var(--white-main);
overflow: hidden;
z-index: 1;
margin: 0;
z-index: 3;
padding: 0 5%;
overflow-x: hidden;
}

@media screen and (min-width: 700px){
main{
margin-left: 130px !important;
margin-bottom: 0;
}
}

@media screen and (max-width: 700px){
main{
margin: 0 auto;
margin-left: 0;
margin-bottom: 110px !important;
}

#mobile-hidden{
display: none;
}
}


.title-card{
max-height: 100svh;
margin: 1.5rem 0;
display: flex;
justify-content: space-around;
flex-direction: column;
align-content: center;
gap: 3rem;
}


.title-card section.card-top{
position: relative;
display: flex;
justify-content: end;



}

.card-top > h1{
margin-top: 1rem;
font-weight: 500;
font-size: clamp( 1rem, 2vw, 1.5rem);   


}

.card-top h2{
writing-mode: vertical-rl;
color: var(--red-main);
font-weight: 600;
letter-spacing: 1pt;
font-size: clamp(1.5rem, .7rem + 2vw, 2rem)
}

.title-card img{
margin:0  auto;
padding:0 ;
width: 100%;
filter: var(--drop-shadow-right-bottom);
}


@media(width < 700px){
.title-card img{
width: 250px;
max-width: 100%;
}
}

@media(width >= 700px){
.title-card img{
max-width: 100%;
width: 350px;
}
}




section.card-bottom {
padding: 1rem;
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
/* margin-left: 5vw ; */
}

section.card-bottom  > h1{
margin-left: 1.2rem;
margin-bottom: .5rem;
writing-mode: vertical-lr;
font-weight: 600;
color: var(--blue-main);
font-size: clamp(1.2rem, .7rem + 2vw, 2.1rem);
letter-spacing: 1pt;
}

section.card-bottom  > h2{
color: var(--black-main);
font-size: clamp( 1rem, 2vw, 1.5rem);   
padding-block: 0;
font-weight: 500;
margin-inline-start: .8rem;
}



section.welcome{
margin:  35vh 0;
}


.welcome h1{
padding:0 5vw;
margin: 0;
color: var (--blue-main);
font-family: "brandon-grotesque", sans-serif;
font-weight: 600;
letter-spacing:.5vw;
font-style: normal;
font-size: clamp(4rem, .8rem + 10vw, 6rem);
line-height: 0;
float: right; 
}



.good-sign{
position: relative;
margin: 1vmax 5vw;
display: flex;
flex-direction: row;
justify-content: start;
justify-items: start;
align-items: center;
align-content: center;
flex-wrap: wrap;
gap: 9vmax;
max-width: 900px;
}



.good-sign img{

max-width: 330px;
margin: 0;
width: 100%;
border-radius:50%;
border: 4px solid  var(--bg-clr);
filter: var(--drop-shadow-right-bottom);
}

.good-sign p{
font-weight: 500;
text-align: start;
max-width: 22ch;
font-size: clamp(12pt, .5rem + 5vw, 16pt);
letter-spacing: 1pt;
line-height: 1.6;
padding: 1rem  1.3rem;
border-radius: .1rem;
color: var(--white-main);
background-color: var(--blue-main);
filter: var(--drop-shadow-right-bottom);
}

.good-sign p em{
font-weight:700 ;
}




.good-sign p:nth-child(3){
font-weight: 500;
font-size: clamp(12pt, .5rem + 5vw, 16pt);
font-style:normal;
color: var(--white-main);
background-color: var(--red-main);
filter: var(--drop-shadow-right-bottom);

}




/* -------  Design Stuff section  -------- */


aside.ican{
margin:  20vmax 0;
display: grid;
place-items: start;
margin-left: 8vmax;
}

@media ( width < 450px) {

aside.ican{
place-items: center;
margin-left: 0;
}
}
.ican-bg{
display: flex;
justify-content: end;
align-items: baseline;
gap: .5rem;
border-radius: .31rem;
}

.ican p{
font-size: clamp(12pt, .7rem + 5vw, 1.6rem);

margin: 0;
font-weight: 600;
color: var (--black-main);
border-radius: 1rem;

}

.load-3{
display: flex;
flex-direction: row-reverse;
gap: .3rem;
}


.line {
display: block;
min-width: 4px;
min-height: 4px;
width: 100%;
border-radius: 15px;
background-color: var(--black-main);
}

.load-3 .line:nth-last-child(1n) {
animation: loadingC .9s .09s ease-in-out infinite;
}
.load-3 .line:nth-last-child(2) {
animation: loadingC .9s .19s ease-in-out infinite;
}
.load-3 .line:nth-last-child(3) {
animation: loadingC .9s .29s ease-in-out infinite;
}


@keyframes loadingC {
0% {
transform: translate(0, -1);
}
50% {
transform: translate(0, -3px);
}
100% {
transform: translate(0, -1);
}
}

@media (width < 450px){
.stuff-links{

margin-right: 0;

justify-content: center;

}
}

.stuff-links{
position: relative;
margin:  15vmax  0 30vmax 0;
margin-right: 10%;
height: 100%;
max-height: 200px;
display: flex;
text-align: end;
justify-content: end;
justify-items: center;
justify-items: center;
align-items: center;
gap: 1rem;
}

.stuff-links li{
padding: 1vmax 0;
}

.stuff-links h2{
padding: 0;
margin: 0;
margin-inline-end:2vmax ;
writing-mode: vertical-rl;
padding-inline: 9rem;
}
a#stuff-logos{  
font-family:var(--fontfam-logo);
font-size: clamp(1rem, 1.8rem + 5vw, 8rem);
color: var(--blue-main);

}
a#stuff-illustrations{ 
font-family:var(--fontfam-illustration);
font-size: clamp(1rem, 1.8rem + 5vw, 9rem);
color: var(--blue-main);

}
a#stuff-webdev{  
font-family:var(--fontfam-web);
font-size: clamp(1rem, .9rem + 5vw, 5.1rem);
color: var(--blue-main);
}
a#stuff-layouts{
font-family: var(--fontfam-layout);
font-size: clamp(2.1rem, 1.8rem + 5vw, 8rem);
color: var(--red-main);
}

a#stuff-logos:hover{
color: #000;
filter: var(--drop-shadow-right);
}

a#stuff-illustrations:hover{
color: #000;
filter: var(--drop-shadow-right);}

a#stuff-webdev:hover{
color: #000;
filter: var(--drop-shadow-right);
}

a#stuff-layouts:hover{
color: #000;
filter: var(--drop-shadow-right);
}

/* ------------------------------------- footer ------ */

footer{
    margin: 0 auto 0 100px;
    display: flex;
    text-align: center;
    width: 100%;
    bottom: 0;
    right:0;
    padding: 1.5rem 0;
    color: var(--white-main);
    background-color: var(--black-main);
    z-index:5;
    text-wrap: wrap;
    }
    
    footer p{
    font-size: 10pt;
    }
    
    @media(max-width: 700px){
    footer{
    width: 100%;
    margin-left: 0;
    margin-bottom: 70px;
    }
    }
    
    
    /*  --- footer glitch --- */
    
    .glitch {
        display:block;
    margin-top: 1vmax;
    position: relative;
    font-size: 1rem;
    font-weight: bold;
    color: #FFFFFF;
    letter-spacing: 3px;
    z-index: 1;
    }
    
    .glitch-wrapper{
    display: grid;
    place-items: center;
    width: 100%;
    }
    
    .glitch:before,
    .glitch:after {
    display: block;
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
    }
    
    .glitch:before {
    animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    color: #00FFFF;
    z-index: -1;
    }
    
    .glitch:after {
    animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
    color: #FF00FF;
    z-index: -2;
    }
    
    @keyframes glitch-it {
    0% {
    transform: translate(0);
    }
    20% {
    transform: translate(-2px, 2px);
    }
    40% {
    transform: translate(-2px, -2px);
    }
    60% {
    transform: translate(2px, 2px);
    }
    80% {
    transform: translate(2px, -2px);
    }
    to {
    transform: translate(0);
    }
    }
    
    
    
    
    





/* ---



------------------------------ About Page --- 



---*/



.about-container{
margin: 1.5rem 0;
position: relative;
display: flex;
align-content: center;
align-items: start;
justify-content: center;
justify-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 2rem;

}

@media( width < 1100px){

.about-container{

flex-direction: column;

}
article.in-the-middle{
margin: 0 ;
padding: 0;
}  

.on-the-right{  

padding: 0 ;
}
}

.on-the-left{
margin: 0;
max-width: 300px;
display: flex;
flex-direction: column;
justify-items:start;
justify-content: center;
align-items: start;
align-content: start;
text-wrap:balance;
text-align: start;
gap: .9rem;

}

img.img-top{
margin: 0 ;
width: 275px;
max-width:100%;

border-radius: 50%;
filter: var(--drop-shadow-down);
filter: var(--drop-shadow-right-bottom);
}

.on-the-left p{
text-wrap: wrap;
font-size: 13pt;
line-height: 1.7;

}

.on-the-left h1{
margin: 1vmax 0;
padding: 1rem;
font-size: 18pt;
font-weight: bolder;
background-color: var(--blue-main);
color: var(--white-main);
filter: var(--drop-shadow-right-bottom);


border-radius: .1rem;
/* border: 2px solid var(--white-main);
outline: 3px solid var(--blue-main); */
}
.on-the-left h3{
display: block;
font-size: 1.4rem;
font-weight: bold;
text-wrap: wrap;
}

.on-the-left h4{
display: block;
font-size: 1.3rem;
font-weight: 500;
color: var(--red-main);
}


.social-links{
margin: 0 ;
display: flex;
gap: 3vmax;
justify-content:start;
justify-items: center;
justify-items: center;

}

.social-links a{
background-color: var(--blue-main);
border-radius: 50%;
display: grid;
place-items: center;
width: 60px;
height: 60px;
}

.social-links a:hover{
background-color: var(--red-main);
}

.social-links img{
max-width: 25px;
max-height: 25px;
width: 100%;


}

article.in-the-middle{
margin: 0 auto;
max-width: 300px;
color: var(--bg-clr);
letter-spacing: .6pt;
font-size: 1.1rem;
display: flex;
flex-direction: column;
border: 4px solid #f5f5f5;
text-align: start;
line-height: 1.4;
display: flex;
flex-direction: column;
justify-items:start;
justify-content: center;
align-items: start;
align-content: start;
text-align: start;
text-wrap:balance;
gap: .9rem;
}

.education{
margin: 0 ;
padding: 1rem ;
border-radius: .1rem;
background-color: var(--blue-main);
color: var(--white-main);
filter: var(--drop-shadow-right-bottom);


}

.education h3{
display: block;
font-size: 1.3rem;
font-weight: bold;
text-wrap: wrap;
}


.education p{
display: block;
font-size: 13pt;
margin: 0 auto;
}


.software-skills{
/* border: 2px solid var(--white-main);
outline: 4px solid var(--blue-main); */
color: var(--black-main) !important;
display: block;
width: 300px;
max-width: 100%;
border-radius: .1rem;   

}


.software-skills h3{
display: block;
font-size: 1.1rem;
margin-block-start: .51em;
margin-block-end: .51em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}


.software-skills p{
display: block;
margin-block-start: 1.1rem;
margin-block-end: .5em;
margin-inline-start: 0px;
margin-inline-end: 0px;}

.skills-bar{
position: relative;
border-radius: .1rem;
z-index: 3;
background-color: var(--white-main);
border: 2px solid var(--white-main);
outline: 2px solid var(--blue-main);

}

.skills{
display: block;
padding-top: 5px;
padding-bottom: 5px;  
}

.aphotoshop{
width: 55%; 
background-color: var(--blue-main);
z-index: 1;
border-radius: .1rem;
}

.ailllustrator{
width: 70%; 
background-color: var(--blue-main);
z-index: 1;
border-radius: .1rem;
}

.aindesign{
width: 50%; 
background-color: var(--blue-main);
z-index: 1;
border-radius: .1rem;
}

.visstudio{
width: 60%; 
background-color: var(--blue-main);
z-index: 1;
border-radius: .1rem;
}

.coding-skills{
margin: 1vmax 0;
width: 300px;
max-width: 100%;
border-radius: .1rem;
color: var(--black-main) !important;
}


.coding-skills h3{
display: block;
font-size: 1.1rem;
font-weight: bold;
text-wrap: wrap;
}

.coding-skills p{
display: block;
font-size: 13pt;
margin-block-start: .81rem;
margin-block-end: .51rem;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

.html{

width: 70%; 
background-color: var(--blue-main);
z-index: 1;
border-radius: .1rem;}

.css{
width: 60%; 
background-color: var(--blue-main);
z-index: 1;
border-radius: .1rem;
}

.javascript{
width: 40%; 
background-color: var(--blue-main);
z-index: 1;
border-radius: .1rem;
}

.work-experiance{
display: block;

padding: 1rem;
text-align: start;
background-color: var(--blue-main);
color: var(--white-main);
border-radius: .1rem;
filter: var(--drop-shadow-right-bottom);
}


.work-experiance h3{
display: block;
display: block;
font-size: 1.1rem;
font-weight: bold;
text-wrap: wrap;
}

.work-experiance p{
display: block;
font-size: 13pt;
margin-block-start: 1rem;
margin-block-end: .51em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

.on-the-right{
margin: 0 ;
display: flex;
max-width: 300px;
flex-direction: column;
justify-items:center;
justify-content: center;
align-items: start;
align-content: center;
text-wrap:balance;
text-wrap:wrap;
gap: .9rem;
}

.on-the-right p{
font-size: 13pt;
line-height: 1.7;
padding: 1rem ;
text-align:start ;
}



.on-the-right img{
width: 300px;
max-width: 100%;
height: auto;
display: grid;
place-items: center;
margin: 0;

border-radius: .3rem;
filter: var(--drop-shadow-right-bottom);
border-radius: .1rem;
/* outline: 4px solid var(--blue-main); */
}

img.bottom{
margin:0 ;
border-radius: 50%;
max-width:100%;
width: 275px;

}










/* ---



------------------------------  Stuff Page --- 



---*/



section.stuff-container{
margin:  5vmax auto;
width: 100%;
max-width: 800px;
}

h1.logos-title{
margin: 1rem 0;
font-family: var(--fontfam-logo);
font-size: 42pt;
color: var(--blue-main);
filter: var(--drop-shadow-right-bottom);
}

h1.illustrations-title{

margin: 1rem 0;

font-size: 42pt;
font-family: var(--fontfam-illustration);
color: var(--blue-main);
filter: var(--drop-shadow-right-bottom);
}

h1.web-dev-title{
margin: 1rem 0;

font-family: var(--fontfam-web);
font-size: 22pt;
text-wrap: wrap;
max-width: 9ch;
font-weight: bold;
color: var(--blue-main);
filter: var(--drop-shadow-right-bottom);
}

h1.layouts-title{ 
margin: 1rem 0;

text-align: start;
font-family: var(--fontfam-layout);
font-size: 42pt;font-weight: normal;  
color: var(--red-main);
filter: var(--drop-shadow-right-bottom);}

.logos-gallery{
margin:  0;
padding:1rem;
display: grid;
place-items: center;
place-content: center;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
grid-auto-rows:auto;
grid-auto-flow:dense;
gap:3vmax;
filter: var(--drop-shadow-right-bottom);

}

.img-wrap { 
cursor: pointer;
}


.img-wrap  img{
border-radius: 100vw;
max-width: 200px;
width: 100%;
object-fit: contain;
border-radius: .1rem;
}



.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 30; /* Sit on top */
left: 0;
right: 0;
top: 0;
right: 0;
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(51, 153, 204); /* Fallback color */
background-color: rgba(51, 153, 204,0.91); /* Black w/ opacity */
}

.modal-content {
margin:  5% ; /* 15% from the top and centered */
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: center;
gap: 5vmax ;
color: var(--white-main);
font-size: cal(1rem + 5vw);
/* Could be more or less, depending on screen size */
}

.modal-content img{
max-width: 600px;
min-width: 100px;
width: 100%;
}
.modal-content p{
margin-block: 5vmax;
max-width: 33ch;
font-size: 1.5em;
}

.close {
display: block; 
color: var(--red-main);
font-size: 6rem;
font-weight: bolder;
}

.close:hover,
.close:focus {
color: var (--red-main);
text-decoration: none;
cursor: pointer;
}




/* ---



------------------------------  Project Page --- 



---*/
.image-slider {
max-height: 100;
margin: 6vmax auto;
max-width: 1000px;
}

.main-display-container{

display: flex;
justify-content: center;
justify-items: center;
flex-wrap: wrap;
align-items: flex-end;
gap: 3vmax;
object-fit: fill;
}

.mainImage {
width: 100%;
filter: var(--drop-shadow-right-bottom);
max-width: 500px;
border-radius: .1rem;
flex: 1 0 auto;
}

.imageDescription {
padding: 1rem;
filter: var(--drop-shadow-right-bottom);
max-width: 470px;

min-width: 20ch;
border-radius: .1rem;
flex: 1;
width: 100%;
color: var(--white-main);
background-color: var(--blue-main);
}

.thumbnails {
margin: 1rem 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;

}

.thumbnails img {
max-width: 120px;
min-width: 70px;
width: 100%;
margin: 5px;
cursor: pointer;
opacity: 0.6;
flex: 1 ;
border-radius: 50%;
filter: var(--drop-shadow-right-bottom);
}

.thumbnails img:hover {
opacity: 1;
}