@font-face {
  font-family: 'CocoSharpS-ExtraboldItalic';
  src: url('https://0x.beer/assets/CocoSharpS-ExtraboldItalic.woff') format('woff');
  font-display: swap;
}

a {
  text-decoration: none;
}

body {
  background-color: #050510;

  background-image:
    linear-gradient(rgba(0,200,255,0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.15) 1px, transparent 1px);

  background-size: 60px 60px;
  animation: gridmove 30s linear infinite;

  color: #fff;
  font-family:'CocoSharpS-ExtraboldItalic',Sans-Serif;
  font-size: 15px;
  letter-spacing: 2px;
}

/* animated grid movement */

@keyframes gridmove {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 60px 60px, 60px 60px;
  }
}

/* subtle moving glow */

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,150,255,0.15), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(150,0,255,0.15), transparent 40%);
  animation: floatGlow 20s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes floatGlow{
  from{transform:translateY(-40px)}
  to{transform:translateY(40px)}
}

/* wiggle animation */

@keyframes wiggle {
  0% { transform: translate(0,0) rotate(0deg); }
  33% { transform: translate(-4px,-4px) rotate(-0.6deg); }
  66% { transform: translate(4px,4px) rotate(0.6deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

.wiggle {
  border: 2px solid rgba(0,200,255,0.6);
  padding: 8px;
  border-radius: 8px;
  animation: wiggle 5s linear infinite, neonPulse 3s ease-in-out infinite;
  box-shadow:
    0 0 5px rgba(0,200,255,0.7),
    0 0 10px rgba(0,200,255,0.5),
    0 0 20px rgba(0,200,255,0.3);
}

@keyframes neonPulse{
  0%{
    box-shadow:
      0 0 5px rgba(0,200,255,0.5),
      0 0 10px rgba(0,200,255,0.4),
      0 0 20px rgba(0,200,255,0.2);
  }
  50%{
    box-shadow:
      0 0 10px rgba(0,200,255,0.9),
      0 0 20px rgba(0,200,255,0.7),
      0 0 40px rgba(0,200,255,0.5);
  }
  100%{
    box-shadow:
      0 0 5px rgba(0,200,255,0.5),
      0 0 10px rgba(0,200,255,0.4),
      0 0 20px rgba(0,200,255,0.2);
  }
}
.wiggle:hover {
  opacity:0.7;
}

/* fade in */

.fade-in{
  height:100%;
  animation: fadeAnim ease 2s forwards;
}

@keyframes fadeAnim{
  0% {
    opacity:0;
    transform: translate(0,0);
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}

/* divider */

hr {
  margin: 0.5em auto;
  border: 1px solid #ffffff10;
  height:0;
  width:85%;
  max-width:1100px;
}

/* images */

img{
  max-height:100%;
  max-width:100%;
}

.twitta{
  max-width:850px;
  margin:auto;
}

.bottom{
  position:fixed;
  bottom:0;
  right:0;
}

.foster{
  color:#ffffff20;
  transition:color 1s;
  font-size:11px;
}

.foster:hover{
  color:#00000090;
  background:#ffffff80;
}

/* profile picture */

.pfp {
  box-shadow:0 10px 10px rgb(0 0 0 / 8%);
  display:block;
  margin:auto;
  margin-top:10%;
  max-width:150px;
  border-radius:50%;
}

/* SUPERWIDE */

@media screen and (min-width:1921px){

.name{
  max-width:1100px;
  width:25%;
  margin:auto;
  font-size:50px;
  text-align:center;
  padding-top:9%;
  padding-bottom:100px;
}

.links{
  position:relative;
  white-space:nowrap;
  color:#ffffffcc;
  transition:all .3s;

  text-align:center;
  margin-top:27px;
  padding:15px;
  margin-bottom:25px;

  border:2px solid rgba(0,200,255,0.5);
  border-radius:6px;

  width:155px;
  display:inline-block;
  margin-left:5px;
  margin-right:5px;

  box-shadow:
    0 0 4px rgba(0,200,255,0.4),
    0 0 10px rgba(0,200,255,0.2);

  animation: linkPulse 4s ease-in-out infinite;
}

@keyframes linkPulse{
  0%{
    box-shadow:
      0 0 4px rgba(0,200,255,0.4),
      0 0 10px rgba(0,200,255,0.2);
  }

  50%{
    box-shadow:
      0 0 8px rgba(0,200,255,0.8),
      0 0 18px rgba(0,200,255,0.4);
  }

  100%{
    box-shadow:
      0 0 4px rgba(0,200,255,0.4),
      0 0 10px rgba(0,200,255,0.2);
  }
}

.linkbox{
  text-align:center;
  margin:auto;
  width:100%;
  padding-bottom:40px;
}

.large{
  width:240px;
  font-size:2em;
}

}

/* DESKTOP */

@media screen and (min-width:767px) and (max-width:1921px){

.name{
  width:30%;
  margin:auto;
  font-size:40px;
  text-align:center;
  padding-top:9%;
  padding-bottom:100px;
}

.links{
  position:relative;
  white-space:nowrap;
  color:#ffffffcc;
  transition:all .3s;

  text-align:center;
  margin-top:27px;
  padding:15px;
  margin-bottom:25px;

  border:2px solid rgba(0,200,255,0.5);
  border-radius:6px;

  width:155px;
  display:inline-block;
  margin-left:5px;
  margin-right:5px;

  box-shadow:
    0 0 4px rgba(0,200,255,0.4),
    0 0 10px rgba(0,200,255,0.2);

  animation: linkPulse 4s ease-in-out infinite;
}

@keyframes linkPulse{
  0%{
    box-shadow:
      0 0 4px rgba(0,200,255,0.4),
      0 0 10px rgba(0,200,255,0.2);
  }

  50%{
    box-shadow:
      0 0 8px rgba(0,200,255,0.8),
      0 0 18px rgba(0,200,255,0.4);
  }

  100%{
    box-shadow:
      0 0 4px rgba(0,200,255,0.4),
      0 0 10px rgba(0,200,255,0.2);
  }
}

.linkbox{
  text-align:center;
  margin:auto;
  width:100%;
  padding-bottom:40px;
}

.large{
  width:210px;
  font-size:1.8em;
}

}

/* MOBILE */

@media screen and (max-width:766px){

.name{
  width:80%;
  margin:auto;
  padding-top:50px;
  padding-bottom:40px;
  text-align:center;
}

.links{
  position:relative;
  white-space:nowrap;
  color:#ffffffcc;
  transition:all .3s;

  text-align:center;
  margin-top:27px;
  padding:15px;
  margin-bottom:25px;

  border:2px solid rgba(0,200,255,0.5);
  border-radius:6px;

  width:155px;
  display:inline-block;
  margin-left:5px;
  margin-right:5px;

  box-shadow:
    0 0 4px rgba(0,200,255,0.4),
    0 0 10px rgba(0,200,255,0.2);

  animation: linkPulse 4s ease-in-out infinite;
}

@keyframes linkPulse{
  0%{
    box-shadow:
      0 0 4px rgba(0,200,255,0.4),
      0 0 10px rgba(0,200,255,0.2);
  }

  50%{
    box-shadow:
      0 0 8px rgba(0,200,255,0.8),
      0 0 18px rgba(0,200,255,0.4);
  }

  100%{
    box-shadow:
      0 0 4px rgba(0,200,255,0.4),
      0 0 10px rgba(0,200,255,0.2);
  }
}

.linkbox{
  text-align:center;
  margin:auto;
  width:100%;
  padding-bottom:10px;
}

.large{
  width:140px;
  font-size:1.1em;
}

}

/* small phones */

@media screen and (max-width:450px){

.linkbox{
  display:flex;
  flex-direction:column;
  align-items:center;
}

}

/* link hover */

.links:hover,
.links:focus-visible{
  color:#000;
  background:#ffffffdd;

  transform:translateY(-3px);

  box-shadow:
    0 0 10px rgba(0,200,255,1),
    0 0 25px rgba(0,200,255,0.6);
}


/* bottom text */

.bottom-text{
  text-align:center;
  margin-top:150px;
  font-size:20px;
  font-weight:bold;
}

.bottom-text:hover{
  color:#00000090;
}

/* icon hover colors */

.links:hover > .fa-twitter{ color:#46c1f6cc; }
.links:hover > .fa-twitch{ color:#6441a5cc; }
.links:hover > .fa-instagram{ color:#e1306ccc; }
.links:hover > .fa-dice{ color:#ffb019cc; }
.links:hover > .fa-discord{ color:#7289dacc; }
.links:hover > .fa-snapchat{ color:#FFFC00cc; }
.links:hover > .fa-youtube{ color:#de463bcc; }
.links:hover > .fa-envelope{ color:#000000cc; }
.links:hover > .fa-amazon{ color:#FF9900cc; }
.links:hover > .fa-palette{ color:#2081E2cc; }

/* misc */

.large{
  padding:15px !important;
}

.following{
  opacity:0.8;
  transform:translate(-50%,-15%);
  position:absolute;
  display:inline;
  font-size:.7em;
}

.hexagon{
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}