/* Global styles */
body{
    background-color: rgb(1, 1, 1, 0.6);
    background-image: url("../assets/background.jpg");
    background-size:cover;
    background-blend-mode: overlay;
    background-repeat:space;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Roboto', sans-serif;
    margin: 0px;
    font-size: 18px;
}

header{
    width: 100%;
    height: 85px;
    margin-bottom: 50px;
}

/* Nav bar */
.navbar{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    margin-bottom: 100px;
}

.navbar img{
    width: 50px;
    border-radius: 50%;
    border: solid 2px #fff;
}

#active{
  border: solid 2px #ff974d;
}

.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
}

.logo p{
    margin-left: 10px;
}


.navbar a{
    text-decoration: none;
    color: #fff;
    justify-content: space-evenly;
    margin: 20px;
}



.navbar .pages{
  display: flex;
  justify-content: space-evenly;
}

.navbar a:hover{
    transition: .2s;
    text-decoration: none;
    color: #ff974d;
}


#activenav{
    color: #ff974d;
}
/* Content wrapper */
.wrapper{
    display: flex;
    width: 85%;

    flex-direction: column;
    align-items: center;
    animation:fade-in ease 1s;
    animation-fill-mode: forwards;
}
/* Fade-in content */
@keyframes fade-in{
    0%{
        opacity: 0;
        transform: translateY(10px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}
/* Index introduction */
.introduction{
    width: 100%;
    display: flex;
    justify-content:center;
    margin-top: 0;
    margin-bottom: 50px;
    padding: 10px;
}

.introduction h1{
    margin-bottom: 0;
}

.introduction .intro-section{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
}
.introduction .intro-section img{
    width: 200px;
    border-radius: 50%;
    border: solid 3px #fff;
}

.introduction .intro-section ul{
    list-style: none;
    display: flex;
    margin: 0;
    padding-inline: 0;
    justify-content: space-evenly;
    width: 250px;
    font-size: 30px;
}

.sociallinks{
    color: #fff;
    opacity: .8;
}

.sociallinks:hover, .top .sociallinks:hover{
    transition: .2s;
    opacity: 1;
    color: #ff974d;
}

.intro-section p{
  margin:10px;
}

#CV{
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
  font-size: 18px;
}

#CV:hover{
  transition: .2s;
  color: #ff974d;
}

#section-one{
    width: 50%;
    
}

#divider{
    background-color: white;
    width: 1.5px;
    margin-inline: 50px;

}
/* Featured projects slides */
.preslideinfo{

    display: flex;
    flex-direction: column;
    align-items: center;
}

.preslideinfo h2{

    margin-top: 0;
}

.preslideinfo p{
    font-family: "Finger Paint", sans-serif;
    color: #ff974d;
    margin-top: -15px;
}


#slider{
    text-align: center;
    width: 800px;
    max-width: 100%;
}

#slider input[type=radio]{
    display: none;
}
#slider label{
    cursor: pointer;
    text-decoration: none;
}
#slides{
    padding: 5px;
    border: 3px solid #fff;
    background-color: rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
    cursor: pointer;
}

#slides:hover{
    border: 3px solid #ff974d;
    transition: .3s;
}
#overflow{
    width: 100%;
    overflow: hidden;
}
#slide1:checked ~ #slides .inner{
    margin-left: 0%;
}
#slide2:checked ~ #slides .inner{
    margin-left: -100%;
}
#slide3:checked ~ #slides .inner{
    margin-left: -200%;
}
#slide4:checked ~ #slides .inner{
    margin-left: -300%;
}
#slides .inner{
    transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    width: 400%;
    line-height: 0;
    height: 400px;
}
#slides .slide{
    width: 25%;
    float: left;
    display: block;
    height: 100%;
    color: #fff;
}

#slides .slide_1, .slide_2, .slide_3, .slide_4{
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.slide-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    opacity: 0;
    transition: opacity 0.3s;
    color: #ff974d;
}
.slide-content:hover{
    opacity: .9;
}
.tools{
    margin-top: 50px;
    width: 100%;
    height: 100px;


}

.tools img{
    height: 100px;
}
#controls{
    margin: -130px 0 0 0;
    width: 0px;
    height: 50px;
    z-index: 3;
    position: relative;
}
#controls label{
    transition: opacity .2s ease-out;
    display: none;
    width: 50px;
    height: 50px;
    opacity: .4;
}
#controls:hover{
    opacity: 1;
}
#bullets{
    margin: 100px 0 0;
    text-align: center;
}
#bullets label {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    margin-inline: 8px;
}
#bullets label:hover {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: #ff974d;
    transition: .3s;
}
#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4){
    background: #ff974d;
}

/* Contact page content */
  .contact-container{
    width: 100%;
    display: flex;
    justify-content: space-be;
    align-items: center;
    flex-direction: row;
    padding-bottom: 50px;
  }


  .contact-items{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 100%;

  }

  .contact-items i{
    font-size: 45px;
    border: solid 4px #fff;
    border-radius: 50%;
    padding: 15px;
  }

  .contact-items h2{
    margin-bottom: 0;
  }

  form{
    background-color: rgba(0, 0, 0, .3);
    border: solid 2px #fff;
    padding: 50px;
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
  }

  form h2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: -15px;
  }

  input::placeholder,
  textarea::placeholder{
    color: rgba(255, 255, 255, .5);
  }

  form input{
    width: 100%;
    height: 25px;
    background-color: transparent;
    border: solid 0px;
    border-bottom: solid 2px;
    color: #fff;
  }

  form input:hover{
    border-bottom: solid 2px #ff974d;
    transition: .5s;
  }

  form input:focus{
    border-bottom: solid 2px #ff974d;
    transition: .5s;
    outline: none;
  }

  form span{
    color: #ff974d;
    font-size: 15px;
  }

  form textarea{
    margin-top: 5px;
    width: 100%;
    height: 25px;
    background-color: transparent;
    border: solid 2px;
    color: #fff;
    resize: vertical;
    min-height: 100px;
  }

  form textarea:hover{
    border: solid 2px #ff974d;
    transition: .5s;
  }

  form textarea:focus{
    border: solid 2px #ff974d;
    outline: none;
  }

  form input[type=submit]{
    border-radius: 10px;
    background-color: transparent;
    box-shadow: inset 0 0 0 0 #ff974d;
    transition: ease-out .3s;
    margin-top: 10px;
    border: solid 2px #fff;
    color: #fff;
    text-align: center;
    font-size: 16px;
    width: 200px;
    height: 40px;
    cursor: pointer;
  }

  form input[type=submit]:hover{
    box-shadow: inset 200px 0 0 0 #ff974d;
    margin-left: 10px;
  }

  @media only screen and (max-width: 1000px) {
    .contact-container{
        display: flex;
        flex-direction: column;
        
    }

    .contact-items{
        margin-bottom: 40px;
    }

    .contact-items span{
        font-size: 23px;
        margin-top: 10px;
    }

    .contact-items h2{
        display: none;
    }

  }

  /* Projects page content */
  .accordion{
    width: 100%;
    padding-left: 0;
    padding-right: 23px;

  }

  .accordion li {
    list-style: none;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .8);
    border: #fff solid 2px;
    margin-bottom: 15px;
  }

  .accordion label{
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #fff;
  }

  .accordion label::before{
    content: '+';
    font-size: 24px;
    font-weight: 600;
    margin-right: 10px;
  }

  .accordion input[type="checkbox"]{
    display: none;
  }

  .accordion .content{
    color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s, padding .5s;
  }

  .accordion input[type="checkbox"]:checked + label + .content{
    max-height: 9999px;
    padding: 15px;
  }

  .accordion input[type="checkbox"]:checked + label{
    color: #ff974d;
  }
  
  .accordion input[type="checkbox"]:checked + label::before{
    content: '-';
  }

.content-section{
    margin-top: -15px;
}

.content-section .top{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-section .top i{
  padding-inline: 5px;
  margin-top: 15px;
}

.content-section .galleryThumbnail{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
}

.content-section .galleryThumbnail img{
    width: 100%;
    max-width: 500px;
    max-height: 500px;
    padding: 10px;
}

  .content h4{
    margin-bottom: 3px;
  }

  .content-section p{
    margin-top: 3px;
    font-size: 16px;
  }

  .content-section .top a{
    color: #fff;
    font-size: 26px;
  }

  .content-divider{
    margin-top: 20px;
    margin-bottom: 20px;
    height: 1.5px;
    width: 100%;
    background-color: #fff;
  }

  #project-tools{
    height: 50px;
  }

  @media only screen and (max-width: 1270px) {
    .content-section #img-2{
        display: none;
    }

  }

  .next-projects{
    display: inline-block;
    width: 100%;
    justify-content: space-between;
  }

  .next-section{
    margin-left: -10px;
    padding: 10px;
    background-color: rgba(0, 0, 0, .8);
    border: solid 2px #fff;
    margin-bottom: 20px;
    width: 100%;
 
  }

  .next-section h3{
    margin-top: 0;
    color: #ff974d;
  }

/* Footer content */
  footer{
    width: 100%;
    background-color: black;
    margin-top: 50px;
    height: 100%;
  }

  footer h2{
    color: #ff974d;
    margin-bottom: -10px;
  }

  footer ul, footer a{
    display: block;
    list-style: none;
    padding-left: 0;
    font-size: 16px;
    color: #ccc;
    text-decoration: none;
  }

  
  footer li:hover, footer a:hover{
    transition: .2s;
    color: #ff974d;
  }

  .footer-container{
    display: flex;
    justify-content: space-evenly;
    padding-inline: 20px;
    flex-wrap: wrap;
  }

  .footer-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 200px;

  }

  footer p{
    display: flex;
    justify-content: center;
    font-size: 10px;
    padding: 5px;
  }
/* Techstack */
  .techstack{
    display: flex;
    justify-content:center;
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    border: 2px solid #fff;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
  }
  .techstack-item{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

  .techstack-item h3{
    margin-inline: 5px;
    color: #fff;
  }

  .techstack-item img{
    width: 60px;
  }
/* Education / Professional Timeline content */
  .timeline {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      min-width: 900px;
      width: 100%;
  }
  
  .timeline-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }
  
  .timeline-column h1 {
      margin-bottom: 10px;
  }
  
  .timeline-itemED, .timeline-itemEX {
    position: relative;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    border: solid 2px #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards;
    height: auto; /* Adjust height as needed */
    box-sizing: border-box; /* Ensure padding is included in height */
  }

  .timeline-itemED:hover{
    transition: .5s;
    border: solid 2px #24c251;
    box-shadow: 0px 0px 10px #24c251; 
  }

  .timeline-itemEX:hover{
    transition: .5s;
    border: solid 2px #248bc2;
    box-shadow: 0px 0px 10px #248bc2; 
  }
  
  .timeline-itemED:nth-child(even),  .timeline-itemEX:nth-child(even) {
      background: rgba(0, 0, 0, .8);
  }
  
  .timeline-itemED:nth-child(odd),  .timeline-itemEX:nth-child(odd) {
      background: rgba(0, 0, 0, .8);
  }

  .timeline-itemED::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 20px;
    width: 20px;
    height: 20px;
    background: #24c251;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .8);
}

.timeline-itemEX::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 20px;
  width: 20px;
  height: 20px;
  background: #248bc2;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .8);
}
  
  .timeline-content {
      position: relative;
  }
  
  
  .timeline-content h3 {
      margin-top: 0;
  }
  
  .institution, .company {
      font-weight: bold;
      color: #999;
  }
  
  .date {
      color: #999;
  }
  .finalgrade {
      color: #999;
  }
/* To-Top button */
  .to-top{
    transition: .2s;
    background-color: #ff974d;
    position: fixed;
    bottom: 16px;
    right: 32px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
  }
  .to-top.active{
    transition: .2s;
    bottom: 32px;
    pointer-events: auto;
    opacity: 1;
  }
  .to-top:hover{
    width: 110px;
    display: flex;
    justify-content: start;
    padding-inline: 2px;
    display: flex;
    transition: .4s;
  }
  .to-top i{
    font-size: 28px;
    padding: 7px;
    color: #ff974d;
    background-color: black;
    border-radius: 500px;
  }
  .to-top:hover p{
    transition: .4s;
    transition-delay: .2s;
    width: auto;
    margin-inline: 5px;
    opacity: 1;
  }
  .to-top p{
    width: 0px;
    opacity: 0;
  }
  
  /* Animation */
  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(20px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
/* Responsive design elements */
  @media only screen and (max-width: 970px) {
    .introduction{
        flex-wrap: wrap;
        text-align: center;
    }

    #divider{
        width: 100%;
        height:  1.5px;
        margin-inline: 0px;
        margin-top: 30px;
    }

    .tools{
      margin-top: 0;
    }

    .tools img{
      width: 50px;
    }

    .next-projects{
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .next-section{
      width: 100%;
    }
    
    .techstack-item{
      padding: 10px;
    }
    .techstack-item h3{
      display: none;
    }

    .techstack{
      width: 100%;
    }

    .timeline {
      display: grid;
      grid-template-columns: 1fr;
      min-width: 0px;
  }

  .navbar{
    font-size: 1rem;
  }

  .navbar a{
    margin: 10px;
  }

  .to-top{
		width: 80px;
		height: 80px;
	}
	.to-top p{
		display: none;
	}
	.to-top:hover{
		width: 83px;
		justify-content: center;
		padding-inline: 0px;
		display: flex;
		transition: .4s;
	}
	.to-top i{
		font-size: 55px;
		padding: 7px;
		border-radius: 500px;
	}

  }