<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

<!-- this won't show up in the browser-->

<!-- image tag goes here -->
<!-- <div></div> 
learn about web pixels
-->
<main>
  <section class="card">
    <img src="https://images.unsplash.com/photo-1553457951-dee37dd5025d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3578&q=80" alt="this is a landscapre of north carolina">
 
    <h1>Elijah Laskody</h1>

    <p>I live in Chapel Hill, NC - where the weather is hot and blue skies are plentiful.</p>

    <!-- links go here -->
    <div class="links">
    <a href="https://www.linkedin.com/in/elijahlaskody/" target="_blank">&#128172;</a>

    <a href="https://buttonmaker.xyz/blog/" target="_blank">
      &#128302;</a>

    <a href="https://twitter.com/buttonmaker_xyz" target="_blank">
      &#129525;</a>
    </div>
  </section>
</main>

/* Cascading Style Sheets */

/* learn about web pixels
div {
  width: 10px;
  height: 10px;
  background-color: red;
}
*/

body{
  margin: 0;
}

main {
  background-color: #D7E3FA;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 400px;
  background-color: #FFFFFF;
  padding: 32px;
  /* border: 1px solid red; */
  border-radius: 20px;
  text-align: center;

}

h1 {
  color: #1B212C;
  font-size: 32px;
  font-family: 'Lato', sans-serif;
  margin-bottom: 0;
}

p {
  color: #5E636B;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
  margin-top: 8px;
}

img {
  width: 140px;
  height: 140px;
  border-radius: 9999px;
}

.links {
  
}

a {
  margin: 8px;
}