/* styles.css */

body {
    font-family: Verdana, Arial, sans-serif;
    background-color: black;
    margin: 0;
    padding: 20px;
    color : #f0f0f0;
}

h2{
	display: block;
	width: 40%;
	margin: 0% auto;
    font-size: 1vw;
}

img{
    display: block;
    width: 10%;
    padding: 1%;
    margin: 1% auto;
    background-color: #f0f0f0;
    border-radius: 2em;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

form{
    display: block;
    width: 40%;
    margin: 1% auto;
    text-align: center;
}

label{
    display: block;
    width: 65%;
    margin: 0% auto;
    font-size: 0.8vw;
    text-align: start;
}

input{
    display: block;
    width: 65%;
    height: 4vh;
    margin: 0% auto;
    border-radius: 0.4em;
    border-style: none;
}

p{
    display: block;
    width: 70%;
    font-size: 1vw;
    margin: 0% auto;
    border-radius: 0.4em;
    border-style: none;
    text-shadow: #FC0 1px 0 10px;
    text-align: center;
}

a{
	display: block;
	width: 30%;
	margin: 1% auto;
	font-family: Verdana;
	font-size: 1vw;
	color: white;
	text-decoration: none;
	text-align: center;
}

/* CSS */
.button-86 {
  all: unset;
  width: 100px;
  height: 30px;
  font-size: 16px;
  background: transparent;
  border: none;
  position: relative;
  color: #f0f0f0;
  cursor: pointer;
  z-index: 1;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-86::after,
.button-86::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -99999;
  transition: all .4s;
}

.button-86::before {
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  background: #28282d;
  border-radius: 10px;
}

.button-86::after {
  transform: translate(10px, 10px);
  width: 35px;
  height: 35px;
  background: #ffffff15;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 50px;
}

.button-86:hover::before {
  transform: translate(5%, 20%);
  width: 110%;
  height: 110%;
}

.button-86:hover::after {
  border-radius: 10px;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
}

.button-86:active::after {
  transition: 0s;
  transform: translate(0, 5%);
}