CSS interno

// Add your code here

/* a minimalist set of CSS resets */

/* Modelo de caixa / Box model */
html {
  box-sizing: border-box;
  font-size: 16pt;
}

/* pseudo-elemento: é usado para alterar partes especificas do elemento */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Caracteristicas base da fonte */
body {
  margin: 1rem;
  font-family: "Arvo", serif;
  line-height: 1.5;
}

/* imagens e videos não vão além da sua largura real */
img,
video {
  height: auto;
  max-width: 100%;
}

/* alternativa
html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

h1,h2,h3,h4,h5,h6 {
  margin: 3em 0 1em;
}

p,ul,ol {
  margin-bottom: 2em;
  color: #1d1d1d;
  font-family: sans-serif;
}
*/

<!DOCTYPE html>
<!-- saved from url=(0023)http://www.example.com/ -->
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Example Domain</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
   <!-- <link rel="stylesheet" href="lib/style.css"> -->

    <style type="text/css">
      body {
        background-color: #f0f0f2;
        margin: 0;
        padding: 0;
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      div {
        font-size: 16pt;
        width: 600px;
        margin: 5em auto;
        padding: 3rem 3rem 7rem 3rem;
        background-color: #fff;
        border-radius: 1em;
      }

      a:active, a:hover {
        color: #5d8f38;
        text-decoration: none;
      }
      /* Pseudoclass: usado para definir um estado especial do elemento */

      .myButton {
        background-color: #1177d1;
        border-radius: 1vw;
        border: 0.3vw solid #104a8b;
        cursor: crosshair;
        color: #fff !important;
        font-family: Trebuchet MS;
        font-size: 18pt;
        font-weight: bold;
        padding: 10px 10%;
        text-decoration: none;
        float: right;
      }

      .myButton:hover {
        background-color: #009fe3;
      }
      .myButton:active {
        position: relative;
        top: 2px;
        left: 2px;
      }

      @media (max-width: 700px) {
        body {
          background-color: #fff;
        }
        div {
          width: auto;
          margin: 0 auto;
          border-radius: 0;
          padding: 1em;
        }
      }
      /* media query*/
    </style>
  </head>
  <body>
    <div>
      <h1>Example Domain</h1>
      <p>
        This domain is established to be used for illustrative examples in
        documents. You may use this domain in examples without prior
        coordination or asking for permission.
      </p>
      <p>
        <a href="http://www.iana.org/domains/example">More information...</a>
      </p>
      <a href="#" class="myButton">exemplo</a>
    </div>
  </body>
  <script src="script.js" type="text/javascript"></script>
</html>