@import url('reset.css');

@font-face {
  font-family: "Helvetica Now Display";`
  src: url("../assets/helvetica-now-display.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("../assets/helvetica-now-display-bold.otf");
  font-weight: bold;
  font-style: normal;
}

@media only screen {

  html {
    font-family: "Helvetica Now Display";
    font-weight: normal;
    font-size: 0.4vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    font-size: 4vw;
		background: black;
		color: white;
  }

  main {
    max-width: 172rem;
    padding: 15rem;
  }

  h1 {
	font-family: "Arial";
	font-size: 7.5vw;
    margin-top: 10rem;
    margin-bottom: 0rem;
    opacity: 1.0;
  }

  h2 {
	font-size: 5vw;
    margin-top: 5rem;
    margin-bottom: 5rem;
    opacity: 0.5;
  }

  p {
    display: inline-block;
    line-height: 150%;
    margin-bottom: 10rem;
    opacity: 1.0;
  }

  p:last-child {
	margin-bottom: 0rem;
    font-size: 5vw;
  }

button {
	display: inline-block;
	outline: 0;
	cursor: pointer;
	border: none;
	padding: 0 56px;
	height: 45px;
	line-height: 45px;
	border-radius: 7px;
	background-color: #0070f3;
	color: white;
	font-weight: 400;
	font-size: 20px;
	font-family: inherit;
	box-shadow: 0 4px 14px 0 rgb(0 118 255 / 39%);
	margin-bottom: 5rem;
	transition: background 0.2s ease,color 0.2s ease,box-shadow 0.2s ease;
	:hover{
		background: rgba(0,118,255,0.9);
	box-shadow: 0 6px 20px rgb(0 118 255 / 23%);
	}

}