<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
  <style>
    body {
      -ms-overflow-style: scrollbar;
      overflow-y: scroll;
      overscroll-behavior-y: none;
    }
    .error-container {
      background-color: #FFF;
      max-width: 600px;
      margin: 0 auto;
      padding: 10%;
      font-family: sans-serif;
      font-size: 16px;
      text-align: center;
    }
    .icon {
      width: 80px;
    }
    .error-link a {
      color: #337ab7;
      text-decoration: none;
      line-height: 24px;
    }
    .error-link a:hover {
      color: #0588b6;
    }
    h1 {
      color: #0d0d0d;
    }
    .microsoft-info {
      display: block;
      font-size: 14px;
      line-height: 20px;
      color: #b2b2b2;
    }
  </style>
</head>
<body>
  <div class="error-container">
    <img class="icon" src="./assets/img/cogs-solid.svg" alt="gear icon">
    <h1><?php echo $text_compatible ?></h1>
    <span>
      <?php echo $text_change_browser ?>
    </span>
    <p class="error-link">
      <?php echo $text_suggestion ?>
      <a href="https://www.google.pt/intl/pt-PT/chrome/"><?php echo $text_chrome; ?></a>,
      <a href="https://www.microsoft.com/pt-br/edge?r=1"><?php echo $text_edge; ?></a>,
      <a href="https://www.mozilla.org/pt-BR/firefox/new/"><?php echo $text_firefox; ?></a>.
    </p>
    <span class="microsoft-info"><?php echo $text_microsoft_info; ?></span>
  </div>
</body>
</html>