:root{--content-text-color:#fff}

*{box-sizing:border-box;margin:0;padding:0}

body {
background-color:#000;
width:100vw;
min-height:100vh;
padding:20px;
overflow:hidden
}

a {text-decoration: none !important; color: inherit}
a:hover {color:grey !important}
a:visited {color:white}

.align-content-center-vertical {
flex-direction:column;
justify-content:center;
display:flex
}

.text-align-center {
text-align:center;
text-decoration: none;
}

.text-align-center h1 {
border: 1px solid white;
padding: 10px 20px;
display:inline-block;
}

.cover {
z-index:-1;
position:absolute;
top:0;
bottom:0;
left:0;
right:0
}

.cover img {
object-fit:cover;
width:100vw;
height:100vh
}

.logotipo {
position:absolute;
top:20px;
left:20px
}

.logotipo a { 
display:inline-block
}

.content {
color:var(--content-text-color);
font-family:"Mozilla Headline",Helvetica,Arial,sans-serif
}

.content:before {
content:"";
background-color:rgba(0,0,0,.3);
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
left:0
}

.content h1 {
margin-bottom:.25em;
word-break:break-word;
margin-left:33px;
margin-right:33px;
font-size:39px;
font-weight:100;
line-height:1.25em;
display:inline-block
}

.content p {
font-size:calc(6px + 1vw);
font-weight:300;
line-height:1.4em;
display:inline-block
}

.content
.text-align-center{z-index:1}

.footer {
width:calc(100% - 40px);
position:absolute;
bottom:44px;
}

@media screen and (max-width:430px){
.footer p {font-size:18px}
}

@media screen and (max-width:1024px){
.footer p {font-size:22px}
}

@media screen and (max-width:768px){
.logotipo {left:47%}
.content h1 {font-size:28px}
.content p {font-size:14px}
.content .line-break{display:block}
.footer p {font-size:18px}
}