/* Example: Changing the background color of the body */
html {
  height: 100%;
}


body {
  height: 100%;
  background-color: #f6e2cc;
	font-family: 'Space Mono', monospace;

}



/* Example: Changing the font for specific elements */
h1, h2, h3 {
  font-family: 'Space Mono';
	font-weight:600;

}

.custom-header-color {
	background-color: #BF7600;
}

.image-border{
	border:3px solid orange;
}

.projects-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* height: 80vh; */
}

.title-container {
	margin-top: 1rem;
}

.project-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  max-width: 800px;
	margin-bottom: 10vh;
}

.project-item {
	margin: 0;
  width: calc(50% - 10px); /* Calculate 50% width minus the gap */
	border-radius: 0.375rem;
	background-color: #FFF7F0;
	padding: 1rem;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Equivalent to shadow-lg utility class */
  transition-property: transform; /* Equivalent to transition-transform utility class */
  transition-duration: 0.3s; /* Equivalent to duration-300 utility class */
  transition-timing-function: cubic-bezier(0.4, 2.5, 0.5, 0.8); /* Equivalent to ease utility class */
}

.project-item:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); /* Equivalent to hover:shadow-xl utility class */
  transform: scale(1.05); /* Equivalent to hover:scale-105 utility class */
}


.project-image {
  width: 100%; /* Make the image fill the card width */
  height: auto; /* Maintain aspect ratio */
  max-height: 30vh; /* Reduce the maximum height to make the image smaller */
}

.project-title {
  font-size: 1.5rem;
  margin-top: 10px; /* Add some space between the image and title */
}

.project-description {
  flex-grow: 1; /* Make the description container grow to fill the available vertical space */
}




/* CSS for mobile screens (up to 767px) */
@media (max-width: 767px) {
  /* Change the flex direction to column for mobile screens */
  .mobile-setting {
    flex-direction: column;
    text-align: center; /* Center-align the text */
  }
  .mobile-setting > .container {
    margin: 0; /* Remove margins on both sides of the container */
  }
  .mobile-setting > .flex-shrink-0 {
    margin-bottom: 2rem; /* Add margin between the image and text */
		order: -1;
  }
  .project-grid {
    flex-direction: column; /* Change the flex direction to column for mobile screens */
    max-width: 100%; /* Make sure the grid doesn't exceed the body width */
		align-items: center;
	}

	.project-item {
    width: 90%; /* Set each card to take up 100% of the container width in mobile view */
		padding: 1rem;
	}
}

@media (min-width: 1200px) {
  .padding-sides {
    padding-left: 30vh;
		padding-right: 30vh
	}
}

/* 
.autotype {
  overflow: hidden;
  white-space: nowrap;
}

.autotype {
  animation: autotype 1s steps(10, end);
  animation-fill-mode: forwards;
}

.autotype2 {
  width: 0;
  animation-delay: s;
  margin-bottom: 0;
}

.autotype3 {
  width: 0;
  animation-delay: 8s;
  margin-top: 0;
}

@keyframes autotype {
  from {
    width: 0px;
  }
}

@keyframes autotype {
  0% {
    width: 0px;
  }
  20% {
    width: 70px;
  }
  40% {
    width: 140px;
  }
  60% {
    width: 210px;
  }
  80%. {
    width: 280px;
  }
  100% {
    width: 500px;
  }
}

.alignnone {
  height: 20px;
  width: 50px;
  position: relative;
  top: 4px;
} */


.hidden {
  opacity:0;
}
.console-container {
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
.console-underscore {
  display:inline-block;
  position:relative;
  top:-0.14em;
  left:10px;
}