@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

body {
  padding: 9px 60px 63px;
  font-family: Roboto, sans-serif;
  background-image: url("../img/bg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

h1,h2,h3,h4,p {
  text-align: center;
  text-shadow: #333333 1.5px 2px 1.5px, #333333 -1px -1.5px 1.5px, #666666 2px 2px 5px, #777777 4px 4px 10px;
}

h1 {
  margin: 63px 0 36px;
  padding: 12px 33px;
  font-size: 110px;
  font-weight: 700;
  color: #00008b;
}

h2 {
  margin: 30px 0 33px;
  font-size: 99px;
  font-weight: 500;
  color: #111111;
}

h3 {
  margin: 33px 0 12px;
  font-size: 96px;
  font-weight: 500;
  color: #ff0000;
}

h4 {
  margin: 12px 0 42px;
  font-size: 51px;
  font-weight: 400;
  color: #ff0000;
}

p {
  margin: 12px 0 18px;
  font-size: 39px;
  font-weight: 500;
  color: #eeeeee;
}

a {
  color: #00008b;
  text-decoration: none;
  padding: 6px 9px;
  text-shadow: #eeeeee 1.5px 1px 0.5px, #dddddd -1px -1.5px 1px, #aaaaaa 2px 2px 5px, #cccccc 3px 3px 15px;
}

a:hover {
  color: #dddddd;
  background-color: #00008b;
  text-decoration: underline;
  text-shadow: #111111 1px 1px, #111111 -1px -1px, #333333 2px 2px 3px, #555555 3px 3px 25px;
}

.alt-1 {
  color: #0000ff;
}

.alt-2 {
  color: #ff0000;
}

@media screen and (max-width: 600px) {
  body {
    padding: 9px 9px 18px;
  }

  h1, h2, h3, h4, p {
    text-shadow: #333333 0.5px .5px 1.5px, #222222 -0.5px -0.5px 2.5px, #555555 1px 1px 2px, #777777 3px 3px 7px;
  }

  h1 {
    margin: 15px 0 27px;
    padding: 6px 0;
    font-size: 39px;
  }

  h2 {
    margin: 12px 0 9px;
    font-size: 27px;
  }

  h3 {
    margin: 12px 0 33px;
    font-size: 21px;
  }

  h4 {
    margin: 6px 0 42px;
    font-size: 24px;
  }

  p {
    margin: 6px 0 15px;
    font-size: 22px;
  }
}