@charset "UTF-8";

/* CSS rules go below */

* {
	box-sizing: border-box;
  }
  
  body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	font-family: Helvetica, Arial, sans-serif, system-ui;
	background: rgb(255, 0, 0);
	gap: 2rem;
  }
  
  body::before {
	  --line: hsl(0 0% 95% / 0.25);
	  content: "";
	  height: 100vh;
	  width: 100vw;
	  position: fixed;
	  background:
		  linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin,
		  linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
	  mask: linear-gradient(-15deg, transparent 30%, white);
	  top: 0;
	  z-index: -1;
  }
  
  section {
	display: grid;
	gap: 4rem;
	align-items: center;
	justify-content: center;
  }
  

  
  .code {
	font-size: 3rem;
	display: flex;
	flex-wrap: nowrap;
	color: hsl(0 0% 100%);
	border-radius: 1rem;
	background: hsl(0, 100%, 50%);
	justify-content: center;
	box-shadow: 0 1px hsl(0 0% 100% / 0.25) inset;
  }
  
  .code:hover {
	cursor: grab;
  }
  
  .digit {
	display: flex;
	height: 100%;
	padding: 5.5rem 1rem;
  }
  
  .digit:focus-visible {
	outline-color: hsl(0 0% 50% / 0.25);
	outline-offset: 1rem;
  }
  
  .digit span {
	scale: calc(var(--active, 0) + 0.5);
	filter: blur(calc((1 - var(--active, 0)) * 1rem));
	transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s), filter calc(((1 - var(--active, 0)) + 0.2) * 1s);
  }
  
  ul {
	padding: 0;
	margin: 0;
  }
  
  .digit:first-of-type {
	padding-left: 5rem;
  }
  .digit:last-of-type {
	padding-right: 5rem;
  }
  
  :root {
	--lerp-0: 1; /* === sin(90deg) */
	--lerp-1: calc(sin(50deg));
	--lerp-2: calc(sin(45deg));
	--lerp-3: calc(sin(35deg));
	--lerp-4: calc(sin(25deg));
	--lerp-5: calc(sin(15deg));
  }
  
  .digit:is(:hover, :focus-visible) {
	--active: var(--lerp-0);
  }
  .digit:is(:hover, :focus-visible) + .digit,
  .digit:has(+ .digit:is(:hover, :focus-visible)) {
	--active: var(--lerp-1);
  }
  .digit:is(:hover, :focus-visible) + .digit + .digit,
  .digit:has(+ .digit + .digit:is(:hover, :focus-visible)) {
	--active: var(--lerp-2);
  }
  .digit:is(:hover, :focus-visible) + .digit + .digit + .digit,
  .digit:has(+ .digit + .digit + .digit:is(:hover, :focus-visible)) {
	--active: var(--lerp-3);
  }
  .digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit,
  .digit:has(+ .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
	--active: var(--lerp-4);
  }
  .digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit + .digit,
  .digit:has(+ .digit + .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
	--active: var(--lerp-5);
  }

body{
	font-family: "Helvetica", "Arial", sans-serif;
	color:rgb(255, 0, 0);
	background-color:rgb(166, 245, 75);
	font-size: large;
}

body {
  margin:0px;
  font-family: "Helvetica", "Arial", sans-serif;
  text-align:center;
}

#container {
  color:rgb(255, 0, 0);
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:40%;
  display:block;
}

p {
  
  width:100%;
  bottom:30px;
  font-size:16px;
  color:#ff0000;
  margin-top:200px;
}

.page-wrapper{
	padding:1rem;
	display: flex;
	flex-direction: column;
}

header, nav, section, footer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
	margin-top:2.5vw;
	margin-bottom:2.5vw;
}

h1, h2, p{
	text-align: center;
	max-width: 30rem;
}

.extension-download a{
	font-size:1.5rem;
	padding:1.5rem;
	border-radius: 2rem;
	text-decoration: none;
	border: 1px solid blue;
}

.extension-documentation{
	width:50vw;
}

.extension-reviews-block{
	width:100%;
	max-width: unset;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.extension-review{
	width:25vw;
	padding:1rem;
	margin:1rem;
	border:1px solid black;
	box-sizing: border-box;
}

video, img{
	display: block;
	float:left;
	clear:both;
	width:100%;
	height:auto;
	margin-top:1rem;
	margin-bottom:1rem;
	background-color: black;
}

section.extension-installation ol{
	text-align: left;
}

footer{
	border-top:1px solid black;
}



/* CSS style for mobile devices */

@media (max-width: 780px) {
  	.extension-documentation{
		width:90vw;
	}
	.extension-review{
		width:90vw;
		margin-left:0;
		margin-right:0;
	}
}