body{
  min-height: 100vh;
  margin:0;
  padding:0;
  font-family: 'DINPro';
  font-weight: 400;
  font-size: 20px;
  color:#ffffff;
  background:#fd2ac0;
}

header{
  position:relative;
  padding-top:90px;
  margin-bottom: 150px;
}

main{
  position:relative;
  padding: 0 1.5rem;
  width:100%;
  max-width: 1024px;
  margin:0px auto;
  box-sizing:border-box;
  padding-bottom: 90px;
}

img{width:100%;height:auto;}
a, a:link, a:visited, a:active{color:#ffffff;text-decoration:none;}
a:hover{text-decoration:underline;;}
.centered{text-align:center;}
strong, .strong{font-weight: 600;}
small, .small{font-size:small;}
.pink{color:#fd2ac0;}

img.claim{
  width:400px;
  max-width:100%;
  height:auto;
  display:inline-block;
}

h1{font-weight:400;}

.bg{
  background-image: url('../images/bg.jpg');
  height: 100%;
  width: 100%;
  position: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

.trippin{
  width:100%;
  max-width:1280px;
  position:fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.logo{
  margin:0px auto;
  display:block;
}

.logo1{
  max-width:64px;
  margin-bottom:1rem;
}

.logo2{
  max-width:128px;
}

#mobile-message{
  display: none;
  font-size:small;
}

#actions{
  display:block;
}

#actions.hidden{
  display:none;
}

#get-metamask{
  display:none;
}

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

.button, .button:link, .button:visited, .button:active{
  text-decoration:none;
  color:#ffffff;
  display: inline-block;
  border-radius:100px;
  width: auto;
  border: 1px solid #ffffff;
  background-color: transparent;
  padding: .75rem 1.5rem;
  margin-bottom:1rem;
  transition: color .5s, background-color .5s;
  cursor:pointer;
}

.button:hover{
  color:#03071c;
  background-color: #ffffff;
  text-decoration: none;
}

.status{
  font-size:small;
}

#supply{
  display:none;
}

.loading:after{
  display: inline-block;
  -webkit-animation: dots steps(1,end) 1s infinite;
  animation: dots steps(1,end) 1s infinite;
  content: '...';
}

@media only screen and (min-width: 512px) {
  header{
    padding-top:200px;
    margin-bottom: 100px;
  }
  main{
    padding-bottom: 150px;
  }
  .logo1{
    max-width:128px;
    margin-bottom:2rem;
  }
  .logo2{
    max-width:256px;
  }
}

@-webkit-keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}