@font-face {
  font-family: "Roboto";
  src: url(/assets/fonts/Roboto-Regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/fonts/Roboto-Medium.ttf);
  font-weight: 500;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/fonts/Roboto-Bold.ttf);
  font-weight: 600;
}

* {
  font-family: "Roboto";
  -webkit-tap-highlight-color: transparent;
  color: #51565c;
  outline: none;
}

body {
  background-color: #D5DBE1;
  margin: 30px;
  color: #092040;
}

main {
  display: flex;
  justify-content: center;
}

article {
  width: 90%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

header {
  display: flex;
  flex-direction: column;
}

.separator {
  width: 100%;
  border: 1px solid #99aaba;
}

h1 {
  margin: 8px 0px 5px 0px;
  color: #065AD8;
}

h2 {
  margin: 0px 0px 15px 0px;
  color: #35383b;
}

ol,
ul {
  padding-left: 22px;
}

.info {
  color: #666565;
  display: flex;
  font-size: 15px;
  padding: 5px 0px;
  gap: 10px;
}

@media (max-width: 740px) {
  body {
    margin: 20px;
  }

  article {
    width: 100%;
    gap: 10px;
  }

  p {
    margin: 10px 0px;
  }
}