@font-face{
  src: url("../fonts/FreeSans.ttf");
  font-family: "FreeSans Regular";
}

html{
  font-family: "FreeSans Regular";
  background: url("../images/background.gif");
  background-size: cover;
  background-repeat: none;
  background-attachment: fixed;
  top: 0px;
  left: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}

body{
  font-family: "FreeSans Regular";
  background: url("../images/background.gif");
  background-size: cover;
  background-repeat: none;
  background-attachment: fixed;
  top: 0px;
  left: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}

@keyframes rgbcolor{
  0%{
    background-color: rgb(255, 0, 0);
  }
  25%{
    background-color: rgb(0, 255, 0);
  }
  50%{
    background-color: rgb(0, 0, 255);
  }
  75%{
    background-color: rgb(0, 255, 0);
  }
  100%{
    background-color: rgb(255, 0, 0);
  }
}

@keyframes boxshadowrgb{
  0% {
    box-shadow: 0px 0px 20px #FF0000;
  }
  25% {
    box-shadow: 0px 0px 20px #00FF00;
  }
  50% {
    box-shadow: 0px 0px 20px #0000FF;
  }
  75% {
    box-shadow: 0px 0px 20px #00FF00;
  }
  100% {
    box-shadow: 0px 0px 20px #FF0000;
  }
}

@keyframes textshadowrgb{
  0% {
    text-shadow: 0px 0px 40px #FF0000;
  }
  25% {
    text-shadow: 0px 0px 40px #00FF00;
  }
  50% {
    text-shadow: 0px 0px 40px #0000FF;
  }
  75% {
    text-shadow: 0px 0px 40px #00FF00;
  }
  100% {
    text-shadow: 0px 0px 40px #FF0000;
  }
}

.rgbshadow{
  animation: 10s infinite boxshadowrgb;
}

.textrgbshadow{
  animation: 10s infinite textshadowrgb;
}

.avatar{
  border-radius: 360px;
  position: relative;
  width: 184px;
  height: 184px;
  margin: auto;
  display: block;
}

.title_container{
  width: 100%;
  text-align: center;
  word-wrap: break-word;
}

.title_text{
  color: #FFFFFF;
  position: relative;
  font-size: 40px;
  text-align: center;
}

.description_text{
  color: #FFFFFF;
  position: relative;
  font-size: 24px;
  text-align: center;
}

.category_text{
  color: #FFFFFF;
  position: relative;
  font-size: 32px;
  font-weight: bold;
}

.about_container{
  width: 50%;
  position: relative;
  border-radius: 10px;
  word-wrap: break-word;
  margin: auto;
  top: calc(50% / 3);
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
}

.about_inner{
  padding-top: 25px;
  padding-bottom: 25px;
  width: 100%;
}

.links_container{
  width: 100%;
  text-align: center;
  word-wrap: break-word;
  position: relative;
}

.link_btn{
  border-radius: 10px;
  font-size: 32px;
  position: relative;
  border: 0px;
  color: #000000;
  margin-right: 5px;
  padding-left: 5px;
  padding-right: 5px;
  animation: 10s infinite rgbcolor;
}

@media screen and (max-width: 600px){
  .about_container{
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 0px;
    top: 0px;
    left: 0px;
    margin: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
  }
}