* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: #000;
	/* height: 100vh; */
	font-family: Comic Sans MS;
	font-size: calc(16px + (20 - 16)*(100vw - 320px)/(1024 - 320));
}

.nav {
	display: none;
}


.main {
	display: flex;
	justify-content: center;
	gap: 10px;
	justify-content: space-around;
	align-items: center;
	padding: 20px;
}

/* ALL ABOUT HEADER  */
.header {
	background-color: white;
	padding: 10px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.home-link {
	left: 20px;
}

.center-link {
	margin: 0 auto;
}

.header a {
	color: #111;
	text-decoration: none;
	font-weight: bold;
	font-family: 'Comic Sans MS', cursive;
	font-size: 18px;
	transition: color 0.2s ease;
}




.mad-troll {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 600px;
}

.hold {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	width: 100%;
}

.mad-troll img {
	width: 70%;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
}

.icons {
	display: flex;
	gap: 100px;
	margin-bottom: 10px;
}

.icons .icon {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 50%;
}

.text-box {
	background-color: #2E2E2E;
	color: #ADEBAD;
	padding: 12px 18px;
	font-size: 16px;
	word-break: break-all;
	width: 100%;
}

/* 
  @keyframes wiggle {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(2deg); }
	50% { transform: rotate(-2deg); }
	75% { transform: rotate(2deg); }
	100% { transform: rotate(0deg); }
  }
  
  .mad-troll .icon {
	width: 100%;
	max-width: 500px;
	border-radius: 10px;
	object-fit: cover;
	animation: wiggle 0.4s infinite ease-in-out;
  } */






.last {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 50px;
}

.last img {
	width: 90%;
}

.caption {
	margin-top: 20px;
	background-color: white;
	color: black;
	padding: 10px;
	font-size: 18px;
	font-weight: bold;
	width: 90%;
}

.description {
	margin-top: 15px;
	width: 90%;
	font-size: 18px;
	line-height: 1.5;
	text-align: justify;
	color: #fff;
}







/*ALL ABOUT THE DANCING TROLL */
.troll {
	font-size: 0.625em;
	overflow: hidden;
	position: relative;
	width: 55em;
	height: 40em;
	padding: 0 20px;
}

.troll h1 {
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 17px;
	text-align: center;
}

.troll div {
	animation-duration: 0.75s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	position: absolute;
}

/* Head */
.troll__head {
	animation-name: head;
	top: 2.5em;
	left: 8em;
	width: 14em;
	height: 11.5em;
}

.troll__head div {
	background: #f1f1f1;
	border-radius: 0.5em;
	transform-origin: 0.5em 0.5em;
	width: 1em;
	z-index: -1;
}

.troll__face {
	width: 100%;
	height: auto;
}

/* Arms */
.troll__head>div {
	top: calc(100% - 3.25em);
	left: calc(50% - 0.5em);
}

.troll__head>div div {
	top: calc(100% - 1em);
}

.troll__right-arm {
	animation-name: rightArm;
	height: 11em;
	transform: rotate(85deg);
}

.troll__left-arm {
	animation-name: leftArm;
	height: 10em;
	transform: rotate(-12deg);
}

.troll__right-lower-arm {
	animation-name: rightLowerArm;
	height: 4em;
	transform: rotate(-145deg);
}

.troll__left-lower-arm {
	animation-name: leftLowerArm;
	height: 7em;
	transform: rotate(143deg);
}

div.troll__right-hand,
div.troll__left-hand {
	border-radius: 0.75em;
	left: -0.25em;
	transform-origin: 0.75em 0.5em;
	height: 1.5em;
	width: 1.5em;
}

.troll__right-hand {
	animation-name: rightHand;
	transform: rotate(-30deg);
}

.troll__left-hand {
	animation-name: leftHand;
	transform: rotate(90deg);
}

/* Body */
.troll__upper-body {
	animation-name: upperBody;
	height: 7em;
	transform: rotate(-5deg);
}

.troll__lower-body {
	animation-name: lowerBody;
	height: 8em;
	transform: rotate(18deg);
}

/* Legs */
.troll__right-thigh {
	animation-name: rightThigh;
	height: 9.25em;
	transform: rotate(100deg);
}

.troll__left-thigh {
	animation-name: leftThigh;
	height: 6.25em;
	transform: rotate(-25deg);
}

.troll__right-lower-leg {
	animation-name: rightLowerLeg;
	height: 4.5em;
	transform: rotate(-120deg);
}

.troll__left-lower-leg {
	animation-name: leftLowerLeg;
	height: 6.75em;
	transform: rotate(24deg);
}

.troll__right-foot,
.troll__left-foot {
	height: 3em;
}

.troll__right-foot {
	animation-name: rightFoot;
	transform: rotate(95deg);
}

.troll__left-foot {
	animation-name: leftFoot;
	transform: rotate(-90deg);
}

/* Animations */
@keyframes head {

	from,
	to {
		transform: translate(0, 0) rotate(0)
	}

	10% {
		transform: translate(-0.25em, 0.25em) rotate(0)
	}

	20% {
		transform: translate(-1.25em, 1.5em) rotate(-4deg)
	}

	30% {
		transform: translate(-2.75em, 3em) rotate(-8deg)
	}

	40% {
		transform: translate(-5.25em, 1.5em) rotate(-16deg)
	}

	50% {
		transform: translate(-6.25em, -0.5em) rotate(-24deg)
	}

	60% {
		transform: translate(-6.25em, -0.75em) rotate(-20deg)
	}

	70% {
		transform: translate(-4.25em, 1.25em) rotate(-18deg)
	}

	80% {
		transform: translate(-2.25em, 4.25em) rotate(0)
	}

	90% {
		transform: translate(-0.75em, 3.75em) rotate(0)
	}
}

@keyframes rightArm {

	from,
	to {
		height: 11em;
		transform: rotate(85deg)
	}

	10% {
		height: 10.5em;
		transform: rotate(80deg)
	}

	20% {
		height: 9.5em;
		transform: rotate(70deg)
	}

	30% {
		height: 8em;
		transform: rotate(60deg)
	}

	40% {
		height: 7em;
		transform: rotate(45deg)
	}

	50% {
		height: 8.75em;
		transform: rotate(36deg)
	}

	60% {
		height: 9.25em;
		transform: rotate(27deg)
	}

	70% {
		height: 8.25em;
		transform: rotate(35deg)
	}

	80% {
		height: 6.5em;
		transform: rotate(40deg)
	}

	90% {
		height: 7.5em;
		transform: rotate(56deg)
	}
}

@keyframes leftArm {

	from,
	to {
		height: 10em;
		transform: rotate(-12deg)
	}

	10% {
		height: 9em;
		transform: rotate(-20deg)
	}

	20% {
		height: 9em;
		transform: rotate(-27deg)
	}

	30% {
		height: 8.5em;
		transform: rotate(-35deg)
	}

	40% {
		height: 10em;
		transform: rotate(-87deg)
	}

	50% {
		height: 9.75em;
		transform: rotate(-70deg)
	}

	60% {
		height: 9.25em;
		transform: rotate(-80deg)
	}

	70% {
		height: 8.25em;
		transform: rotate(-80deg)
	}

	80% {
		height: 8.75em;
		transform: rotate(-65deg)
	}

	90% {
		height: 9em;
		transform: rotate(-43deg)
	}
}

@keyframes rightLowerArm {

	from,
	to {
		height: 4em;
		transform: rotate(-145deg)
	}

	10% {
		height: 3.5em;
		transform: rotate(-150deg)
	}

	20% {
		height: 4em;
		transform: rotate(-130deg)
	}

	30% {
		height: 4em;
		transform: rotate(-95deg)
	}

	40% {
		height: 6em;
		transform: rotate(-148deg)
	}

	50% {
		height: 5.75em;
		transform: rotate(-145deg)
	}

	60% {
		height: 5.5em;
		transform: rotate(-150deg)
	}

	70% {
		height: 4em;
		transform: rotate(-150deg)
	}

	80% {
		height: 3.25em;
		transform: rotate(-100deg)
	}

	90% {
		height: 4.5em;
		transform: rotate(-105deg)
	}
}

@keyframes leftLowerArm {

	from,
	to {
		height: 7em;
		transform: rotate(143deg)
	}

	10% {
		height: 7em;
		transform: rotate(140deg)
	}

	20% {
		height: 5em;
		transform: rotate(110deg)
	}

	30% {
		height: 3em;
		transform: rotate(95deg)
	}

	40% {
		height: 4em;
		transform: rotate(147deg)
	}

	50% {
		height: 3.25em;
		transform: rotate(130deg)
	}

	60% {
		height: 4.5em;
		transform: rotate(120deg)
	}

	70% {
		height: 4.5em;
		transform: rotate(120deg)
	}

	80% {
		height: 4.25em;
		transform: rotate(143deg)
	}

	90% {
		height: 4.25em;
		transform: rotate(125deg)
	}
}

@keyframes rightHand {

	from,
	to {
		transform: rotate(-30deg)
	}

	10% {
		transform: rotate(-30deg)
	}

	20% {
		transform: rotate(-100deg)
	}

	30% {
		transform: rotate(-45deg)
	}

	40% {
		transform: rotate(-65deg)
	}

	50% {
		transform: rotate(-75deg)
	}

	60% {
		transform: rotate(-60deg)
	}

	70% {
		transform: rotate(-30deg)
	}

	80% {
		transform: rotate(-60deg)
	}

	90% {
		transform: rotate(-30deg)
	}
}

@keyframes leftHand {

	from,
	to {
		transform: rotate(90deg)
	}

	10% {
		transform: rotate(90deg)
	}

	20% {
		transform: rotate(90deg)
	}

	30% {
		transform: rotate(30deg)
	}

	40% {
		transform: rotate(90deg)
	}

	50% {
		transform: rotate(0deg)
	}

	60% {
		transform: rotate(90deg)
	}

	70% {
		transform: rotate(45deg)
	}

	80% {
		transform: rotate(-90deg)
	}

	90% {
		transform: rotate(60deg)
	}
}

@keyframes upperBody {

	from,
	to {
		transform: rotate(-5deg)
	}

	10% {
		transform: rotate(5deg)
	}

	20% {
		transform: rotate(12deg)
	}

	30% {
		transform: rotate(15deg)
	}

	40% {
		transform: rotate(24deg)
	}

	50% {
		transform: rotate(30deg)
	}

	60% {
		transform: rotate(16deg)
	}

	70% {
		transform: rotate(11deg)
	}

	80% {
		transform: rotate(-10deg)
	}

	90% {
		transform: rotate(-8deg)
	}
}

@keyframes lowerBody {

	from,
	to {
		height: 8em;
		transform: rotate(18deg)
	}

	10% {
		height: 8.5em;
		transform: rotate(-2deg)
	}

	20% {
		height: 8em;
		transform: rotate(-10deg)
	}

	30% {
		height: 6.75em;
		transform: rotate(-18deg)
	}

	40% {
		height: 7em;
		transform: rotate(-24deg)
	}

	50% {
		height: 8.75em;
		transform: rotate(-20deg)
	}

	60% {
		height: 10.25em;
		transform: rotate(-5deg)
	}

	70% {
		height: 8em;
		transform: rotate(6deg)
	}

	80% {
		height: 5.75em;
		transform: rotate(18deg)
	}

	90% {
		height: 5.75em;
		transform: rotate(25deg)
	}
}

@keyframes rightThigh {

	from,
	to {
		height: 9.25em;
		transform: rotate(100deg)
	}

	10% {
		height: 8.75em;
		transform: rotate(110deg)
	}

	20% {
		height: 9.25em;
		transform: rotate(50deg)
	}

	30% {
		height: 9.75em;
		transform: rotate(53deg)
	}

	40% {
		height: 8.75em;
		transform: rotate(53deg)
	}

	50% {
		height: 9.25em;
		transform: rotate(45deg)
	}

	60% {
		height: 8.5em;
		transform: rotate(46deg)
	}

	70% {
		height: 8.25em;
		transform: rotate(38deg)
	}

	80% {
		height: 8.5em;
		transform: rotate(38deg)
	}

	90% {
		height: 7.75em;
		transform: rotate(65deg)
	}
}

@keyframes leftThigh {

	from,
	to {
		height: 6.25em;
		transform: rotate(-25deg)
	}

	10% {
		height: 7em;
		transform: rotate(-23deg)
	}

	20% {
		height: 8.75em;
		transform: rotate(-29deg)
	}

	30% {
		height: 10.5em;
		transform: rotate(-78deg)
	}

	40% {
		height: 10em;
		transform: rotate(-88deg)
	}

	50% {
		height: 10em;
		transform: rotate(-87deg)
	}

	60% {
		height: 9em;
		transform: rotate(-95deg)
	}

	70% {
		height: 8em;
		transform: rotate(-64deg)
	}

	80% {
		height: 5.5em;
		transform: rotate(-45deg)
	}

	90% {
		height: 5.75em;
		transform: rotate(-42deg)
	}
}

@keyframes rightLowerLeg {

	from,
	to {
		height: 4.5em;
		transform: rotate(-120deg)
	}

	10% {
		height: 5em;
		transform: rotate(-115deg)
	}

	20% {
		height: 7em;
		transform: rotate(-90deg)
	}

	30% {
		height: 5.25em;
		transform: rotate(-85deg)
	}

	40% {
		height: 5em;
		transform: rotate(-80deg)
	}

	50% {
		height: 5.25em;
		transform: rotate(-70deg)
	}

	60% {
		height: 5.5em;
		transform: rotate(-70deg)
	}

	70% {
		height: 6em;
		transform: rotate(-50deg)
	}

	80% {
		height: 5.5em;
		transform: rotate(-70deg)
	}

	90% {
		height: 6.5em;
		transform: rotate(-95deg)
	}
}

@keyframes leftLowerLeg {

	from,
	to {
		height: 6.75em;
		transform: rotate(24deg)
	}

	10% {
		height: 6em;
		transform: rotate(45deg)
	}

	20% {
		height: 4.75em;
		transform: rotate(85deg)
	}

	30% {
		height: 6.75em;
		transform: rotate(135deg)
	}

	40% {
		height: 6.25em;
		transform: rotate(132deg)
	}

	50% {
		height: 6.25em;
		transform: rotate(125deg)
	}

	60% {
		height: 5.75em;
		transform: rotate(110deg)
	}

	70% {
		height: 5.75em;
		transform: rotate(88deg)
	}

	80% {
		height: 6.75em;
		transform: rotate(45deg)
	}

	90% {
		height: 6em;
		transform: rotate(35deg)
	}
}

@keyframes rightFoot {

	from,
	to {
		transform: rotate(95deg)
	}

	10% {
		transform: rotate(150deg)
	}

	20% {
		transform: rotate(130deg)
	}

	30% {
		transform: rotate(95deg)
	}

	40% {
		transform: rotate(100deg)
	}

	50% {
		transform: rotate(110deg)
	}

	60% {
		transform: rotate(103deg)
	}

	70% {
		transform: rotate(70deg)
	}

	80% {
		transform: rotate(65deg)
	}

	90% {
		transform: rotate(80deg)
	}
}

@keyframes leftFoot {

	from,
	to {
		transform: rotate(-90deg)
	}

	10% {
		transform: rotate(-105deg)
	}

	20% {
		transform: rotate(-90deg)
	}

	30% {
		transform: rotate(-70deg)
	}

	40% {
		transform: rotate(-85deg)
	}

	50% {
		transform: rotate(-85deg)
	}

	60% {
		transform: rotate(-70deg)
	}

	70% {
		transform: rotate(-90deg)
	}

	80% {
		transform: rotate(-70deg)
	}

	90% {
		transform: rotate(-60deg)
	}
}

.small {
	display: none;
}







/* Styles for small screens */
@media only screen and (max-width: 768px) {

	/* Existing CSS */
	.nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		background-color: #fff;
		color: #000;
		position: fixed;
		z-index: 1000;
		width: 100%;
		box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
	}

	.hamburger {
		font-size: 25px;
		font-weight: bolder;
		cursor: pointer;
		display: none;
	}

	.hamburger.open {
		display: block;
	}

	.hamburger.close {
		display: none;
	}

	.nav-links {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 30px;
		left: -100%;
		width: 100%;
		background-color: #fff;
		padding: 10px 20px;
		text-align: end;
		transition: transform 0.5s ease-in-out;
	}

	.nav-links.active {
		transform: translateX(100%);
	}

	.nav-links a {
		margin: 5px 0;
		font-size: 15px;
		color: #000;
		font-weight: bold;
	}


	.main {
		display: flex;
		flex-direction: column;
		padding: 20px 0px;
	}


	.header {
		position: fixed;
		display: none;
	}

	.mad-troll img {
		width: 80%;
	}

	.text-box {
		padding: 10px;
		font-size: 14px;
		width: 90%;
	}

	.hold {
		display: flex;
		flex-direction: column-reverse;
	}

	.icons .icon{
		gap: 20px;
	}

	.last {
		display: flex;
		flex-direction: column-reverse;
		margin-top: 2px;
	}

	.caption {
		margin-bottom: 20px;
		text-align: center;
	}

	.troll {
		width: 100%;
		padding-top: 200px;
	}

	.description strong {
		font-size: 16px;
	}

	.description p {
		font-size: 15px;
	}

	.small {
		display: block;
	}
}