/* Reset */

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

*::after, *::before {
    box-sizing: border-box;
}
  
html, body, p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

html, body {
    font-family: 'Roboto', sans-serif;
}

body {
    font-size: 16px;
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}

body.blocked {
    overflow: hidden;
}

ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Main */

a {
    text-decoration: underline;
}

.container {
    text-align:center;
    max-width:800px;
    margin:0 auto;
    height: 100vh;
    max-height: 100vh;
}

.header {
    font-size:100%;
    height: 85px;
    max-height: 85px;
}

.content {
    font-size:90%;
    height: 70vh;
    max-height: 70vh;
    max-height: calc(100vh - 85px - 30px);
    height: calc(100vh - 85px - 30px);
    overflow: hidden;
}

.info {
    height: 50px;
    max-height: 50px;
}

.context {
    height: 65vh;
    max-height: 65vh;
    max-height: calc(100vh - 85px - 50px - 30px);
    height: calc(100vh - 85px - 50px - 30px);
    max-width:350px;
    margin:0 auto;
}

.footer {
    font-size:70%;
    height: 30px;
    max-height: 30px;
}

.copyright {
    padding-top: 10px;
}