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

html{
    font-size: 62.5%;
    font-family: 'Courier New', Courier, monospace;
    scroll-behavior: smooth;
    background: #252a38;
}

canvas{
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;  
}


.About-Us-Section{
  padding-top: 15%;
}

.Contact-Section{
  padding-top: 7%;
}

.About-Us{
    width: 40vw;
    flex-direction: column;
    background: rgba(24, 27, 33,0.7);
    margin: auto;
    border-radius: 1rem;
    border: solid 1px #00d000;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 2rem;

}

.CVsection{
  height: 10rem;
  width: 20vw;
  flex-direction: column;
  background: rgba(24, 27, 33,0.7);
  margin: auto;
  border-radius: 1rem;
  border: solid 1px #00d000;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 2rem;  
}

.CVsection > h1 {
  font-size: 2rem;
  color: #eee;
  display: flex;
  text-align: center;
  justify-content: center;
  color: #eee;
  padding: 1rem;
}

.CVsection > form > button {
  background: #00d000;
  padding: 0.5rem;
  color: #eee;
  font-size: 2rem;
}

.CVsection > form > button:hover{
  transform: scale(1.05);
}

#pauseMatrix{
  width: 20px;
  height: 20px;
  appearance: none;
  background-color: black;
  border: 2px solid #00FF00;
  cursor: pointer;
  position: relative;
  outline: none;
  box-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00; /* Green glowing effect */
  margin-left: 40%;
  margin-top: 1rem;
}

/* Style for when the checkbox is checked */
#pauseMatrix:checked {
  background-color: #00FF00; /* Filled with neon green when checked */
}

/* Add a small green circle inside when checked */
#pauseMatrix:checked::before {
  content: '';
  width: 10px;
  height: 10px;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 5px black;
}

.About-Us > h1 {
    font-size: 4rem;
    color: #eee;
    display: flex;
    text-align: center;
    justify-content: center;
    color: #eee;
    padding: 1rem;
}
.About-Us > p {
    color: #eee;
    margin-top: 2rem;
    width: 40vw;
    text-align: center;
    font-size: 2rem;
    padding: 1rem;

}

/* navigation */
.sidebar {
    margin: 0;
    padding: 0;
    width: 200px;
    background: rgba(24, 27, 33,0.7);
    position: fixed;
    height: 100%;
    overflow: auto;
  }

.sidebar > a {
    display: block;
    padding: 4rem;
    text-decoration: none;
    font-size: 3rem;
    color: #00d000;
}

.Github-Img{
  width: 20%;
  display: flex;

}

.Github-Link{
  color: #eee;
  font-size: 3rem;
   
}


.GIT-Link{

  height: 100%;
  width: 40vw;
  flex-direction: column;
  background: rgba(24, 27, 33,0.7);
  margin: auto;
  border-radius: 1rem;
  border: solid 1px #00d000;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  gap: 5rem;
  padding: 2rem;

}

.GIT-Link > h1{
  color: #eee;
  font-size: 3rem;
}

.Contact-info{
  height: 100%;
  width: 40vw;
  flex-direction: column;
  background: rgba(24, 27, 33,0.7);
  margin: auto;
  border-radius: 1rem;
  border: solid 1px #00d000;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  color: #eee;
  font-size: 2rem;
}

.Contact-form{
  display: flex;
  flex-direction: column;
}

.Contact-form > div{
  padding: 1rem;
  margin: 1rem;
  border: solid 1px #00d000;
  border-radius: 0.5rem;
}

.Contact-form > button {
  background: #00d000;
  padding: 0.5rem;
  color: #eee;
  font-size: 2rem;
  
  
}

.Header-diki{
  background: white;
  display: flex;
  justify-content: center;
}

.Contact-form > button:hover{
  transform: scale(1.05);
}

.Project-holder{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 3%;
  width: 60vw;
  margin: 0 auto;
  height: 80vh;
}
.Project{
  flex: 1 1 45%;
  height: 28vh;
  background: rgba(24, 27, 33, 0.7);
  margin: 1rem;
  border-radius: 1rem;
  border: solid 1px #00d00072;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.5rem;
  transition: transform 0.8s;
  transform-style: preserve-3d;

}



.Project-back{
  background: rgba(24, 27, 33, 0.7);
  color: white;
  transform: rotateY(180deg);
  flex: 1 1 45%;
  height: 28vh;
  background: rgba(24, 27, 33, 0.7);
  margin: 1rem;
  border-radius: 1rem;
  border: solid 1px #00d00072;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.5rem;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  
}

.Project-front, .Project-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.Project.flipped .Project-front {
  transform: rotateY(180deg);
}

.Project.flipped .Project-back {
  transform: rotateY(0deg);
  display: flex;
}

.flip-button {
  margin-top: 10px;
  padding: 5px 10px;
  cursor: pointer;
  border: none;
  background-color: #333;
  color: white;
  border-radius: 5px;
  background: #00d000;
  position: absolute;
  right: 2rem;
  bottom: 2rem;
}

.Hidden-text{
  position: relative; 
  display: inline-block; 
}

.Hidden-P{
  opacity: 0; /* Initially hidden */ 
  visibility: hidden; /* Prevents interaction */ 
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */ 
}

.Hidden-text:hover .Hidden-P{
  opacity: 1; /* Show the text */ 
    visibility: visible; /* Allows interaction */ 
  cursor: pointer;
    color: #eee;
    font-size: 1.5rem;
}

.Hidden-header{
  opacity: 0; /* Initially hidden */ 
  visibility: hidden; /* Prevents interaction */ 
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */ 
}

.Hidden-text:hover .Hidden-header{
  opacity: 1; /* Show the text */ 
    visibility: visible; /* Allows interaction */ 
  cursor: pointer;
    color: #eee;
    font-size: 2rem;
}

.Project-holder2{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 3%;
  width: 60vw;
  margin: 0 auto;
  height: 20vh;
}
.Project2{
  flex: 1 1 20%;
  height: 28vh;
  background: rgba(24, 27, 33, 0.7);
  margin: 1rem;
  border-radius: 1rem;
  border: solid 1px #00d00072;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.5rem;
}

.muse-project{
  width: 60%; /* Make the images smaller and fit inside the project box */
  height: 80%; /* Maintain the image's aspect ratio */
  border-radius: 2rem;
  padding: 1rem; /* Padding around the image */
  object-fit: contain; /* Ensure the image fits inside the container without distortion */
}

.Project-holder .Project .fa-github {
  font-size: 5rem !important;
  color: #eee;
  padding-bottom: 1rem;
}

.icon {
  display: flex;
  gap: 10px;
}

.Project-holder2 .Project2 .fa-github {
  font-size: 5rem !important;
  color: #eee;
  padding-bottom: 1rem;
}

.Project-holder .Project .fa-github:hover {
  font-size: 5rem !important;
  color: #00d000;
  padding-bottom: 1rem;
}

.Project-holder2 .Project2 .fa-github:hover {
  font-size: 5rem !important;
  color: #00d000;
  padding-bottom: 1rem;
}

.Project-holder .Project .fa-globe:hover {
  font-size: 5rem !important;
  color: #00d000;
  padding-bottom: 1rem;
}


.Project-holder .Project .fa-globe {
  font-size: 5rem !important;
  color: #eee;
  padding-bottom: 1rem;
}

.Project2 p {
  color: white;
  font-size: 5rem;
  padding-bottom: 1rem;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 30rem;;
  height: 20rem;
  border: 1px solid #f1f1f1;
}


/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 30rem;
  height: 20rem;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}


/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

/* Style the label (text next to the checkbox) */
.button {
  font-family: 'Courier New', Courier, monospace; /* Monospace font for a retro look */
  font-size: 20px;
  color: #00FF00; /* Neon green color */
  text-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00, 0 0 20px #00FF00; /* Glowing text */
  padding-left: 2rem;
}

button {
  font-family: 'Courier New', Courier, monospace;
}

.toggle{
  margin-top:8rem;
}


/* Style the checkbox */
#toggleCanvas {
  width: 20px;
  height: 20px;
  appearance: none;
  background-color: black;
  border: 2px solid #00FF00;
  cursor: pointer;
  position: relative;
  outline: none;
  box-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00; /* Green glowing effect */
  margin-left: 40%;
  margin-top: 1rem;
}

/* Style for when the checkbox is checked */
#toggleCanvas:checked {
  background-color: #00FF00; /* Filled with neon green when checked */
}

/* Add a small green circle inside when checked */
#toggleCanvas:checked::before {
  content: '';
  width: 10px;
  height: 10px;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 5px black;
}



.sidebar a:hover:not(.active) {
    background-color: #555;
    color: white;
  }

  @media screen and (max-width: 70rem) {
    .sidebar {
      width: 100%;
      height: auto;
      position: relative;
    }
    .sidebar a {float: left;}
    div.content {margin-left: 0;}
  }

  @media screen and (max-width: 40rem) {
    .sidebar a {
      text-align: center;
      float: none;
    }
  }

/* Ensure responsive behavior for smaller screens */
@media screen and (max-width: 70rem) {
  .Project {
      flex: 1 1 calc(50% - 2rem); /* On smaller screens, make two columns */
      max-width: 45%; /* Adjust max width for smaller screen sizes */
  }
}

@media screen and (max-width: 40rem) {
  .Project {
      flex: 1 1 calc(100% - 2rem); /* On very small screens, make one column */
      max-width: 90%; /* Adjust max width for mobile devices */
  }
}



.skills {
  display: flex;
  justify-content:flex-end;
  height: 100vh;
 align-items: center;
}

.skills section {
  display: flex;
  justify-content: center; ;
}

.skills section ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 60%;
}

.skills section ul li {
  background: rgba(24, 27, 33,0.7);
  border: solid 1px #00d00072;
  list-style: none;
  width:fit-content;
  width: 25rem;
  height: 25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
}

.skills section ul li:hover {
  border: solid 1px #00d000;
  transform: scale(1.05);
}

.skills section ul li  {
 aspect-ratio: 1 / 1;
}

.skills section ul li img {
  max-width: 100%;
}