* {box-sizing: border-box; background: initial; font-style: initial; margin: initial; padding: initial; border: initial; margin-block: initial; margin-inline: initial;}

/*init*/
html {scroll-behavior: smooth; overflow-x: hidden; font-family: 'Jost', sans-serif; font-feature-settings: 'lnum', 'ss01', 'dlig', 'liga', 'clig', 'kern'; color: #f0f0f0; text-align: center;}

body {background: #202020 url('../index/hd.webp') no-repeat center/contain fixed; cursor: crosshair;}

header {animation: init 6s forwards;} footer {animation: init 6s 1.5s forwards;}
header, footer {padding: 2rem; opacity: 0;}
@keyframes init {0% {opacity: 0;} 100% {opacity: 1;}}

header {margin-top: 16rem;}
span {display: block; font-size: 4rem; line-height: 4.5rem; font-family: sans-serif; color: transparent; -webkit-text-stroke: 0.5px white; font-weight: 800; text-transform: uppercase;}

p, a, li {font-size: 1rem; font-weight: 300;}
p {margin-bottom: 2rem;}
p:last-of-type {margin-bottom: initial;}

a {text-decoration: none; color: #f0f0f0;} a, a::before, a::after {transition: 0.5s;}
a[rel=external] {color: #f0cc90;}
a[rel=external]:hover {font-weight: 600; letter-spacing: 0.0625rem;}
a[rel=external]::after {display: inline-block; content: ''; width: 0.75rem; aspect-ratio: 1/1; background: url('svg/icon/external.svg'); position: relative; left: 0.5rem;}

ul {list-style-type: none;}
mark {display: inline-block; height: 1.75rem; background: linear-gradient(0deg, #f0cc90 0.125rem, transparent 0.125rem); color: #f0f0f0;}

footer {text-align: center; display: grid; grid: 'img ' 'contact' 'social' 'copyright'; grid-gap: 2rem;}
footer > * {margin: auto !important;}

img {width: 8rem; pointer-events: none; margin-left: calc(50% - 4rem); margin-right: calc(50% - 4rem); grid-area: img; margin-bottom: 2rem !important;}

#contact {grid-area: contact;}
#contact li {margin-bottom: 0.5rem;} #contact li:last-of-type {margin-bottom: initial;}
#contact li:first-of-type {font-family: sans-serif; color: transparent; -webkit-text-stroke: 0.5px white; font-size: 2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.125rem; margin-bottom: initial;}
#contact li:nth-of-type(2) a, #contact li:last-of-type {font-size: 0.875rem;}
#contact a::before {display: inline-block; content: ''; width: 0.75rem; aspect-ratio: 1/1; position: relative; top: 0.125rem; right: 0.5rem;}
#contact li:nth-of-type(2) a::before {background: url('svg/icon/call.svg');}
#contact li:nth-of-type(3) a::before {width: 1rem; background: url('svg/social/whatsapp.svg');}
#contact a {color: #f0cc90;} #contact a:hover {font-weight: 600; letter-spacing: 0.0625rem;}

#social {grid-area: social;}
#social li {display: inline-block; margin-right: 1rem;}
#social li a {display: inline-block; width: 1rem; aspect-ratio: 1/1; filter: grayscale(100%) brightness(112.5%);}
#social li:nth-of-type(1) a {background: url('../sys/svg/social/vk.svg');}
#social li:nth-of-type(2) a {background: url('../sys/svg/social/instagram.svg');}
#social li:nth-of-type(3) a {background: url('../sys/svg/social/behance.svg');}
#social li:nth-of-type(4) a {background: url('../sys/svg/social/pinterest.svg');}
#social li:nth-of-type(5) a {background: url('../sys/svg/social/dribbble.svg');}
#social li:last-of-type {margin-right: initial;}
#social li:hover a {filter: initial;}
footer > p {grid-area: copyright;}

.meta {display: none;}

@media (prefers-color-scheme: dark) {html {color: #f0f0f0;}}
@media (orientation: portrait) and (min-width: 720px) {
	body {background-image: url('../index/fhd.webp');}
}
@media (orientation: landscape) and (min-width: 1280px) {
	body {background-image: url('../index/fhd.webp');}
	header {padding-left: 32.5%; padding-right: 32.5%;}
	footer {grid: 'img img img' 'copyright contact social'; grid-template-columns: 1fr 1fr 1fr;}
	p, a, li {font-size: 1.25rem;}
	a[rel=external]::after {width: 1rem; top: 0.0625rem;}
	#contact li:nth-of-type(2) a, #contact li:last-of-type {font-size: 1.125rem;}
	#contact li:nth-of-type(2) a::before {width: 1rem;}
	#contact li:nth-of-type(3) a::before {width: 1.25rem;}
	#social li {margin-right: 1.25rem;}
	#social li a {width: 1.25rem;}
}