:root {
  --customcolor: #555555 /* insert 6 digit hex code, then apply using var(--customcolor) */
}

@keyframes spin {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

body {background-color: var(--customcolor); padding: 15px;}

/* Vertical */

.border.vertical {border: 6px transparent; border-radius: 4px; box-shadow: 5px 5px darkred, -7px -7px black;}
#container.vertical {background-color: dimgrey; background: linear-gradient(to bottom, black, darkred, black);
  min-height: 885px; max-height: auto; width: 500px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; margin-bottom: 25px;
  color: lightgrey; font-family: 'Custom Font', Georgia; font-size: 17px; letter-spacing: 1px; text-align: center;}
#header.vertical {width: inherit; position: relative; top: -4px; left: -2.5px; margin: inherit;}
#banner.vertical {width: inherit;}
#icon.vertical {height: 150px; width: 150px; position: absolute; top: 355px; left: 35px;}
#border.vertical {background: linear-gradient(to right, black, black, darkred);
  border: 0px solid transparent; border-radius: 100px; animation: spin 4s linear infinite; height: 150px; width: 150px;}
  #avatar.vertical {mask-image: radial-gradient(circle, white 65%, transparent 65%);
  height: 150px; width: auto; position: absolute; top: 0px; left: 0px;}
#nameplate.vertical, #pronouns.vertical {text-align: left; padding-left: 8px;}
#nameplate.vertical {color: darkred; font-size: 18px;
  height: 50px; width: 240px;
  background: linear-gradient(to right, black, grey, black); margin-bottom: 10px;}
#name.vertical {text-shadow: 2px 2px black, 3px 3px darkred; position: relative; top: 5px;}
#pronouns.vertical {color: lightgrey; font-size: 16px;
  background-color: black; background: linear-gradient(to right, black, grey, black);
  width: 365px; padding-top: 1px; padding-bottom: 1px; margin-bottom: inherit;}
#bio.vertical {background: linear-gradient(to right, black, grey, black); height: auto; padding: 5px;}
#description.vertical {list-style: none;}

/* Horizontal */

.border.horizontal {border: 6px transparent; border-radius: 4px; box-shadow: 5px 5px darkred, -7px -7px black;}
#container.horizontal {background-color: dimgrey; background: linear-gradient(to bottom, black, darkred, black);
  position: absolute; top: 25px; right: 15px;
  height: 715px; width: 1100px; padding-left: 15px; padding-right: 15px; margin-bottom: 25px;
  color: lightgrey; font-family: 'Custom Font', Georgia; font-size: 17px; letter-spacing: 1px; text-align: center;}
#header.horizontal {height: 250px; width: inherit; position: relative; top: -4px; right: -2px; margin: inherit; margin-bottom: 75px;
  background-image: url("/assets/backgrounds/bloodmoon.jpg"); background-position: top; background-repeat: no-repeat; background-size: 100%;}
#outline.horizontal {width: 156px; height: 156px; background-color: lightgrey; background: linear-gradient(to bottom, black, red, darkred); /* this is supposed to blend in with the background like discord does */ 
  position: absolute; top: -3px; left: -3px; border: 0px solid transparent; border-radius: 100px;} 
#icon.horizontal {height: 150px; width: 150px; position: absolute; top: 155px; left: 35px;}
#icon-border.horizontal {background: linear-gradient(to right, black, black, darkred);
  border: 0px solid transparent; border-radius: 100px; animation: spin 4s linear infinite;
  height: 150px; width: 150px; position: absolute; top: 0px; left: 0px;}
#avatar.horizontal {mask-image: radial-gradient(circle, white 65%, transparent 65%); height: 150px; width: auto;
  position: absolute; top: 0px; left: 0px;}
.widget {background-color: black; background: linear-gradient(to right, black, grey, black);}
#nameplate.horizontal, #pronouns.horizontal {text-align: left; padding-left: 8px;}
#nameplate.horizontal {color: darkred; font-size: 18px;
  height: 50px; width: 240px; background: linear-gradient(to right, black, grey, black); margin-bottom: 15px;}
#name.horizontal {text-shadow: 2px 2px black, 3px 3px darkred; position: relative; top: 5px;}
#pronouns.horizontal {color: lightgrey; font-size: 16px;
  background-color: black; background: linear-gradient(to right, black, grey, black);
  width: 365px; padding-top: 1px; padding-bottom: 1px; margin-bottom: inherit;
  position: relative; top: -35px; left: 300px;    }
#widget {height: 75px; width: 250px; position: relative; top: -95px; left: 415px; }
#bio.horizontal {background: linear-gradient(to right, black, grey, black);
  height: auto; width: 350px; padding: 5px;
  position: relative; top: 40px; left: 15px;}
#description.horizontal {text-align: center;}
#divider {position: absolute; top: 245px; right: 50px;}
#dividerimg {height: 100px;}

/* Just ignore this for now, they're not positioned well ahehe */
.deco {text-shadow: 2px 2px black, 3px 3px darkred;}
#emoji1 {position: relative; left: -500px; top: -300px; font-size: 26px;}
#emoji2 {position: relative; left: -150px; top: -300px; font-size: 30px;}
#emoji3 {position: relative; left: -275px; top: -500px; font-size: 26px;}
#emoji4 {position: relative; left: -25px; top: -500px; font-size: 32px;}
#emoji5 {position: relative; left: 50px; top: -340px; font-size: 26px;}
#emoji6 {position: relative; left: 350px; top: -500px; font-size: 30px;}
#emoji7 {position: relative; left: 130px; top: -500px; font-size: 26px;}
#emoji8 {position: relative; left: 200px; top: -550px; font-size: 32px;}