:root {
  /* colors */
  --text: #8d8dfb;
  --cardbg: #000000e4;
  --cardshadow: #00d9ff;
  --btncolor: #cc4400; /* buttons main colour */
  --btncolorhover: #e09f07; /* buttons colour when active */
  --btnlinkcolor: #000000a8; /* link label text colour */
  --btnlinkcolorhover: #ffffff; /* link label text colour when active */
  --linkcolor: #cc9900; /* used for links (applies to the icons) */
  --linkcolorhover: #cc3300; /* used for links when active (applies to the icons) */

  /* fonts - the browser will try to use them in order, the first one it finds will be the one displayed */
  --titlefont: "Arial", serif; /* used for the card title on top */
  --basefont: "Helvetica", serif; /* used for the description */
  --linkfont: "Arial", serif; /* used for the links */

  /* card styling */
  --max-width: 500px; /* width of the box */
  --cardborder: solid 2px #b5b5b5; /* style of the border around the card if you want one! the syntax is 'style thickness color' - you need to uncomment a line in the '#card' section below to activate it */

  /* link button styling*/
  --btnborder: solid 2px #cc3300; /* style of the border around the card if you want one! the syntax is 'style thickness color' - you need to uncomment a line in the '.linkbtn' section below to activate it */

  /* text styling */
  --text-size: 1.2em; /* increasing this value will make all the text bigger */
  --alignment: center;

  /* misc */
  --spacing: 30px; /* defines the base spacing of the elements - a higher value will make things spread out more */
  --profilepicsize: 150px; /* size of the profile picture */
  --profilepiccorner: 20%; /* if using a rounded corner profile picture, adjust the corners - values range between 0-50%, where 0 is a sharp square and 50% is a circle */
  /* don't worry about this*/
  --half: calc(var(--spacing)/2);
  --double: calc(var(--spacing) * 2);
}

* {
  max-width: 100%;
  -ms-overflow-style: none;
}

body {
  background-color: var(--background);
}

/* this applies to everything on the page */
main {
  /* positioning */
  max-width: 100%;
  padding-top: 5%;
  padding-bottom: 5%;
  margin: 0 auto;

  /* colours */
  color: var(--text);

  /* text styling */
  text-align: var(--alignment);
  font-family: var(--basefont);
  font-weight: normal;
  font-style: normal;
  font-size: var(--text-size);
  line-height: 1.5em;
  background-image: url("/imagesbackup/art.webp");
}

/* this affects the title container above the card */
#name {
  margin-top: 5vh;
  text-align: center;
  text-indent: 0;
}

/* h1 is a header tag - on this page, it's used for the title above the card */
h1 {
  font-family: var(--titlefont);
}

/* the card block */
#card {
  background-color: var(--cardbg);
  max-width: var(--max-width);
  padding: var(--spacing);
  margin: 0 auto;
  border-radius: 15px; /* this gives the card round corners */
  box-shadow: 0px 0px 100px 0px var(--cardshadow);
  backdrop-filter: blur(10px); /* shadow dropped by the card on the background */
  border: var(--cardborder);
}

/* these apply to the buttons in the list of links */
.linkbtn {
  height: var(--double);
  max-width: 80%;
  margin: var(--half) auto;
  border-radius: var(--spacing);
  background-color: var(--btncolor);
  color: var(--background);
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  border: var(--btnborder); /* uncomment if you want a border around the card */
}

/* this applies to the buttons in the list of links when active */
.linkbtn:hover {
  background-color: var(--btncolorhover);
  color: var(--background);
  cursor: pointer;
  transition: 0.5s;
}

/* these apply to the buttons labels */
.linkbtn span {
  font-family: var(--linkfont);
  color: var(--btnlinkcolor);
  font-size: 1.5em;
  transition: 0.5s;
}

/* these apply to the buttons labels when active */
.linkbtn:hover span {
  color: var(--btnlinkcolorhover);
  letter-spacing: 0.1em; /* this makes the letter spread on hover, remove this line if you don't like that */
  transition: 0.5s;
}

/* other links styling */
a {
  text-decoration: none;
  color: var(--linkcolor);
}

/* other actives links styling */
a:hover {
  text-decoration: none;
  color: var(--linkcolorhover);
}

/* class styling */
.flex {
  display: flex;
  flex-flow: row wrap;
}

.center {
  text-align: center;
  margin: 0 auto;
}

/* profile pic styling, this is what create the mask on the shape */
.profilepic img {
  width: var(--profilepicsize);
  height: var(--profilepicsize);
  padding: var(--half);
  object-fit: cover;
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.circle img {
  border-radius: 1%;
}

.rounded img {
  border-radius: var(--profilepiccorner);
}

/* social links icons */
.icon {
  color: var(--linkcolor);
  transition: 0.5s;
  padding: 3px;
}

/* social links icons, active */
.icon:hover {
  color: var(--linkcolorhover);
  text-shadow: 0px 0px 15px var(--linkcolorhover); /* glow effect around the icon when hovering */
  transform: scale(1.1); /* scaling up when hovering */
  transition: 0.5s;
}

/* indents the description paragraph */
#intro p {
  text-indent: 5%;
}

/* this affects the block of social links */
#socials {
  padding: var(--spacing);
  text-indent: 0;
  text-align: center;
}

/* credits block at the bottom */
#credits {
  width: 100vw;
  font-size: 0.75em;
  text-align: center;
  text-indent: 0;
}

/* template credits block at the bottom right, semi transparent by default */
#tmplt_credits {
  width: 100vw;
  font-size: 0.75em;
  padding-right: 15px;
  text-indent: 10px;
  position: fixed;
  bottom: 0%;
  left: 45%;
  opacity: 0.25;
}

/* makes the template credits block opaque when active */
#tmplt_credits:hover {
  opacity: 1;
}