.result {
	width: 256px;
	margin: 20px
}

.icon {
	height: 256px;
	width: 256px
}

.icon-trackName {
	font-size: 1.1rem
}

.icon-platform {
	font-size: .7rem
}

.icon-artistName {
	font-size: .8rem
}

a.icon-info:link,
a.icon-info:visited {
	color: #000
}

a.icon-info:hover {
	color: #6ee48d
}

a.icon-info:active {
	color: #ffcc7a
}

@media screen and (max-width: 650px) {
	.result {
		width: 100vw
	}

	.icon {
		height: 75vw;
		width: 75vw
	}
}

.app {
	text-align: center;
	min-height: 100%;
	flex-direction: column
}

.app,
header {
	display: flex
}

a {
	text-decoration: none
}

header {
	background-image: linear-gradient(135deg, #9cc8f8, #fa8ce4);
	margin: 40px;
	box-shadow: 0 0 10px #888;
	border-radius: 20px;
	justify-content: center
}

main {
	padding-bottom: 30px
}

footer {
	position: fixed;
	bottom: 10px;
	left: calc(50vw - 130px);
	right: calc(50vw - 130px);
	background-color: #0000000d;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #2f2f2f;
	padding: 5px;
	border-radius: 10px;
	font-family: MiSans VF;
	text-align: center;
	transition: background-color .5s ease, color .5s ease
}

footer:hover {
	color: #fff;
	background-color: #0000008c
}

a.footer-msg {
	color: #2f2f2f;
	transition: color .3s
}

a.footer-msg:visited {
	color: #2f2f2f
}

a.footer-msg:active {
	color: #ffcc7a
}

footer a.footer-msg {
	transition: color .5s ease
}

footer:hover a.footer-msg {
	color: #fff
}

footer:hover a.footer-msg:hover {
	color: #6c6
}

input::-webkit-input-placeholder {
	color: #b8b8b8
}

input:-ms-input-placeholder {
	color: #b8b8b8
}

input:-moz-placeholder {
	color: #b8b8b8;
	opacity: 1
}

input::-moz-placeholder {
	color: #b8b8b8;
	opacity: 1
}

.logo {
	color: #fff;
	font-size: 3.9rem;
	font-weight: 700;
	margin-top: 15px
}

.description {
	color: #fff;
	font-size: 1.26rem;
	margin-bottom: 10px
}

.center {
	flex: 1;
	max-width: 720px
}

.options {
	color: #fff;
	margin: 4px 0
}

.options label {
	margin: 0 8px
}

label {
	display: inline-block;
	cursor: pointer
}

.options input[type=checkbox] {
	width: 15px;
	height: 13.6px;
	margin-right: 5px
}

.options input[type=checkbox]:before {
	content: "";
	position: absolute;
	width: 15px;
	height: 15px;
	text-align: center;
	background-color: #fff;
	border-radius: 2.8px
}

.options input[type=checkbox]:checked:before {
	position: absolute;
	background-color: #00ff84;
	width: 13px;
	height: 13px;
	text-align: center;
	border: solid 1px black;
	border-radius: 2.8px
}

@supports (-webkit-touch-callout: none) {
	.options input[type=checkbox] {
		width: 16px;
		height: 16px
	}

	.options input[type=checkbox]:before {
		width: 16px;
		height: 16px
	}

	.options input[type=checkbox]:checked:before {
		width: 14px;
		height: 14px
	}
}

.search {
	height: 45px;
	display: flex;
	margin: 20px 10%
}

.search-input {
	height: 45px;
	width: 20px;
	flex: 1;
	padding: 0 10px;
	border: 0;
	border-radius: 8px 0 0 8px/8px 0px 0px 8px;
	font-size: 1rem;
	outline: none
}

.search-button {
	height: 45px;
	width: 48px;
	display: flex;
	border: 0;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	background: #22b5ff;
	align-items: center;
	transition: background-color .35s
}

.search-button:hover {
	background: #2a7efb
}

.search-icon {
	margin: 0 auto;
	height: 28px;
	width: 28px;
	background-image: url(resources/search.svg)
}

.results {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around
}

@media screen and (max-width: 768px) {
	header {
		margin-top: 5%;
		margin-left: 5%;
		margin-right: 5%
	}

	.options label {
		margin: 0 4px
	}
}

@media screen and (max-width: 380px) {
	header {
		margin-top: 0%;
		margin-left: 0%;
		margin-right: 0%;
		border-radius: 0
	}

	.search {
		margin-left: 5%;
		margin-right: 5%
	}

	.options label {
		margin: 0 4px
	}
}

body,
html {
	min-height: 100vh
}

body {
	margin: 0;
	padding: 0;
	font-family: MiSans VF;
	background-image: url(resources/background.webp);
	background-color: #f5f5f5
}

@font-face {
    font-family: 'OPPOSansOS2-5000-Regular';
    src: url('https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2')format('woff2');  
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
   
  body {
    font-family: 'OPPOSansOS2-5000-Regular', sans-serif;
  }