@import url("https://fonts.googleapis.com/css?family=Bebas+Neue");
@import url("https://fonts.googleapis.com/css?family=Roboto");
body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #3399ff;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: "Bebas Neue", cursive;
}
a {
  position: absolute;
  bottom: 3vh;
  left: 4vh;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 1.2em;
  font-family: sans-serif;
  transition: color 0.3s;
}
@media only screen and (max-width: 768px) {
  a {
    font-size: 1em;
  }
}
a:hover,
a:focus {
  color: #fff;
}
.logo {
    display: flex;
    align-items: flex-start;
    top: 10px;
    left: 10px;
    position: absolute;
}
.logo-text {
	color: #fff;
	font-size: 2em;
	position: relative;
	top: -23px;
	left: 10px;
}
.desc-text {
	color: #fff;
	text-align: center;
	font-family: "Roboto", cursive;
}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  color: white;
  text-align: right;
}
.btn {
  font-size: 4rem;
  text-shadow: 3px 3px 5px #714e33;
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s;
}
.btn:hover,
.btn:focus {
  transform: scale(0.9);
}
.beer-glass {
  position: relative;
  margin-bottom: 40px;
}
@media only screen and (max-width: 1920px) {
  .beer-glass {
    transform: scale(0.7);
    margin-bottom: -30px;
  }
}
.beer-glass .glass {
  width: 330px;
  height: 420px;
  background: #ece2ca;
  border-radius: 35px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  position: relative;
}
.beer-glass .glass:before {
  content: "";
  height: 120px;
  width: 65px;
  background: #3399ff;
  border: 25px solid #ece2ca;
  position: absolute;
  right: -90px;
  top: 100px;
  border-radius: 30px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  z-index: 0;
}
.beer-glass .glass:after {
  content: "";
  position: absolute;
  bottom: -25px;
  width: 315px;
  height: 25px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 45%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 0;
}
.beer-glass .glass .bump {
  width: 45px;
  height: 190px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.beer-glass .glass .bump:nth-of-type(1) {
  transform: translate(50px, -90px);
}
.beer-glass .glass .bump:nth-of-type(2) {
  transform: translate(140px, -90px);
}
.beer-glass .glass .bump:nth-of-type(3) {
  transform: translate(235px, -90px);
}
.beer-glass .beer {
  width: 280px;
  height: 340px;
  min-height: 30px;
  max-height: 340px;
  background: #FF9C08;
  border-top: 30px solid #fff;
  border-radius: 30px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  position: absolute;
  bottom: 20px;
  left: 25px;
  transition: height 1s ease-in-out;
}
.beer-glass .beer:before {
  content: "";
  width: 100%;
  height: 25px;
  background: #f9c359;
  position: absolute;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  bottom: 0;
}
.beer-glass .beer .foam {
  background: #fff;
  border-radius: 60%;
  top: 0;
  position: absolute;
}
.beer-glass .beer .foam:nth-of-type(1) {
  width: 65px;
  height: 60px;
  transform: translate(-5px, -45px);
  animation: foam1 2.5s ease infinite;
  animation-direction: alternate-reverse;
}
@keyframes foam1 {
  from {
    transform: scale(1.25) translate(-5px, -45px);
  }
  to {
    transform: scale(1.3) translate(-5px, -45px);
  }
}
.beer-glass .beer .foam:nth-of-type(2) {
  width: 75px;
  height: 75px;
  transform: translate(35px, -60px);
  animation: foam2 2s ease infinite;
  animation-direction: alternate-reverse;
}
@keyframes foam2 {
  from {
    transform: scale(1.3) translate(35px, -60px);
  }
  to {
    transform: scale(1.25) translate(35px, -60px);
  }
}
.beer-glass .beer .foam:nth-of-type(3) {
  width: 100px;
  height: 90px;
  transform: translate(75px, -65px);
  animation: foam3 2s ease infinite;
  animation-direction: alternate-reverse;
}
@keyframes foam3 {
  from {
    transform: scale(1.3) translate(75px, -55px);
  }
  to {
    transform: scale(1.25) translate(75px, -60px);
  }
}
.beer-glass .beer .foam:nth-of-type(4) {
  width: 80px;
  height: 80px;
  transform: translate(150px, -65px);
  animation: foam4 2s ease infinite;
  animation-direction: alternate-reverse;
}
@keyframes foam4 {
  from {
    transform: scale(1.25) translate(130px, -65px);
  }
  to {
    transform: scale(1.3) translate(125px, -65px);
  }
}
.beer-glass .beer .foam:nth-of-type(5) {
  width: 100px;
  height: 95px;
  transform: translate(190px, -60px);
  animation: foam5 2s ease infinite;
  animation-direction: alternate-reverse;
}
@keyframes foam5 {
  from {
    transform: scale(1.2) translate(160px, -70px);
  }
  to {
    transform: scale(1.15) translate(170px, -70px);
  }
}