html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
}
::-webkit-scrollbar {
	width: 0.5vh;
}
::-webkit-scrollbar-track {
	background: white;
}
::-webkit-scrollbar-thumb {
	background: #000026;
}
nav {
	display: none;
}
#logobox {
	background-color: #f58e85;
	width: 100%;
	height: 42vh;
	display: flex;
	justify-content: center;
	overflow: hidden;
	z-index: 2;
	transition: height 0.5s ease-in-out;
	position: absolute;
}
.logo {
	width: 25vh;
	position: absolute;
	top: 5vh;
}
#menubutt {
	position: absolute;
	bottom: 1vh;
	width: 5vh;
	transition: 0.5s ease-in-out;
	cursor: pointer;
	opacity: 1;
}
.open {
	transform: scaleY(-1);
}
.select::after {
	content: "";
	width: 100%;
	height: 0.1vh;
	display: block;
	background: white;
}
#logobox .symbols {
	opacity: 0;
}
#speaker {
	z-index: 2;
	left: 5vh;
	bottom: 5vh;
	position: fixed;
}
#speakerBox::before {
	content: '';
	position: fixed;
	left: 3.5vh;
	bottom: 3.5vh;
    width: 8vh;
    height: 8vh;
    background-color: #f58e85;
    border-radius: 50%;
    z-index: 1;
}
#cont {
	position: absolute;
	top: 42vh;
	width: 100%;
	transition: top 0.5s ease-in-out;
	animation: contappear 0.5s ease-in-out;
	padding-bottom: 8vh;
}
@keyframes contappear {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.contcont {
	padding: 5vh;
	overflow-wrap: break-word;
}
h1, h2 {
	font-family: title;
	font-weight: normal;
	margin: 0;
	text-align: center;
}
h1 {
	font-size: 6vh;
}
h2 {
	font-size: 3.5vh;
	margin-bottom: 2vh;
}
p, span {
	font-family: mont;
	font-size: 2.5vh;
	color: #000026;
	line-height: 4vh;
}
p a {
	color: #000026;
}
label {
	font-family: mont;
	color: #000025;
	font-size: 2.5vh;
}
input, textarea {
	width: 100%;
	background: #f5c182;
	font-family: mont;
	font-size: 2vh;
	color: #000026;
	box-sizing: border-box;
    border: solid 0.8vh;
    border-color: #f58e85 #f58e85 white white;
	padding: 1vh;
	margin-top: 1vh;
	margin-bottom: 2vh;
	transition: 0.3s;
}
textarea {
	resize: none;
}
input:focus, textarea:focus {
	outline: none;
	border-color: white white #f58e85 #f58e85;
	background: #000026;
	color: white;
}
::placeholder {
	color: #f58e85;
}
::marker {
	font-size: 5vh;
}
iframe, #soundtrack img {
    border: solid 0.8vh;
    border-color: #f58e85 #f58e85 white white;
	box-sizing: border-box;
	width: 100%;
}
ul {
	padding-inline-start: 3vh;
}
li {
	list-style-image: url('../graphic/svg/flair.svg');
	font-family: mont;
	font-size: 2.5vh;
	margin-bottom: 2vh;
	padding-left: 2vh;
}
li a {
	color: #000026;
	text-decoration: underline;
}
.pics img {
	border: solid 0.8vh;
	border-color: #f58e85 #f58e85 white white;
	width: 70%;
	box-sizing: border-box;
	margin: 0 5%;
}
.pics::before, .pics::after {
	content: url('../graphic/svg/flair.svg');
	display: block;
	width: 10%;
	margin: 45% 0;
}
.pics::before {
	float: left;
}
.pics::after {
	float: right;
}
.statement {
	display: block;
	text-align: center;
    font-family: title;
    font-weight: normal;
	font-size: 3.5vh;
	color: white;
    background: #000026;
    border: solid 0.8vh;
    border-color: #f58e85 #f58e85 white white;
	padding: 5vh 2vh;
	box-sizing: border-box;
}
.butt {
	width: 100%;
	margin-bottom: 2vh;
	padding: 2vh;
	cursor: pointer;
}
.cap p {
	margin: 0;
}
.block {
	height: fit-content;
	overflow: hidden;
}
.block a {
	font-family: mont;
	font-size: 2.5vh;
	text-decoration: underline;
}
.block::after {
	content: url('../graphic/svg/flair.svg');
	width: 5vh;
	display: block;
	width: 10%;
	margin: 3vh 45% 5vh 45%;
	float: left;
}
.musicPort {
	aspect-ratio: .8;
}
#redes {
	display: grid;
	grid-template-columns: auto auto auto;
	justify-items: center;
}
#redes a {
	transition: 0.3s;
}
#redes a svg {
	width: 5vh;
	height: 5vh;
}
.portImg {
	width: 100%;
}
.pricing {
	margin-bottom: 3vh;
}
.dots {
	flex-grow: 1;
	border-bottom: 1.5vh dotted white;
	border-image: url('../graphic/svg/flair.svg') 100% 0.1 round;
	margin: 0 2%;
}
#soundtrack iframe, #soundtrack img {
	aspect-ratio: 16/9;
}





@media (min-width: 768px) {
	h1, h2 {
		text-align: left;
	}
	h1 {
		font-size: 8vh;
	}
	iframe, #soundtrack img {
		width: 50%;
		float: left;
		margin-right: 2vh
	}
	form {
		width: 60%;
		float: left;
	}
	ul {
		padding-left: 5vh;
	}
	.contcont {
		padding: 8vh 20vh;
	}
	.pics {
		width: 30%;
		margin: 2vh 35%;
	}
	.statement {
		width: 60%;
		margin: 0 20%;
	}
	.butt {
		margin: 2vh 5%;
		width: 40%;
		float: left;
		transition: 0.3s;
	}
	.butt:hover {
		border-color: white white #f58e85 #f58e85;
	}
	.submit {
		margin: 2vh 20%;
		width: 60%
	}
	.block img {
		width: 35vh;
		float: left;
        margin-right: 2vh;
	}
	.block::after {
		width: 2%;
		margin: 3vh 49% 5vh 49%;
	}
	#redes {
		grid-template-columns: revert;
		float: right;
		width: 40%;
		justify-content: end;
	}
	#redes a:hover {
		color: #f58e85
	}
	#redes a svg {
		margin: 2.5vh;
		padding: 1vh 5vh;
	}
	.pricing {
		margin-bottom: revert;
		display: flex;
		align-items: center;
	}
	.musicPort {
		height: 21vh;
	}
}