/* Position warning box */
.warning {
	position: fixed;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	width: max-content;
	text-align: center;
	max-width: 90vw;
	margin: auto;
	z-index: 2;
	color: #333;
}

/** Below is the orig CSS from the original demo. These are wrapped in layer to make the unlayered styles above win from them */
@layer orig {


	body {
		font-family: Georgia, 'Times New Roman', Times, serif;
		transition: 0.3s ease-out;
		overflow-x: hidden;
		max-width: 100vw;
		width: 100%;
		overscroll-behavior: none;
	}

	.aboutme  section {
		min-height: 90vh;
		width: 100%;
		max-width: 100vw;
		overflow-x: hidden;
		position: relative;
	}

	/* .aboutme  img {

		width: auto;
		max-width: 100%;
		object-fit: cover;
	} */

	/* .aboutme  h1 {
		font-size: clamp(1.5rem, 8vw + 1rem, 6rem);
		line-height: 1;
		font-weight: 800;
		margin-bottom: 1rem;
		/*position: absolute;
		top: 10vw;
		left: 10vw;
		z-index: 4;
		overflow-wrap: break-word;
		hyphens: auto;
	} */
	.aboutme  h1 span {
		display: block;
	}

	.aboutme  h2 {
		/* font-size: 2rem; */
		max-width: 400px;
	}

	.credit a {
		color: var(--text-color);
	}

	.aboutme  * {
		box-sizing: border-box;
	}

	#sectionPin {
		height: 100vh;
		display: flex;
		background: var(--text-color);
		color: var(--bg-color);
		overflow: scroll;
	}

	.pin-wrap {
		height: 100vh;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 50px 10vw;
	}

	.pin-wrap > * {
		min-width: 60vmax;
		padding: 0 5vmax;
	}
.pin-wrap> img {padding:0}
	.aboutme  > p {
		position: absolute;
		bottom: 10vw;
		right: 10vw;
		width: 200px;
		line-height: 1.5;
	}
}

		@supports(animation-timeline: view()) {
			@keyframes move {
				to {
					/* Move horizontally so that right edge is aligned against the viewport */
					transform: translateX(calc(-100% + 100vw));
				}
			}

			#sectionPin {
				/* Stretch it out, so that we create room for the horizontal scroll animation */
				height: 500vh;
				overflow: visible; /* To make position sticky work … */

				view-timeline-name: --section-pin-tl;
				view-timeline-axis: block;
			}

			.pin-wrap-sticky {
				/* Stick to Top */
				height: 100vh;
				width: 100vw;
				position: sticky;
				top: 0;

				width: 100vw;
				overflow-x: hidden;
			}

			.pin-wrap {
				height: 100vh;
				width: 390vmax;
				/* Hook animation */
				will-change: transform;
				animation: linear move forwards;

				/* Link animation to view-timeline */
				animation-timeline: --section-pin-tl;
				animation-range: contain 0% contain 100%;
			}
		}

/*Logo animation*/


.logos {
  overflow: hidden;
  padding: 30px 0px;
  white-space: nowrap;
  position: relative;
}

.logos:before, .logos:after {
  position: absolute;
  top: 0;
  content: '';
  width: 250px;
  height: 100%;
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255,255,255,0), rgb(255, 255, 255));
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255,255,255,0), rgb(255, 255, 255));
}

.logo_items {
  display: inline-flex;
  animation: 35s slides infinite linear;
}
.logo_items img{padding:0 2rem}

.logos:hover .logo_items {
  animation-play-state: paused;
}

.logo_items img{
  height: 100px;
}
@keyframes slides {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/*EOF Logo animation*/