*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  height: 100%;
}

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

@font-face {
  font-family: SanFrancisco-M;
  src: url('../fonts/SF-Pro-Display-Medium.otf');
}

@font-face {
  font-family: SanFrancisco-T;
  src: url('../fonts/SF-Pro-Display-Thin.otf');
}

@font-face {
  font-family: SanFrancisco-L;
  src: url('../fonts/SF-Pro-Display-Light.otf');
}

@font-face {
  font-family: SanFrancisco-K;
  src: url('../fonts/SF-Pro-Display-Semibold.otf');
}

body{
  font-family: 'SanFrancisco', sans-serif;
  max-width: 100%;
  overflow: hidden;
}

h1{
  position: relative;
  font-family: SanFrancisco-L;
  font-size: 20px;
  top: 50%;
  left: 50%;
  text-align: center;
  width: 500px;
  margin-left: -250px;
  margin-top: -52.5px;
  height: auto;
  z-index: 100;
}

h1 b{
  font-family: SanFrancisco-K;
  z-index: 100;
}

h2{
  position: relative;
  font-family: SanFrancisco-T;
  font-size: 15px;
  top: 50%;
  left: 50%;
  text-align: center;
  width: 500px;
  margin-left: -250px;
  margin-top: 12.5px;
  height: auto;
  z-index: 100;
}

#opening{
  position: absolute;
  width: auto;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.45;
  z-index: 1;
}

#p_com{
  position: absolute;
  width: 200px;
  height: auto;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  transition: all 0.4s ease-in-out;
  z-index: 100;
}

#p_com:hover{
  width: 205px;
  opacity: 1;
}

.notified_message{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 45px;
  border-radius: 14px;
  opacity: 1;
  z-index: 100;
  background: rgb(31,165,255);
  background: linear-gradient(129deg, rgba(31,165,255,1) 0%, rgba(59,121,246,1) 100%);
}

.p_1{
  margin-top: 80px;
}

.p_2{
  margin-top: 145px;
}

.p_3{
  margin-top: 210px;
}

.notified_message img{
  position: absolute;
  width: 25px;
  height: auto;
  top: 50%;
  left: 25px;
  transform: translate(-50%,-50%);
}

.notified_message p{
  position: absolute;
  width: 300px;
  height: auto;
  top: 50%;
  left: 112px;
  transform: translate(-50%,-50%);
  font-size: 20px;
  font-family: SanFrancisco-K;
  text-align: center;
  color: white;
}