@font-face {
    font-family: 'reg';
    src: url('Fonts/regularFont.ttf') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('Fonts/regularFont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  


:root {
    --dark_grad: linear-gradient(
  45deg,
  rgba(0, 0, 0, 0.8),
  rgba(0, 0, 18, 0.8),
  rgba(0, 0, 37, 0.8)
);
    --main_shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    --text_shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

/* style.css */
html {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 20px;
    width: 100%;
    height: 100%;
   /* overflow: visible scroll; */
    /* scroll-behavior: smooth; */

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    /*TODO add new background that isn't over powering*/
        background: linear-gradient(-45deg,
        #eaeaff,
        #d5d5ff,
        #ababff,
        #9999ff,
        #ababff,
        #d5d5ff,
        #eaeaff
    );
    /* background-repeat: ; */
	background-size: 1200% 1200%;
	animation: gradient 20s ease infinite;
    display: flex;
    flex-direction: column; 
    min-height: 100%;
    width: 100%;
    /* overflow: hidden;
    overflow-y: auto; */
}
@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

header {
    /* background-color: #333; */
    color: white;
    /* position: fixed; */
    top: 0;
}
main {
    /* flex: 1; */
    align-self: center;
    box-sizing: border-box;
    padding: 5vw, 0p;
    padding-left: 5vw;
    padding-right: 5vw;

    /* margin: 1em; */
    margin-top: 0;
    padding-top: 0;

    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 55vh;
    width: 93%;
    
    /* overflow-x: hidden; */
    /* overflow: hidden; */
    
}


/* 
.parallax-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('Imgs/bg_green.jpg') no-repeat center center fixed;
    background-size: cover;
    z-index: -1;
    transform: translateZ(0);
    height: 250%; /* Double the height for parallax scrolling */

/* } */


nav {
    /* background-color: #666; */
    background: var(--dark_grad);
    /* TODO make less controls */

    height: 7vh;
    width: 100%;
    padding: 0.05em 0.5em;
    height: 7vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10000;
}


.nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* align-items: end; */
    gap: 20px;
    /* width: 100%; */
}

@media  screen and (max-width: 854px) {
    html { 
        font-size: 19px;
    }

    .nav-list {
        gap: 0;
        /* margin; */
    }
}

@media screen and (max-width: 550px) {
    html{
        font-size: 12px;
    }
   
}

nav a , h1, .github {
    color: black;
    /* border: 0.2vh solid black; */
    -webkit-text-stroke: 0.019em white;
   
    text-align: center;
    padding: 0px 15px;
    margin: 0.1em;
    font-size: 1.7rem;
    text-decoration-color: black;
    transition: color 0.5s;

    /* text-decoration: ; */
}


nav a:hover, h1,  .github:hover {

    /* background-color: #888; */
    color: white;
    /* text-shadow: red; */
    transition: color 0.05s;
    text-decoration-color: white;

    -webkit-text-stroke-color: black;
    /* border-radius: 10%; */
}


.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 5vh; /* Adjust size as needed */
    cursor: pointer;
    z-index: 999;
}
.hamburger {
    border-radius: 10%;
    transition: color 0.1s;
    background-color: rgba(255, 255, 255, 0.4);
    color: black;
}

.hamburger:hover {
    /* background-color: rgba(0, 0, 0, 0.5); */
    color: white;
    transition: color 0.2s text 2s;
}


@media screen and (max-width:355px) {
    html {
        font-size: 7px;
    }
}

@media screen and (max-width:620px) {
   
    .nav-list {
        flex-direction: column;
        align-items: center;
        display: none;
        width: 100%;
        position: absolute;
        top: 0vh;
        left: 0;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .nav-list.show {
        display: flex;
    }

    .nav-item {
        flex-basis: 100%;
        text-align: center;
        padding: 1em 0;
    }

    .nav-toggle {
        display: block;
        position: fixed;
        left: 5%;

    }
}




h1 {
    /* font-size: 1.9rem; */
    /* padding: 1rem; */
    /* background: var(--dark_grad); */
    font-size: 1.9rem;
    border-radius: 5px;
    font-weight: bold;
    /* margin: 0 0 1vh 0px; */
    /* width: 100%; */
    margin-right: auto;
    margin-left: auto;
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    /* width: 100%; TODO: make look good*/
    text-align: center;
    color: white;
    text-decoration: none;
    text-decoration-thickness: 0.04em;
    -webkit-text-stroke-color: black;
    text-shadow: var(--text_shadow);

}


.pageOn a, .pageOn{
    /* color: black; */
    text-decoration-color: white;
    /* text-decoration: underline; */
}

.pageOn a:hover, .pageOn:hover{
    color: black;
    text-decoration-color: white;
    -webkit-text-stroke-color: white;
   
}

.nav-item {
    position: relative;
    /* transition: transform 0.5s ease, opacity 0.5s ease; */
}



.nav-item.animate {
    animation: moveToH1 0.5s forwards;
}
/* @media screen and (max-width: 240px) {
   
} */

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0; 
    border-radius: 0.6%;
    align-self: center;
}
/* main::-webkit-scrollbar {
    width: 8px;
}

main::-webkit-scrollbar-thumb {
    background-color: rgba(255, 38, 0, 0.2)
}

main::-webkit-scrollbar-track {
    background-color: #f4f4f4;
} */


p#mainText {
    font-size: 1rem;
    margin-top: 0.2rem;
    /* text-shadow: -0.1px -1px 0 white, 0.1px -0.1px 0 white, 0.1px 0.1px 0 white,
    0.1px 0.1px 0 white; */
}

footer { /* bottom of saything that website is made by me ad me alone */
    /* background-color: rgba(0, 0, 0, 1.2); */
    background: var(--dark_grad);
    color: white;
    text-align: center;
    padding: 1rem;
    font-size: 1.17em;
    bottom: 0;
    width: 100%;
    border-radius: 3px;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    flex-shrink: 0;
    /* font-family: "reg"; */
    /* position: fixed; */
}

#movingText {
    cursor: pointer;
    transition: transform 0.5s ease-in-out;
}
#movingElement {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.5s ease-in-out;
}

.cvpdf {
    width: 90vw;
    max-width: 800px;
 height: js; /* js */
    border: none; /* Optional: remove the border if any */
    display: block;
    align-self: center;
}


h2 {
    margin: auto;
    /* margin-top: 2vh; */
    margin-bottom: 0.6vh;
    color: black;
    /* border: 0.2vh solid black; */
    -webkit-text-stroke: 0.009em white;

    text-align: center;
    font-size: 1.7rem;
    /* border: 1px solid white; */
    width: 50vw;
    text-wrap: nowrap;
  
    /* text-decoration: underline;
    text-decoration-thickness: 7%; */
} 

.project { /*TODO center and align with h1 add spacing */
    width: 48%; /* Adjust width to fit side by side */
    /* margin: 0 0 20px 0; */
    box-shadow: 7px 7px 13px rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-radius: 0.7rem;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);  /* TODO add contrast */
    /* margin-bottom: 6.1vh; */
    /* margin: 8vh, */
    margin-left:auto;
    margin-right: auto;

 
}



.bigger_project {
    width: 96%;
    /* margin-bottom: 10vh; */
}


.projects_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 15vh;

    gap: 3vh;

}

.projects_list, .project_header { /* scroll appear animation */
    opacity:  0 ;
    transform: translateY(40px);
    transition: 0.7s ease, transform 0.7s ease;
}

.projects_list.visible, .proj_header.visible { /* js adds visible class when visible using observer */
    opacity: 1;
    transform: translateY(0);
}

.projects_list.bot {
    margin-bottom: 8vh;
}

.project img {
    width: 40vw;
    min-width: 150px;
    height: auto;
    margin: 10px 0;
     margin: 0 auto; 
    z-index: 5;
}


.bigger_project_images {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px; /* Optional: add some space between the images */
}

.bigger_project_images img {
    width: calc(50% - 10px); /* Adjust width and account for gap */
    min-width: 150px;
    height: auto;
}







.img_zoom.left:hover {
    transform: scale(1.4) translateX(5vw) ; /* Enlarge the image on hover */
}

.img_zoom.middle:hover {
    transform: scale(1.4); /* Enlarge the image on hover */
}

.img_zoom.middle {
    width: 70%;
}


.img_zoom.right:hover {
    transform: scale(1.4) translateX(-5vw) ; /* Enlarge the image on hover */
}

@media (max-width: 850px) {
    .parallax-background {
        height: 350%;
    }
    .project {
        flex: 100%;
    
    }
    .project img {
        width: 75vw;
    }

   .img_zoom.left:hover , .img_zoom.right:hover {
        transform: scale(1.2);
   }

}

.img_zoom {
    transition: transform 0.3s, left 0.3s, top 0.3s;
    z-index: 10;
    position: relative;
  }
  .img_zoom:hover {
    
    z-index: 10; /*so when hoer from one img to other new one overlaps*/
    border: 3px solid black;
   
  }


 
.button {

    width: 12.5rem;
    margin: 2vh auto;
    position: relative;
   
}

.button a {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    /* height: 3.125rem;
    width: 12.5rem; */
    padding: 0 0.6em;
    color: white;
    font: 1.063rem/3.125rem sans-serif, Helvetica;
    text-decoration: none;
    text-align: center;

    /* text-transform: uppercase; */
    background: var(--dark_grad);
    border: white, 2px, solid;
    position: relative;
    z-index: 11;
    border-radius: 0.625rem;
    box-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
    overflow: hidden;
    line-height: -1;
    
    transition: color 0.5s;
}



.button a:hover {
    color: rgb(255, 255, 255);
}

.button p {
    background: var(--dark_grad);
    /* background-color: #000000; */
    border: white, 2px, solid;
    display: block;
    height: 2.5rem;
    width: 10.5rem;
    margin: -2.7375rem 0 0 0.945rem;
    text-align: center;
    font: 0.875rem/2.5rem sans-serif, Helvetica;
    color: #eee;
    position: absolute;
    z-index: 1;
    border-radius: 0.625rem;
    box-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
    transition: transform 0.6s cubic-bezier(0.6, -0.28, 0.74, 0.05),
    opacity 0.6s ease;
    opacity: 0;
}

.button a, .button p {
    border-radius: 0.8125rem;
    box-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
}

.button:hover .bottom { 
    opacity: 1;
    transform: translate(-98%);
}

.button:hover .top {
    opacity: 1;
    transform: translateX(98%);
}


@media (min-width: 850px) and (max-width: 1400px) {
    .download.button:hover .bottom {
        transform: translateY(115%);
    }  
    .download.button:hover .top {
        transform: translateY(220%);
    }  
}

@media (max-width: 240px) {
    .button:hover .bottom {
        transform: translateY(115%);
    }  
    .button:hover .top {
        transform: translateY(220%);
    }  
}

 .download_icon {
    border-radius: 10%;
    display: inline-block;
    height:100;
    background-color: rgb(255, 255, 255);
    font-size: 2em;
    color: rgb(0, 0, 0);
    transition: transform 0.3s ease;
    transition: color 0.5s;
        
    
} 


.button a:hover .download_icon {
    color: black;
    animation: bounce 0.7s infinite;
    
    animation-fill-mode: forwards; /* Keeps the last keyframe state after animation ends */
}

@keyframes bounce {
    0%, 100% {
        transform: translateY();

    }
    50% {
        transform: translateY(-0.3125rem); /* Adjust the bounce height as needed */
    }
}


.button a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18.75rem; /* 300% of 200px converted to rem */
    height: 18.75rem; /* 300% of 50px converted to rem */
    background: rgba(0, 0, 0, 0.1);
    transition: width 0.6s ease, height 0.6s ease, top 0.3s ease, left 0.3s ease;
    border-radius: 50%;
    z-index: 0;
    transform: translate(-50%, -50%);
}

.button a:hover::before {
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
}




.contacts_content {
    background-color: rgba(255, 255, 255, 0.4); /*makes text easier to read */
    width: 100%;
    border-radius: 8px;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    font-size: 1.3rem;
    box-sizing: border-box;
}


.contacts_content {
    font-size: 1.3rem;
   
    padding: 0px 15px;



    transition: color 0.7s;
}


.contacts_content p {
    margin: 4vh 0; /* Adds spacing between paragraphs */
}


.contacts_content a, footer a:hover {
    color: black;
    /* border: 0.2vh solid black; */
    -webkit-text-stroke: 0.019em white;

    text-decoration-color: black;
    transition: color 0.5s;
    /* text-decoration: ; */
}


.contacts_content a:hover, footer a {
    /* background-color: #888; */
    color: white;
    text-shadow: red;
    -webkit-text-stroke-color: black;
    transition: color 0.1s;
    text-decoration-color: white;
    /* border-radius: 10%; */
}



.project img.profile_pic {
    width: auto;  /* 50% of the viewport width */
    height: 50vh; /* 50% of the viewport height */
    object-fit: cover;  /* Ensures the image covers the container while maintaining aspect ratio */
    display: block; /* Ensures no extra space around the image */
    margin: auto; /* Centers the image horizontally */
}


h3 { /* As I want text centered and even in home page */
    text-wrap: balance;
}

.home {
    margin-bottom: 0;
}
.home h3 {
    /* margin: 0.65em 0; */
    /* font-size: 1.5rem; */
    /* font-size: 1.5rem; */

}

h3.name {
    margin-top: 0.32em;
    font-size: 2em;
    margin-bottom: 0.2em;
}

h3.student {
    color: white;
    text-shadow: var(--main_shadow);
    text-shadow: 2px 2px black;
    font-size: 1.5em;
    
    margin-bottom: 0.4em;
    -webkit-text-stroke: 0.01em black;
}

h3.grad{
    font-size: 1em; 
}