@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

html
{
 font-family: 'Roboto', sans-serif;
 background: #fff url('img/bg4.jpg') center/cover fixed no-repeat;
 color: #313131;
}

h2
{
 font-size: 1.5em;
}

h2, h3, h4
{
 font-family: 'Roboto Slab', sans-serif;
 font-weight: 500;
 letter-spacing: 1.5px;
 text-transform: uppercase;
}

p
{
 font-weight: 300;
 letter-spacing: 1px;
}

a:hover
{
 text-decoration: none;
}

p.infosummary
{
 margin: 2em 0 1em 0;
 font-weight: 500;
 text-transform: uppercase;
}

body
{
 margin: 0;
 padding: 0;
 font-size: calc(0.7em + 0.5vw);
 border-top: 15px solid #0d5778;
}

header
{
 margin: 0 auto;
 width: 65%;
 /** display: grid;
 grid-template-columns: 30% 70%; **/
}

header h1
{
 margin: 0.5em auto 0 auto;
 text-align: center;
}

header h1 img
{
 width: 50%;
}

header h2
{
 text-align: center;
 margin: 1em 0 1.5em 0;
}

header p
{
 text-align: left;
}

header p#eta
{
 text-align: center;
 margin: 2em 0 0 0;
}

main
{
 margin: 0 auto;
}

div#intro
{
 margin: 3em 0;
 padding: 2em 5em;
 font-size: 1.2em;
 background-color: #4990af;
 background: #fff url('img/bg6.jpg') center/cover fixed no-repeat;
 color: #e6e6e6;
 box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

div#intro h2
{
 text-align: center;
}

div#intro h3
{
 margin: 2em 0 1em 0;
 border-bottom: 1px dotted #fff;
}

div#intro p
{
 font-size: 0.8em;
}

div#staff
{
 font-size: 1em;
 margin: 3em 0 0 0;
 padding: 2em 5em;
 background-color: #90aebc;
 color: #333;
}

div#staff h3
{
 font-size: 1.3em;
 border-bottom: 1px dotted #333;
}

footer
{
 text-align: center;
 background: #efefef url('img/bg3.jpg') bottom/cover fixed no-repeat;
 padding: 4em 0 3em 0;
}

footer p#motto
{
 margin: 3em 0 1em 0;
 font-style: italic;
 color: #616161;
 font-size: 0.8em;
}

@media all and (max-width: 480px)
{
 html
 {
  background: #fff url('img/bg4.jpg') center/cover no-repeat;
 }
 header
 {
  width: 75%;
 }
 header h1 img
 {
  width: 75%;
 }
 div#intro
 {
  padding: 2em 3em;
  background: #fff url('img/bg6.jpg') center/cover no-repeat;
 }
 div#staff
 {
  padding: 2em 2em;
 }
 footer
 {
  background: #efefef url('img/bg3.jpg') bottom/cover no-repeat;
 }
}