* {
	box-sizing: border-box;
	font-variant-numeric: lining-nums;
}

html {
	margin: 0;
}

body {
	font-family: 'Nunito', sans-serif;	padding: 2rem;
	background: none;
	max-width: 1920px;
}

h3 {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: auto;
	letter-spacing: 0.2px;
	margin: 0;
	
}


h2 {
	font-size: 3rem;
	line-height: 1.3;
	margin: 0;
}

h1 {
	font-size: 4rem;
	line-height: 1.3;
	margin: 0;
}

p {
	font-size: 1.1rem;
	font-weight: 400;
	text-decoration: none;
	color: inherit;
	margin: 0;
	line-height: 1.7;
	max-width: 720px;
}

a {
	text-decoration: none;
	color: rgb(161, 98, 7);
}

nav {
	display: flex;
	flex-direction: column;
	grid-row: 1 / -1;
	position: fixed;
}

nav a {
	text-decoration: none;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 2.2rem;
	color: black;
	margin: 0;
}

nav a:hover {
	color: rgb(161, 98, 7); 
}

nav a.active, nav a:active {
	color: rgb(161, 98, 7); 
}

.extra_highlight {
	margin-top: 0.5rem;
	padding: 1rem;
	border: 1px solid rgb(240, 231, 217);
	border-radius: 0.5rem;
	width: fit-content;
}

 table {
	border-collapse: collapse;
}

td {
	border: none;
	font-family: ui-monospace;
	text-align: center;
	letter-spacing: 0.5rem;
}

.hint {
	font-size: 0.9rem;
	opacity: 0.3;
}

.category {
	margin-left: 24rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-bottom: 8rem;
}

#main {
	display: inline-block;
	margin-bottom: 4rem;
}

section:last-child {
	height: 100vh;
}

.category > h2 {
	grid-column: -1 / 1;
	padding-top: 2rem;
	padding-left: 1rem;
}

.category_description {
	order: 2;
	background-color: rgb(248, 241, 230);
	padding: 1.5rem;
	border-radius: 1.5rem;
	align-self: start;
}

.exercises {
	display: flex;
	flex-direction: column;
	border: 1px solid rgb(240, 231, 217);
	border-radius: 1.5rem;
	overflow: hidden;
}

.exercise {
	padding: 1rem 1rem 0.8rem 1rem;
	cursor: pointer;
	border-bottom: 1px solid rgb(240, 231, 217);
}

.exercise:last-of-type {
	border: none;
}

video {
	display: block;
	width: available;
	border: 1px solid rgb(240, 231, 217);
	border-radius: 1rem;
	margin: 1rem;
}

.exercise p {
	padding-top: 0.3rem;
	font-size: 1rem;
}

.exercise_types {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.exercise_type {
	padding: 4px 12px;
	cursor: pointer;
	border: 1px solid rgb(240, 231, 217);
	border-radius: 1rem;
}

.exercise_type:hover {
	color: rgb(161, 98, 7);
	background: rgb(246, 242, 236);
}

.active_exercise_info {
	display: none;
}

.exercise.jouele-is-playing {
	color: rgb(161, 98, 7);
}
.exercise.jouele-is-playing h3::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	width: 1.3rem;
	height: 1.3rem;
	right: 0.2rem;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="82" height="74" viewBox="0 0 82 74"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><path fill-rule="evenodd" clip-rule="evenodd" d="M45.84 48.74L66.63 52.19L68 21.28L34.92 20.52C34.92 20.52 31.92 49.03 31.21 56.69C28.48 84.51 -8.22 75.74 2.7 51.6L24 54.36L26.89 0L81.35 3.16C81.35 3.16 73.52 49.74 72.47 57.26C69.22 80.55 33.73 74.06 45.84 48.74Z" fill="rgb(161, 98, 7)"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
}

/* Стили для ползунка */
#volumeSlider {
  -webkit-appearance: none;  /* Убирает стандартный стиль для Chrome и Safari */
  cursor: pointer;
  width: 100%; /* Ширина ползунка */
  height: 16px; /* Высота ползунка */
  background: color(display-p3 0.242 0.239 0.239); /* Цвет фона */
  border-radius: 8px;
  outline: none; /* Убирает контур при фокусе */
  opacity: 0.7; /* Прозрачность ползунка */
  -webkit-transition: .2s; /* Эффект перехода для Chrome и Safari */
  transition: opacity .2s;
}

/* Стили для ползунка при наведении */
#volumeSlider:hover {
  opacity: 1; /* Полная непрозрачность при наведении */
}

/* Стили для ползака (ручки ползунка) */
#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Убирает стандартный стиль для Chrome и Safari */
  appearance: none;
  width: 16px; /* Ширина ползака */
  height: 16px; /* Высота ползака */
  background: color(display-p3 0.969 0.945 0.906); /* Цвет фона ползака */
  border-radius: 8px;
  cursor: pointer; /* Форма курсора */
}

#volumeSlider::-moz-range-thumb {
  width: 8px; /* Ширина ползака для Firefox */
  height: 32px; /* Высота ползака для Firefox */
  background: color(display-p3 0.969 0.945 0.906); /* Цвет фона ползака */
  cursor: pointer; /* Форма курсора для Firefox */
}


footer {
	position: fixed;
	bottom: 8rem;
}

footer p, footer a {
	font-size: 0.9rem;
}

@media (max-width: 720px) {
	
	body { 
		padding: 1rem;
	}
	
	nav {
		display: none;
	}
	
	h2 {
		font-size: 2rem;
	}
	
	.category {
	margin-left: 0;
	display: flex;
	flex-direction: column;
	}
	
	
	.category_description {
	order: unset;
	padding: 1.5rem;
	
	}
	
	footer {
		margin-top: 16rem;
		position: relative;
	}
}