/* STEAM THEME */

/*
Steam Color Palette
#171a21
#66c0f4
#1b2838
#2a475e
#c7d5e0
*/
html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

header {
  width: 100%;
  height: 100%;
}

body {
  background-image: url("src/background_image.jpg");
  background-attachment: fixed;
  background-size: cover;
  color: #ffffff;
  font-family: monospace;
  font-size: 15px;
  margin: auto;
  width: 100%;
  height: 100%;
  display: table;
}

footer {
  background-color: rgb(0, 0, 0);
  height: 100px;
  width: 100%;
  margin: 20px auto auto auto;
  display: flex;
  border-top: 2px solid white;
}

#heading-text {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-size: 75px;
  letter-spacing: 15px;
  font-weight: bolder;
}

#profile-name {
  font-family: Arial, Helvetica, sans-serif;
  width: 100px;
  font-size: 13px;
  font-weight: bolder;
  letter-spacing: 2px;
  background: rgb(255, 255, 255);
  color: black;
  padding: 2px;
}

#steam-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: 10px;
  transition: transform 0.3s ease 0s;
}

#discord-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: 10px;
  transition: transform 0.3s ease 0s;
}

#github-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: 10px;
  transition: transform 0.3s ease 0s;
}

#steam-logo:hover {
  transform: translateY(-10px);
}

#discord-logo:hover {
  transform: translateY(-10px);
}

#github-logo:hover {
  transform: translateY(-10px);
}

#yt-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: transform 0.3s ease 0s;
}

#yt-logo:hover {
  transform: translateY(-10px);
}

.logo-div {
  display: inline;
  height: 50%;
  border-radius: 20px;
  margin: auto;
  padding-bottom: 5px;
}

.header {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  align-content: center;
  /* background-color: white; */
  padding: 20px;
}

.header img {
  width: 10%;
  height: 10%;
  padding: 15px;
  border: 2px solid white;
  /* margin-left: 25px; */
  /* margin: auto; */
  /*
  animation-name: rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  */
}

.logo-div img {
  margin: 0px 10px;
}
.info-div {
  /* background-color: #c9f2ff; */
  /* color: #000c32; */
  /* font-weight: bolder; */
  /* border: 2px solid white; */
  width: 100%;
  padding: 20px 0px 0px 20px;
  /* border-radius: 20px; */
  /* text-align: justify; */
}

div:not(.box-1, .main-navigator, .nav-body, .main-body, .logo-div, .logo-name, .info-div) {
  display: inline-flex;
  margin: auto;
}

.gallery {
  margin: auto;
  height: 30%;
  width: 100%;
}

.gallery-2 {
  height: 10%;
  width: 100%;
  padding: 20px 0;
  display: table-cell;
  vertical-align: middle;
}

.column-1,
.column-2,
.column-3 {
  width: 100%;
  height: 100%;
  margin: auto;
}

.column-names {
  background-color: rgba(0, 0, 0, 0.467);
  width: 30%;
  height: 100%;
  border-radius: 15px;
  margin: auto;
  transition: transform 0.3s ease 0s;
  border: 2px solid white;
}

.column-names:hover {
  transform: translateY(-10px);
}

.showcase {
  width: 90%;
  margin: auto;
  display: inline-block;
  border-radius: 15px;
  border: 2px solid white;
  transition: transform 0.3s ease 0s;
}

.showcase:hover {
  transform: translateY(-10px);
}

.names {
  width: 100%;
  height: 100%;
  font-size: 1.0rem;
  text-align: center;
  flex-direction: column;
}

.profile {
  width: 50%;
  height: 50%;
  border-radius: 40%;
  margin: auto;
  display: flex;
}

h1,
p {
  text-align: center;
}

#p {
  font-family: monospace;
}

.details {
  text-align: left;
  margin: 1px;
  padding-bottom: 3px;
}

.inline {
  display: block;
}

/* Miscellaneous*/
.bold {
  font-weight: 500px;
}

.padding {
  padding: 0px 50px;
}

.justify {
  text-align: justify;
}

.center {
  text-align: center;
  margin: auto;
  font-size: 1.5rem;
}

.no-underline {
  text-decoration: none;
  color: inherit;
}

.home-center {
  text-align: justify;
  margin: auto;
}

.socials {
  margin: 20px;
}

.steam {
  height: 30px;
  width: 30px;
  /* border: 2px solid white; */
}

.heading {
  margin: 10px auto;
  display: block;
}

.description {
  display: block;
  margin: 10px auto;
}

#profile {
  /* background-color: white; */
  border-radius: 15%;
  /* border: 2px solid white; */
}

#profile-text {
  padding-left: 20px;

}

a,
a:hover,
a:active,
a:visited {
  color: white;
  text-decoration: none;
}

  .typewriter {
    /* padding: 20px 20px 0 0; */
    padding-top: 30px;
    padding-bottom: 30px;
    margin: auto;
    font-family: monospace;
    font-size: 20px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    /* border-right: 3px solid rgb(255, 255, 255); Cursor */
    /* border-radius: 25%; */
    /* border-left: 5px solid white; */
    line-height: 0.2em;
    width: 100%;
    animation: typing 5s steps(36, end) infinite,
               blink 0.7s step-end infinite;
  }

  @keyframes typing {
    0%   { width: 0 }
    40%  { width: 29ch }   /* Finished typing */
    60%  { width: 29ch }   /* Hold the full text for a moment */
    100% { width: 0 }      /* Erase text */
  }

  @keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: rgb(255, 255, 255) }
  }