html {
    scroll-behavior: smooth;
}

.progress-bar-container {
    width: 100%;
    height: 1vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}

.progress-bar {
    width: 0%;
    height: 100%;
    opacity: 0.8;
    z-index: 100;
    background-color: var(--light);
}

body {
    background-color: var(--background-color);
    overflow: scroll;
}

.box-testing {
    position: relative;
    z-index: 1;
    margin: 200px 50px 50px 250px;
    width: 250px;
    height: 250px;
    border: none;
    background: linear-gradient(145deg, #191d1f, #15181a);
    box-shadow:  20px 20px 48px #0d0f11, -20px -20px 48px #212729;
    border-radius: 30%;
}

#circle-one {
    margin: 0px auto;
}

.circle {
	position: relative;
	display: flex;
	width: 150px;
	height: 150px;
	border-radius: 150px;
	align-items: center;
	justify-content: center;
}

.circle:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 150px;
	height: 150px;
	content: " ";
	transition: 0.15s ease-out;
	border-radius: 100px;
	filter: blur(7px);
	box-shadow: 8px 8px 20px rgb(0, 0, 0, 1), -8px -8px 20px rgb(255, 255, 255, 0.2);
}

.circle:hover:before {
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.5),
	-8px -8px 20px rgba(255, 255, 255, 0.2),
	inset 8px 8px 20px rgba(0, 0, 0, 1),
	inset -8px -8px 20px rgba(255, 255, 255, 0.2);
	transition: 0.15s ease-out;
}

.forest-background-L0, .forest-background-L1, .forest-background-L2, .forest-background-L3, .forest-background-L4 {
    position: absolute;
    left: -10vw;
    width: 120vw;
    image-rendering: pixelated;
    min-width: 1100px;
}

.forest-background-L0 {
    top: -35vh;
    z-index: 5;
    height: 180vh;
}

.forest-background-L1 {
    top: -30vh;
    z-index: 4;
    height: 160vh;
}

.forest-background-L2 {
    top: -30vh;
    z-index: 3;
    height: 190vh;
}

.forest-background-L3 {
    top: -35vh;
    z-index: 2;
    height: 180vh;
}

.forest-background-L4 {
    top: 0px;
    z-index: 1;
}

.forest-wrapper {
    position: relative;
    top: 0px;
    left: 0px;
    height: 120vh;
    width: 100vw;
    overflow: hidden;
}

.hi-text {
    font-family: "Tourney", serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "wdth" 125;
    font-size: 32rem;
    z-index: 3;
    color: var(--background-color);
}

.header-text-image {
    position: absolute;
    top: 45vh;
    left: 30vw;
    z-index: 3;
    width: 40vw;
    transform: translate(-50%, -50%);
    image-rendering: pixelated;
}

.experience-statement-wrapper {
    margin-top: 15vh;
    text-align: center;
}

.experience-statement {
    position: relative;
    z-index: 5;
    font-family: DiamondSmith, serif;
    color: var(--light);
    font-size: 4rem;
    display: inline-block;
    margin-bottom: 10px;
}

.project-text-wrapper {
    margin: 0vh 5vw 0vh 5vw;
    padding: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.secondary-color-wrapper {
    background-color: var(--background-color2);
    margin-top: 30vh;
    padding-top: 0vh;
}

.project-content-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
  	width: 100%;
}

.main-project-text {
    font-family: DiamondSmith, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    color: var(--medium2);
    text-align: center;
    margin-bottom: 1vh;
    width: 100%;
    max-width: 100%;
}

.highlight {
    all: inherit;
    color: var(--light2);
}

.text-ticker-left {
    line-height: 100%;
    white-space: nowrap;
    padding-block: 0.5vh;
    overflow: hidden;
    --gap: 3vw;
    display: flex;
    gap: var(--gap);
    mask-image: linear-gradient(90deg, transparent, white 5%, white 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent, white 5%, white 95%, transparent 100%);
}

.text-ticker-right {
    line-height: 100%;
    white-space: nowrap;
    padding-block: 0.5vh;
    overflow: hidden;
    --gap: 3vw;
    display: flex;
    gap: var(--gap);
    mask-image: linear-gradient(90deg, transparent, white 5%, white 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent, white 5%, white 95%, transparent 100%);
}

.text-ticker-left ul {
  list-style: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap);
  animation: scroll-left 40s linear infinite;
}

.text-ticker-right ul {
  list-style: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gap);
  animation: scroll-right 40s linear infinite;
}

.text-ticker-left ul li {
  font-family: "Kanit", serif;
  font-weight: 900;
  font-style: normal;
  font-size: 3rem;
  color: var(--medium2);
  text-align: center;
  line-height: 100%;
  white-space: nowrap;
}

.text-ticker-right ul li {
  font-family: "Kanit", serif;
  font-weight: 900;
  font-style: normal;
  font-size: 3rem;
  color: var(--medium2);
  text-align: center;
  line-height: 100%;
  white-space: nowrap;
}

@keyframes scroll-right {
    from {
        transform: translateX(calc(-100% - var(--gap)));
    }
    to {
        transform: translateX(0);
    }
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

.intrigued-wrapper {
    position: absolute;
    text-align: center;
    width: 100vw;
    top: 280vh;
    height: 70vh;
}

.intrigued-text {
    top: 40vh;
    position: sticky;
    font-family: DiamondSmith, serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "wdth" 125;
    font-size: 6rem;
    color: var(--light2);
    z-index: 0;
}

.projects-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    margin: 60vh 1vw 0vw 1vw;
    justify-content: space-between;
}

.projects-column {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 32.1vw;
}

#projects-column1 {
    margin-top: 0vh;
}

#projects-column2 {
    margin-top: 16vh;
}

#projects-column3 {
    margin-top: 8vh;
}

.projects-project-card {
  display: block;            /* Anchor is block-level */
  width: 100%;               /* Fills the projects-column width */
  text-decoration: none;     /* Remove underline */
  overflow: hidden;          /* Prevent internal overflow */
  transition: box-shadow 0.3s ease, background 0.3s ease;
  margin: 0;
  margin-top: 2vh;
  padding: 0;
}

.projects-project-card:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.card-image {
  width: 32.1vw;
  height: 36vh;             /* Set desired height */
  background-color: var(--background-color2);    /* Fallback color */
  background-size: cover;    /* Cover the container */
  background-position: center;
  object-fit: cover;
  margin: 0;
  padding: 0;
}

.card-title {
  padding: 10px;             /* Padding inside the title area */
  font-family: "Chakra Petch", serif;
  font-weight: 900;
  font-style: normal;
  font-size: 2rem;
  color: var(--light);       /* Make sure you’ve defined --light */
  text-align: left;          /* Left-justify the text */
  background-color: transparent;
  transition: background-color 0.3s ease;
  margin: 0;
}

.projects-project-card:hover .card-title {
  background-color: rgb(37, 34, 43);
}


/* sorry for all the hard coding, this is the only way :( */
#HexagonalAStar {
    height: 36vh;
}

#DroneEvolution {
    height: 36vh;
}

#TileBackground {
    height: 36vh;
}

#ProceduralTorch {
    height: 65vh;
}

#jet-fighter3 {
    height: 36vh;
}

#tic-tac-toe {
    height: 36vh;
}

#FloodfillAlgorithm {
    height: 36vh;
}

#FirstRLThing {
    height: 36vh;
}

#MapEditor {
    height: 36vh;
}

#BadmintonDrone {
    height: 36vh;
}

#ImportingIrisDataSet {
    height: 36vh;
}

#MushroomDataset {
    height: 36vh;
}

#MovieSentiment {
    height: 65vh;
}

#TriangleBackground {
    height: 36vh;
}

#StockAnalysis {
    height: 37vh;
}

#BattleGrounds {
    height: 36vh;
}

#FoliageGeneration {
    height: 50vh;
}

#FPSGame {
    height: 36vh;
}

#Driving2DCarAI {
    height: 38vh;
}

#FRAMEWORK {
    height: 36vh;
}

#MultiInputPolynomialRegression {
    height: 36vh;
}

#BeaverworksCodingAssignments {
    height: 36vh;
}

#FirstCNN {
    height: 36vh;
}

#Bomberman {
    height: 36vh;
}

#PhysicsSignProposal {
    height: 36vh;
}

#xXUnknownXx {
    height: 36vh;
}

#csp-platformer {
    height: 36vh;
}

#ClothSimulation {
    height: 36vh;
}

#FluidDynamics3 {
    height: 36vh;
}

#SolarCarBarDimensions {
    height: 36vh;
}

#ParticleBackground {
    height: 36vh;
}

#ClusteringAlgorithm {
    height: 36vh;
}

#boss-fight {
    height: 36vh;
}

#table-tanks {
    height: 36vh;
}

#jet-fighter2 {
    height: 36vh;
}

#CantTouchTheSquare {
    height: 36vh;
}

#jet-fighter1 {
    height: 36vh;
}

#pong {
    height: 36vh;
}

#EightPuzzle {
    height: 36vh;
}