img {
  aspect-ratio: attr(width) / attr(height);
}

body {
  padding-top: 30vh;
  text-align: center;
  font-family: sans-serif;
  font-size: 13px;
  background-color: black;
}

.logo {
  width: 80vw;
  max-width: 575px; 
  margin-bottom: 30px;
  margin-left: 2px;
}

.button {
    background: #00b9e1;
    background: linear-gradient(to left, #00b9e1 50%, #44d5f5 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
    color: #fff;
    font-family: Sans-serif;
    font-size: 13px;
    text-align: center;
    transition: all 1s ease 0s;
    margin-bottom: 10px;
    padding: 15px 25px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-decoration: none;
    display: table;
}
.button:hover, .button2:hover {
	background-position: left;

}

.button2 {
	background: #00e1a4;
    background: linear-gradient(to left, #00e1a4 50%, #23fac1 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
    color: #fff;
    font-family: Sans-serif;
    font-size: 13px;
    text-align: center;
    transition: all 1s ease 0s;
    padding: 15px 25px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-decoration: none;
    display: table;	
}