/* ---CUSTOM FONT--- */
@font-face {
  font-family: "PvZ2";
  src: url(../assets/font/PvZ2\ Regular\ By\ Beast\ and\ MF.ttf);
}

/* ---BACKGROUND PROPERTIES--- */
.gradient-bg {
  background-image: linear-gradient(#080036, #5500e0);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
body {
  display: flex;
  justify-items: center;
  align-items: center;
  padding-top: 4vh;
}

/* ---PRIMARY/MAIN CONTAINER PROPERTIES--- */
.content-layout {
  background-color: #1b0087;
  color: #b8fffb;
  border: #5e00f5e8;
  border-style: solid;
  font-family: "PvZ2";
  box-shadow: 0 0 45px #000000 inset;
  border-radius: 10px;
}
.wrapper-properties {
  padding-bottom: 3%;
}

/* ---HEADER PROPERTIES--- */
.header-card {
  background-image: url("../assets/images/main-index/header-background.png");
  background-position: center left;
  background-repeat: no-repeat;
  background-size: cover;
  border: #7939e0 solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 5px;
  box-shadow: 0 0 50px #390ed7 inset;
}
.header-divider {
  border: 1px solid #b8fffb;
  opacity: 100%;
  width: 25%;
  margin: 0 auto;
}
.header-title-cell {
  width: 100%;
  text-align: center;
}
.img-pfp {
  border: #5500e0 solid;
}

/* ---NAVIGATION BAR PROPERTIES--- */
.navigation-panel {
  background-image: linear-gradient(#665eff, #4138e8, #4138e8, #2821a9);
  background-repeat: no-repeat;
  background-size: cover;
  border: #99a5ff solid;
}
a.navbar-button:link {
  background-image: linear-gradient(#665eff, #4138e8, #4138e8, #2821a9);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4px;
  border-left: #99a5ff solid;
  border-right: #99a5ff solid;
  color: #b8fffb;
}
a.navbar-button:hover {
  background-image: linear-gradient(#938efb, #6962fb, #6962fb, #4c43eb);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4px;
  border-left: #99a5ff solid;
  border-right: #99a5ff solid;
  color: #c8f9f7;
}
a.navbar-button:active {
  background-image: linear-gradient(#2821a9, #4138e8, #4138e8, #665eff);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4px;
  border-left: #99a5ff solid;
  border-right: #99a5ff solid;
  color: #9bfcf9;
}
a.navbar-button:visited {
  background-image: linear-gradient(#938efb, #6962fb, #6962fb, #4c43eb);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4px;
  border-left: #99a5ff solid;
  border-right: #99a5ff solid;
  color: #b8fffb;
}

/* --- ABOUT ME PROPERTIES--- */
.about-me-card {
  background-image: url("../assets/images/main-index/Menu.jpg");
  background-position: center left;
  background-repeat: no-repeat;
  background-size: cover;
  border: #009bbe solid;
  color: #b8fffb;
  padding: 5px;
  box-shadow: 0 0 75px #42a4dd inset;
  -webkit-text-stroke: 0.5px #0be4d9;
}
.about-me-divider {
  border: 1px solid #b8fffb;
  opacity: 100%;
  margin: 0 auto;
}

/* --- INTERESTS PROPERTIES--- */
.interests-card {
  background-image: url("../assets/images/main-index/Battlez_Lawn.png");
  background-position: center left;
  background-repeat: no-repeat;
  background-size: cover;
  border: #5a577b solid;
  color: #6ed83c;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 5px;
  box-shadow: 0 0 75px #474562 inset;
  -webkit-text-stroke: 0.5px #4b932a;
}
.interests-divider {
  border: 1px solid #6ed83c;
  opacity: 100%;
  margin: 0 auto;
}
a.interest-link:link {
  color: #6ed83c;
  -webkit-text-stroke: 0.5px #4b932a;
  text-decoration-color: #6ed83c;
  -moz-text-decoration-color: #6ed83c;
}
a.interest-link:hover {
  color: #9bf073;
  -webkit-text-stroke: 0.5px #60c133;
  text-decoration-color: #9bf073;
  -moz-text-decoration-color: #9bf073;
}
a.interest-link:active {
  color: #4a9627;
  -webkit-text-stroke: 0.5px #275612;
  text-decoration-color: #4a9627;
  -moz-text-decoration-color: #4a9627;
}

/* ---SOCIALS PROPERTIES--- */
.socials-card {
  background-image: url("../assets/images/main-index/Roof_Night_Lawn_\(Chinese\).png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
  border: #3c3ec9 solid;
  color: #9e9ffb;
  padding: 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 0 75px #3538dd inset;
  -webkit-text-stroke: 0.5px #7174ff;
}
.socials-divider {
  border: 1px solid #9e9ffb;
  opacity: 100%;
  margin: 0 auto;
}

/* ---MISC--- */
.text-info-mini {
  font-size: 15px;
  text-align: center;
}
.card-content-distance {
  font-size: 20px;
  margin-top: 10px;
}

/* ---DEBUG BORDER--- */
.border-debug {
  border: red solid;
}
.border-debug-2 {
  border: orange solid;
}