:root{
	--main-margin: 10%;
	--global-radius: 7px;
}


@font-face{
	font-family: merri;
	src: url('MerriweatherSans-VariableFont_wght.ttf') format('truetype');
}

body{
	background: #121212;
	font-family: 'merri', sans-serif;
	color: whitesmoke;
	margin: 0px;
}

body::-webkit-scrollbar{
	width: .5rem;
}

body::-webkit-scrollbar-thumb{
	border-radius: 5px;
	background: ghostwhite;
}

body::-webkit-scrollbar-track{
	color: transparent;
}

figure{
/*	margin: 0px var(--global-radius) 0px;*/
	padding: 5px;
	margin: auto;
	max-width: calc(var(--global-radius) + 60%);
	border: 1px solid;
	border-radius: var(--global-radius);
}

figure .smol{
	max-width: 25%;
}

figure audio{
	display: flex;
	flex-wrap: nowrap;
	align-self: center;
}

figure img, video{
	border-top-left-radius:  var(--global-radius);
	border-top-right-radius: var(--global-radius);
	position: relative;
	display: flex;
	width: -webkit-fill-available;
}

audio{
	display: block;
	margin: 10px auto 13px;
	box-shadow: forestgreen;
}

figcaption{
	border-bottom-left-radius:  var(--global-radius);
	border-bottom-right-radius: var(--global-radius);
	background: black;
	color: whitesmoke;
	padding: 2px;
	text-align: center;
}

pre{
	margin-left:  var(--main-margin);
	margin-right: var(--main-margin);
	width: calc(var(--main-margin) - 100);
	font-size: 0.9rem;
	box-shadow: 0px 0px 5px black;
}

#full-src{
	overflow-y: scroll;
	height: 500px;
}

h1{
	position: relative;
	font-size: 3rem;
}

h3{
	font-size: 2rem;
	margin-bottom: -10px;
}

h5{
	font-size: 1rem;
	margin: 0px;
	padding-top: 40px;
	color: #03dac6;
	text-transform: uppercase;
}

h1, h3, h5, p, ul {
    margin-left:  var(--main-margin);
    margin-right: var(--main-margin);
}


ul{
	line-height: 1.7em;
	list-style: binary;
}

ul p{
	/*margin-left:  0px;
	margin-right:   0px;
	margin-top:     3px;
	margin-bottom:  3px;*/
	margin: 3px 0px 3px;
	line-height:  1.5em;
}

p{
	line-height: 1.5rem;
}

em{
	padding-right: 3px;
}

u:hover, em:hover{
	text-shadow: 0px 0px 10px rgba(240, 240, 240, 0.5);
}

u:hover{
	text-underline-offset: 2px;
}

u::selection, em::selection{
	background-color: #03dac6;
	color: black;
}

b{
	font-weight: 900;
}

b::selection{
	background: darkslateblue;
}

.mono{
	color: whitesmoke;
	font-family: monospace;
	font-size: 1rem;
	border-radius: 5px;
	border: 1px solid gray;
	padding-left: 5px;
	padding-right: 5px;
	background: #363636;
	margin-right: 2px;
	white-space: nowrap;
}

a{
	color: springgreen;
	transition: 0.25s;
}

a:hover{
	text-shadow: 0px 0px 15px springgreen;
}

.range{
	text-decoration: underline;
	text-decoration-color: #E02323;
	position: relative;
	text-shadow: 0px 0px 20px #E02323;
	cursor: default;
}

.range::before{
	content: '';
	display: inline-block;
	background-image: url("img/range.svg");
    background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    padding: 16px;
    position: absolute;
    margin-left: -40px;/*
    align-items: center;
    align-content: center;*/
    z-index: 1;
}

.range::selection{
	background: #E02323;
}

.upbge{
	text-decoration: underline;
	text-decoration-color: #F19237;
	position: relative;
	text-shadow: 0px 0px 20px #F19237;
	cursor: default;
}

.upbge::before{
	content: '';
	display: inline-block;
	background-image: url("img/upbge.svg");
    background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
   padding: 10px;
   align-items: center;
   position: absolute;
   width: 2px;
   height: 2px;
   right: 4rem;
   z-index: 1;
}

.upbge::selection{
	background: #F19237;
	color: black;
}

/*  that warning boxes  */
.know, .note, .warning{
	display: flex;
	flex-flow: column;
	margin: 20px calc(var(--main-margin)*2) 20px;
	border:  2px solid whitesmoke;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
	border-radius: 5px;
}

.know p, .note p, .warning p{
	margin: 0px;
	padding: 10px;
}
.know ul, .note ul, .warning ul{
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 2rem;
}

.know .what{
	background: linear-gradient(to right, forestgreen, darkgreen);
}
.know .what::before{
	content: "Know ❓";
}

.note .what{
	background: linear-gradient(to right, midnightblue, royalblue);
}
.note .what::before{
	content: "Note 📝";
}

.warning .what{
	background: linear-gradient(to right, orangered, #b82c1a);
}
.warning .what::before{
	content: "Warning ❗";
}

iframe{
	width: -webkit-fill-available;
	height: -webkit-fill-available;
}

.prosncons{
	margin-top: -12.5px;
}

details{
	border: 2px solid #aaa;
	border-radius: 4px;
	padding: 0.5em 0.5em 0;
	margin: 20px var(--main-margin) 20px;
}

summary{
	background: linear-gradient(to left, hotpink, transparent);
	font-weight: bold;
	margin: -0.5em -0.5em 0;
	padding: 0.5em;
}

details[open]{
	padding: 0.5em;
}

details[open] summary{
	border-bottom: 1px solid #aaa;
	margin-bottom: 0.5em;
}

video{
	width: -webkit-fill-available;
}

[data-tooltip] {
	--arrow-size: 10px;
	position: relative;
	z-index: 10;
	display: inline-block; /* Ensure the element is inline-block to position correctly */
}

/* Positioning and visibility settings of the tooltip */
[data-tooltip]:before,
[data-tooltip]:after {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	left: 50%;
	bottom: calc(100% + var(--arrow-size));
	pointer-events: none;
	transition: 0.2s;
	will-change: transform;
}

/* The actual tooltip with a dynamic width */
[data-tooltip]:before {
	content: attr(data-tooltip);
	padding: 10px 18px;
	min-width: 50px;
	max-width: 300px;
	width: max-content;
	width: -moz-max-content;
	border-radius: 6px;
	font-size: 14px;
	background-color: rgba(59, 72, 80, 0.9);
	color: #fff;
	text-align: left;
	white-space: pre-wrap;
	transform: translate(-50%,  calc(0px - var(--arrow-size))) scale(0.5);
}

/* Tooltip arrow */
[data-tooltip]:after {
	content: '';
	border-style: solid;
	border-width: var(--arrow-size) var(--arrow-size) 0px var(--arrow-size); /* CSS triangle */
	border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
	transition-duration: 0s;
	transform-origin: top;
	transform: translateX(-50%) scaleY(0);
}

/* Tooltip becomes visible at hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
	visibility: visible;
	opacity: 1;
}
/* Scales from 0.5 to 1 -> grow effect */
[data-tooltip]:hover:before {
	transition-delay: 0.3s;
	transform: translate(-50%, calc(0px - var(--arrow-size))) scale(1);
}
/*
  Arrow slide down effect only on mouseenter (NOT on mouseleave)
*/
[data-tooltip]:hover:after {
	transition-delay: 0.5s; /* Starting after the grow effect */
	transition-duration: 0.2s;
	transform: translateX(-50%) scaleY(1);
}


/* Target Stuff */
:target {
   animation: target_ 2s;
}

@keyframes target_{
	0%{
		background: transparent;
		color: inherit;
	}
	25%{
		color: black;
	}
	50%{
		background: yellow;
	}
	75%{
		color: black;
	}
	100%{
		background: transparent;
		color: inherit;
	}
}
/*Making the site more responsive almost on any device*/
@media only screen and (width >= 2560px){
	body{
		font-size: 1.5rem;
	}
	P{
		line-height: 2.5rem;
	}
	figure{
		max-width: 50%;
		border-radius: 5px;
	}
	a{
		color: lime;
	}
	.mono{
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 10px;
		padding-right: 10px;
	}
}


@media screen and (orientation: portrait) and (max-width: 1080px){
	figure{
		max-width: 75%;
	}
	a{
		color: lime;
	}
	.note{
		width: 70%;
	}
	pre::-webkit-scrollbar-thumb{
		background: forestgreen;
	}
	ul{
		padding-right: 50px;
		padding-left: 50px;
		padding-top: 25px;
		padding-bottom: 25px;
		box-shadow: 0px 0px 20px black inset;
		background: rgba(137, 80, 80, 0.1);
		overflow-x: scroll;
		line-height: 1.2rem;
		list-style-type: binary;
	}
	ul p:hover{
		margin-left: 40px;
		color: rgb(255, 255, 255, 0.9);
	}
	.know, .note, .warning{
		width: 80%;
	}
	#brotips{
		box-shadow: none;
		background: inherit;
	}
	#brotips h3{
		line-height: 2em;
	}
}