@charset "UTF-8";
/* CSS Document */
:root {
	/*--background-color: #121212;
	--surface-color: #1D2026;
    --text-color: #121416d8;
    --link-color: #543fd7;*/
	
}
html[data-theme='light'] {
    --background-color: #F5F5F5;
	--surface-color: white;
	--onsurface-color: invert(1);
    --text-color: #121212;
    --link-color: #121212;
}

html[data-theme='dark'] {
    --background-color: #121212;
	--surface-color: #1D2026;
	--onsurface-color: invert(0);
    --text-color: #ffffff;
    --link-color: #ffffff;
}

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

  display: grid;
  padding: 4px;
  max-width: 100vw;
  margin: 0 auto;
  grid-gap: 4px;
  grid-template-columns:repeat(auto-fit,minmax(256px,1fr));
 /* grid-auto-rows: 256px;*/
  grid-auto-flow: row dense; /* Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. */
}
/*
.item:nth-child(9n) {
grid-column: span 3;
}*/

.item-intro {
  	display: flex;
	flex-direction: column;
  	justify-content: center;
  	align-items: center;
	border-radius: .1rem;
  	text-align: center;
	padding: 3rem;
  	grid-column-start: 1;
  	grid-column-end: span 2;
  	grid-row-start: 1;
  	grid-row-end: span 2;
  	background: var(--surface-color);
}
.item-intro h1 {
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 400;
  margin-bottom: 3rem;
}
.item-intro div lottie-player {
  align-content: center;
  filter: var(--onsurface-color);
  opacity: 100%;
  height: 180px;
  width: 180px;

}

.item-function {
	border-radius: .1rem;
	display: subgrid;
  	text-align: center;
  	align-content: center;
 	vertical-align: middle;
	padding-top: 50%;
	padding-bottom: 50%;
 	background: var(--surface-color);
}

.item-theend {
  padding: 1rem;
  grid-column: span 2;
  grid-row: span 2;
  word-wrap: normal;
  text-align: left;
  display: grid;
  grid-template-columns: subgrid;
  background: var(--surface-color);
}
/* Stretch image vertically */
.v-stretch {
  grid-row: span 2;
  background: var(--surface-color);
}

/* Stretch image horizontally */
.h-stretch {
  grid-column: span 2;
  background: var(--surface-color);
}

/* Stretch image vertically and horizontally */
.big-stretch {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--surface-color);
}
/* Stretch image vertically and horizontally */
.bigger-stretch {
  grid-column: span 3;
  grid-row: span 2;
  background: var(--surface-color);
}
.full-screen {
grid-column-start: 1;
  grid-column-end: span 6;
  grid-row-start: 1;
  grid-row-end: span 2;
  background: var(--surface-color);
}
.item {
  border-radius: .1rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: enter both ease-in-out;
  animation-timeline: view();
  animation-range: entry;
  user-drag: none;  
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  background: var(--surface-color);
}
/*
.item:hover {
      color: #ffffff;
      grid-column: span 2;
      grid-row: span 2;
}
.item:after {
        content: "";
		}
*/

.item-lottie{
  border-radius: .1rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: enter both ease-in-out;
  animation-timeline: view();
  animation-range: entry;
  user-drag: none;  
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  background: var(--surface-color);
}
img {
  border-radius: .1rem;
  filter: var(--onsurface-color);
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: enter both ease-in-out;
  animation-timeline: view();
  animation-range: entry;
  user-drag: none;  
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  /*background: var(--surface-color); */
}
object {
  border-radius: .1rem;
  filter: var(--onsurface-color);
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: enter both ease-in-out;
  animation-timeline: view();
  animation-range: entry;
  user-drag: none;  
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none; 
   /*background: var(--surface-color); */
}

/* Make the gallery items all match on smaller screen sizes */

@media screen and (max-width: 768px) {
   .item-intro {
    grid-column: span 1;
	padding-bottom: 5rem;
	  
	   
  }
	.img div{
    grid-column: span 1;
  }
	.item-callout {
    grid-column: span 1;
  }
	.item-theend {
    grid-column: span 1;
  }
    .v-stretch {
    grid-row: span 1;
  }

    .h-stretch {
    grid-column: span 1;
  }

    .big-stretch {
    grid-column: span 1;
    grid-row: span 1;
  }
	.bigger-stretch {
    grid-column: span 1;
    grid-row: span 1;
  }
}

h1 {
  font-size: 1rem;
  font-family: "Inter";
  font-weight: 500;
  line-height: 1rem;
  left: 0;
  color: var(--text-color);
}
h2 {
  font-size: 2.25rem;
  font-family: "Inter";
  font-weight: 600;
  font-kerning:auto;
  color: var(--text-color);
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 1vh;
  align-items: center;
  padding: .1vh;
  background: var(--background-color);
}

@keyframes enter {
  from {
    translate: 0 75%;
    scale: .75;
    opacity: 0.1;
  }
}

@keyframes exit {
  to {
    translate: 0 1vh;
    opacity: 0.8;
  }

}
a,
button {
  font-family: "Inter";
  font-weight: 600;
  font-size: 1rem;
  padding: .75rem 1rem;
  border-radius: .1rem;
  background: var(--background-color);
  color: var(--link-color);
  display: inline;
  text-decoration: none;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  border-radius: 34px;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  border-radius: 50%;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #121212;
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--background-color);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* theme switch 2 */

:root {
  --clr-foreground: #ffffff;
  --clr-background: #121212;
}

@media (prefers-color-scheme: dark) {
  :root {
    --clr-background: #121212;
    --clr-foreground: #ffffff;
  }
}

.light-theme {
  --clr-foreground: #000000;
  --clr-background: #F5F5F5;
}

.dark-theme {
  --clr-background: #121212;
  --clr-foreground: #ffffff;
}

*,
*::before,
*::after {
  box-sizing: border-box;

}

body {
  background: var(--background-color);
  color: var(--text-color);
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 10vh;
  justify-content: center;
  align-items: center;
}

#theme-toggle {
  cursor: pointer;
  border: 0;
  opacity: 1;
  width: 2rem; 
  border-radius: 4rem;
  position: relative;
  background: var(--background-color);
}

#theme-toggle svg {
  fill: var(--text-color);
  vertical-align: middle;
}

#theme-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
 /* width: 2rem; make universal so button can be used in different context*/ 
  background: none;
  border-radius: inherit;
  transform: scale(0);
  opacity: 0;
  z-index: -1;
}

.light-theme #theme-toggle::before {
  animation: pulseToLight 650ms ease-out;
}

.dark-theme #theme-toggle::before {
  animation: pulseToDark 650ms ease-out;
}

#theme-toggle::after {
  content: attr(aria-label);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
 color: var(--background-color);
  background: var(--text-color);
  width: max-content;
  font-size: .75rem;
  bottom: 2.5rem;
  padding: 0.25em 0.25em;
  border-radius: .1rem;
  transform: scale(0);
  transform-origin: top;
  transition: transform 0ms linear 100ms, opacity 100ms linear;
}

#theme-toggle:hover,
#theme-toggle:focus {
  outline: 0;
  opacity: 1;
  background: var(--background-color);
}

#theme-toggle:hover::after,
#theme-toggle:focus-visible::after {
  opacity: 1;
  transform: scale(1);
  transition: transform 70ms linear, opacity 70ms linear;
}

.toggle-circle {
  transition: transform 500ms ease-out;
}

.light-theme .toggle-circle {
  transform: translateX(-13%);
}

.toggle-sun {
  transform-origin: center center;
    transition: transform 750ms cubic-bezier(0.11, 0.14, 0.29, 1.32);
}

.light-theme .toggle-sun {
  transform: rotate(0.5turn);
}

@keyframes pulseToLight {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  10% {
    transform: scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes pulseToDark {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  10% {
    transform: scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/*///////Island//////**/

/*body{
  background: linear-gradient(0deg, lime 0%, green 100%);
  color: #FFF;
  position:relative;
}*/

.Island__container {
	display: flex;
	position: fixed;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	padding: .25rem;
	width: inherit;
	z-index: 10;
	bottom: 1.40rem;
	background: var(--surface-color);
	height: 40px;
	border-radius: 10rem;
	box-shadow: 0px 4px 16px 4px #00000040;

}
 .Island__scrollProgress {
	display: flex;
	 position: relative;
	justify-content: flex-start;
	height: 2rem;
	width: 186px;
	/*margin-left: .25rem;*/
	margin-right: .25rem;
	align-items: center;
	vertical-align: middle;
	padding: .25rem;
	border-radius: 4rem;
    background: var(--background-color);
}
 .Island__progress-container {
	width: 128px;
    height: 1.5px;
	background: var(--text-color);
    margin-right:.5rem;
    margin-left: .5rem;
    }
 .Island__progress-bar {
	height: 1.5px;
	background-color: lime;
    width: 0%;
    }
#scrollPercentLabel {
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	font-family: Inter;
	font-size: .65rem;
	color: var(--text-color);
}

 .Island__functions {
	display: flex;
	gap: .25rem;
	width: inherit;
	justify-content: flex-end;
	height: 2rem;
	vertical-align:middle;
	/*margin-right: .25rem;*/
	border-radius: 50%;
	background: none;

	
}
.Island__functions a, button{
  	cursor: pointer;
 	display: flex;
	justify-content: center;
	align-items: center;
  	border: 0;
  	opacity: 1;
  	width: 2rem;
 	height: 2rem;
  	border-radius: 50%;
  	position: relative;
  	isolation: isolate;
  	background: var(--background-color);
  	color: var(--text-color);
	padding: 0.25rem;
	
}
.Island__functions svg {
  fill: var(--text-color);
  justify-content: center;
  align-items: center;
}
#Island__functions:hover,
#Island__functions:focus {
  outline: 0;
  opacity: 1;
  background: var(--background-color);
}	
#Island__functions:hover::after,
#Island__functions:focus-visible::after {
  opacity: 1;
  transform: scale(1);
  transition: transform 70ms linear, opacity 70ms linear;
}

#Island__functions::after {
  content: attr(aria-label);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--background-color);
  background: var(--text-color);
  width: max-content;
  font-size: .75rem;
  bottom: 2.5rem;
  padding: 0.25em;
  border-radius: .1rem;
  transform: scale(0);
  transform-origin: top;
  transition: transform 10ms linear 100ms, opacity 100ms linear;
}