*{font-family: sans-serif;box-sizing: border-box;padding: 0;margin: 0;}

body {width: 100%;min-height: 100vh;padding: 5px 0 20px; background-image: linear-gradient(to right,rgb(26 31 37 / 80%) 50%, rgb(26 31 37 / 28%)), url(background.jpg); background-size: cover;background-repeat: no-repeat;background-position: center right;display: flex;flex-direction: column;justify-content: center;}

main {width: 70%;min-height: 55vh;margin: auto;display: grid;grid-template: 70% 30% / 100%;color: rgb(220,220,220);font-size: 24px; margin-bottom: 40vh;}

main > * {display: block;width: 100%;}


h1, h2 {display: block;max-width: 100%; font-weight: 300;}
h1 {letter-spacing: -0,5px; font-size: 1.5rem;}
h2 {font-style: italic; letter-spacing: 0,5px; font-size: 4rem;}
.desc {width: 50%; padding: 30px 0 30px 0;}

a {text-decoration: none;color: rgb(222 222 222); margin-left: 25px; background-color: rgb(202 149 53); padding: 1% 4%; border-radius: 30px; font-weight: 700; letter-spacing: -1px;}
a:hover {background-color: rgb(224 175 85);}

@media(max-width: 1200px) {
main {width: 85%;font-size: 18px;}
.moto {font-size: 2.5rem;}	
}

@media(max-width: 700px) {
a {padding: 2% 8%; font-weight: 400;}
}

@media(max-width: 700px) {
.desc {width: 90%;}
.moto {font-size: 2rem;}
h1 {font-size: 0.8rem;}
}


@media(max-width: 550px) {
p {font-size: 0.8em;}
.moto {font-size: 1.5rem;}
a{margin-left: 3px;}
}

@media(max-width: 550px) {
p {font-size: 0.6sem;}
}