@import url("https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong");


:root {
  --courier: font-family: 'Courier Prime', monospace;
  --sideborder: 500px;
  --sidepad: 20px;
  --btnwidth: 90px;
  --cardwidth: 300px;
  --hoverwidth: 500px;
  --fsize1: 12px;
  --hoveredtxtsise: 15px;
  --discardwidth: 520px;
}


@media screen and (max-width:1600px) {
  :root {
    --sideborder: 210px
  }
}
@media screen and (max-width:1234px) {
  :root {
    --sideborder: 20px
  }
}

@media screen and (max-width:600px) {
  :root {
    --btnwidth: 60px;
    --cardwidth: 250px;
    --hoverwidth: 300px;
    --fsize1: 9px;
    --hoveredtxtsise: 12px;
  }
}

@media screen and (max-width:483px) {
  :root {
    --discardwidth: 300px;
  }
}

@media screen and (max-width:395px) {
  :root {
    --discardwidth: 210px;
  }
}

.header1mainintro {
  margin-bottom: 0px;
}

html {
  scroll-behavior: smooth;
}

.psuedoname {
  display: none;
}

.intro {
  text-align: center;
  font-family: 'Roboto Mono', monospace;

}

.socialbuttons {
  margin-right: var(--sidepad);
  margin-left: var(--sidepad);
  border-right: var(--sidepad);
  border-left: var(--sidepad);
}

.intropfp {
  padding-top: 34px;
  transition: 1s;
}

.intropfp:hover {
  width: 250px;
}


body {
  background: rgb(2,0,36);
  background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(23,23,94,1) 0%, rgba(0,7,69,1) 100%);
}

.socialicon:visited {
  text-decoration: none; 
  color: rgb(0, 82, 158); 
}

.socialicon:hover { text-decoration: none; color:rgb(0, 147, 158); }
.socialicon:focus { text-decoration: none; color:rgb(0, 82, 158); }
.socialicon:active { text-decoration: none; color:teal; }

.card {
  padding-left: 10px;
  padding-right: 10px;
  border: 4px solid #000000;
  margin-left: var(--sideborder);
  margin-right: var(--sideborder);
  border-radius: 25px;
  background-color: rgb(54, 75, 128);
  margin-top: 30px;
  text-align: center;
  font-family: 'Roboto Mono', monospace;
  margin-bottom: 20px;
  padding-bottom: 10px;
  transition: 1s;
}
.card:hover {
  background-color: rgb(54, 82, 153);
}


.button {
  width: var(--btnwidth);
  font-size: var(--fsize1);
  font-weight: bold;
  height: 50px;
  background-color: rgb(54, 75, 128);
  border-radius: 13px;
  border: 4px solid #000000;
  margin-right: 10px;
  transition: 0.3s;
}

.button:hover {
  background-color: rgb(39, 82, 192);
  width: 100;
  height: 60;
  font-size: var(--hoveredtxtsise);
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 15px;
}

.showcaserow img {
  width: var(--cardwidth);
  border-radius: 20px;
  transition: 1s;
}

.showcaserow img:hover {
  width: var(--hoverwidth);
}
.showcaserow {
  padding-bottom: 10px;
}

a:visited {
  text-decoration: none;
  color: #000000;
}

.diccord {
  padding-top: 8px;
}

.discard {
  width: var(--discardwidth);
  border-radius: 20px;
}