* {
	font-family: fredoka;
	margin: 0;
	padding: 0;
}

:root {
	--sticker-blue: hsl(260 100% 40%);
	--sticker-red: hsl(0 100% 50%);
	--light-color: hsl(45 20% 97%);
	--dark-color: hsl(45 0% 8%);
	--vw-rem: min(1rem, 2.5vw);
	--half-vw-rem: calc(var(--vw-rem) / 2);
	--opf-vw-rem: calc(var(--vw-rem) + var(--half-vw-rem));
	--twice-vw-rem: calc(2 * var(--vw-rem));
}

body {
	color: var(--dark-color);
	background-color: var(--light-color);
	width: 100vw;
	overflow-x: hidden;
}

main {
	overflow: hidden;
	width: 36rem;
	max-width: 96vw;
	margin: 0 auto 2rem auto;
}

footer {
	overflow: hidden;
	width: 36rem;
	max-width: 96vw;
	margin: 0 auto 1rem auto;
}

footer p {
	border-top: .1rem solid var(--dark-color);
	padding-top: 1rem;
}

h2 {
	font-size: 2rem;
	line-height: 1;
	margin: 0 var(--opf-vw-rem) .3rem var(--opf-vw-rem);
	scroll-margin-top: var(--vw-rem);
}

p {
	font-size: 1.1rem;
	line-height: 1.2;
	text-align: justify;
	margin: 0 var(--vw-rem) .8rem var(--opf-vw-rem);
}

ul {
	margin: 0 var(--vw-rem) .8rem var(--opf-vw-rem);
	list-style: inside;
}

li {
	font-size: 1.1rem;
	line-height: 1.2;
	text-align: justify;
	margin-bottom: .4rem;
}

a {
	color: var(--sticker-blue);
}

nav {
	position: fixed;
	top: var(--vw-rem);
	right: var(--twice-vw-rem);
	z-index: 5;
}

nav details {
	display: flex;
	flex-direction: column;
	justify-content: end;
}

nav details summary {
	text-align: right;
	font-size: 2rem;
	font-weight: 700;
	color: var(--sticker-blue);
	display: block;
	rotate: 0deg;
	transform-origin: right;
}

nav details[open] summary {
	rotate: 2deg;
}

nav details summary::-webkit-details-marker {
	display: none;
}

nav details ul {
	font-weight: 500;
	background-color: var(--light-color);
	border: .2rem solid var(--sticker-blue);
	border-radius: var(--vw-rem);
	list-style: none;
	padding: var(--vw-rem);
	margin: .2rem 0 0 var(--twice-vw-rem);
}

nav details ul li {
	padding-bottom: .5rem;
	border-bottom: .1rem solid var(--sticker-blue);
}

nav details ul li:last-child {
	padding-bottom: 0;
	border-bottom: none;
	margin-bottom: 0;
}

nav details ul li a {
	text-decoration: none;
}

img {
	scroll-margin-top: var(--vw-rem);
}

#menuSticker {
	width: 5.6rem;
	position: fixed;
	top: calc(var(--vw-rem) + .55rem);
	right: calc(var(--twice-vw-rem) - .3rem);
	rotate: 0deg;	
	transform-origin: right;
}

#menuSticker:has(+ details[open]) {
	rotate: 2deg;
}

#mainSticker {
	width: calc(100% - var(--vw-rem));
	margin: 0 var(--half-vw-rem) 0 var(--half-vw-rem);
	position: relative;
	top: var(--twice-vw-rem);
	transform-origin: center;
	transform: rotate(-2deg);
	z-index: 3;
}

#mainVideo {
	width: calc(100% - var(--opf-vw-rem) - var(--opf-vw-rem));
	margin: 0 var(--opf-vw-rem) 1rem var(--opf-vw-rem);
	border-radius: var(--twice-vw-rem);
	border: var(--half-vw-rem) solid var(--sticker-blue);
	position: relative;
	background-color: var(--sticker-blue);
}

#mainWrapper {
	background-color: var(--light-color);
	position: relative;
	z-index: 2;
}

.tweet {
	width: calc(100% - var(--opf-vw-rem) - var(--opf-vw-rem));
	margin: 0 var(--opf-vw-rem) 1rem var(--opf-vw-rem);
	border-radius: var(--twice-vw-rem);
	border: var(--half-vw-rem) solid var(--sticker-blue);
}

@media screen and (max-width: 39.5rem) {
	nav {
		z-index: 0;
	}
}