@font-face{
	font-family: 'Top';
	src: url('Top Show.otf') format('opentype'); }
@font-face{
  font-family: 'astria';
  src: url('Champagne & Limousines Bold.ttf');}
   
  
  p{font-family:'top';
    font-size: 80px;} 
    
body{background: linear-gradient(45deg, black, #3a4b8a,black,#3a4b8a);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    font-family: "astria";}
    
    @keyframes gradient {
        0%{background-position: 0% 50%;}
        50%{background-position: 100% 50%;}
        100%{background-position: 0% 50%;}}

        /* From Uiverse.io by mi-series */ 
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.form_area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #bfbca9;
  height: auto;
  width: auto;
  border: 2px solid #264143;
  border-radius: 20px;
  box-shadow: 3px 4px 0px 1px #0573e9;
}

.title {
  color: #264143;
  font-weight: 900;
  font-size: 1.5em;
  margin-top: 20px;
}

.sub_title {
  font-weight: 600;
  margin: 5px 0;
}

.form_group {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  margin: 10px;
}

.form_style {
  outline: none;
  border: 2px solid #264143;
  box-shadow: 3px 4px 0px 1px #0573e9;
  width: 290px;
  padding: 12px 10px;
  border-radius: 4px;
  font-size: 15px;
}

.form_style:focus, .btn:focus {
  transform: translateY(4px);
  box-shadow: 1px 2px 0px 0px #E99F4C;
}

.btn {
  padding: 15px;
  margin: 25px 0px;
  width: 290px;
  font-size: 15px;
  background: #DE5499;
  border-radius: 10px;
  font-weight: 800;
  box-shadow: 3px 3px 0px 0px #010101;
}

.btn:hover {
  opacity: .9;
}

.link {
  font-weight: 800;
  color: #000000;
  padding: 5px;
}