* { margin: 0; padding: 0; text-align: center; width: 100%; height: 100%; font-family: 'Roboto', sans-serif;}
body { /*background-image: url(https://via.placeholder.com/3000x3000.png?text=BACKGROUND)*/;display: table;background-size: cover;background-position: center;background-repeat: no-repeat;background-color: #3285fb; color: #FFF;}
main { display: flex; width: 100%; height: 100%; margin: 0 auto; align-items: center; justify-content: center; flex-direction: row; flex-wrap: wrap; }
main section { width: 70%; height: auto; margin: 0 auto; }
main section figure { height: auto; }
main section figure img { height: 230px; width: 50%; object-fit: contain; }
main section div.text {height: auto;width: auto;}
main section div.text nav {display: inline-block;margin: 30px auto 0;text-align: center;width: auto;height: auto;}
main section div.text nav a {display: inline-flex;margin: 0 8px;color: #FFF;text-decoration: none;font-size: 20px;border-radius: 100%;width: 30px;height: 30px;line-height: 30px;text-align: center;padding: 5px;}
main section div.text nav a i {line-height: 30px;}
main section div.text nav a:hover{background-color:#333;}
main section div.text h1, main section div.text h2 {color: #FFF;font-size: 32px;margin: 20px 0 0;}


@media only screen and (max-width: 600px) {
  main section div.text h1, main section div.text h2 {
    color: #FFF;
    font-size: 24px;
    margin: 15px 0 0;
  }
  main section figure img {
    height: 230px;
    width: 100%;
    object-fit: contain;
  }
  main section div.text nav a {
    display: inline-flex;
    margin: 0 8px;
    color: #FFF;
    text-decoration: none;
    font-size: 30px;
    border-radius: 100%;
    width: 30px;
    height: 40px;
    line-height: 30px;
    text-align: center;
    padding: 5px;
  }
}