@font-face {
  font-family: 'Fira Sans Semibold';
  src: url('type/firasans-semibold-webfont.woff2') format('woff2'),
       url('type/firasans-semibold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans Regular';
  src: url('type/opensans-regular-webfont.woff2') format('woff2'),
       url('type/opensans-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  --color-primary: orangered;
  --color-secondary: midnightblue;
}

body {
  margin: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0.8) 100%),
  url("/svg/pattern.svg");
  font-family: 'Open Sans Regular', sans-serif;
  display: flex;
  justify-content: center;
  height: 100vh;
}

main {
  margin-top: 17vh;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.logo-tri {
  position: absolute;
  float: left;
  top: -150px;
  left: -100px;
  z-index: -1;
}

.wrapper {  
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: #ddd 0 0 6rem;
  padding: 1.5rem 3rem;
}

.separator {
  margin-top: 3rem;
  height: 1px;
  background-color: var(--color-primary);
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fira Sans Semibold', sans-serif;  
  font-weight: bolder;
}

h2 {
  font-size: 20px;
  margin-top: 3rem;
}