:root {
  --thing: #thing
}

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

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

/* Vertical */

.border.vertical {border: 6px transparent; border-radius: 4px; box-shadow: 5px 5px var(--bloodred), -7px -7px black;}
#container.vertical {background-color: dimgrey; background: linear-gradient(to bottom, black, darkred, black); height: 885px; width: 500px; padding-left: 15px; padding-right: 15px; margin-bottom: 25px;
            color: lightgrey; font-family: 'October Crow'; 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, var(--jet), black); margin-bottom: 10px;}
#name.vertical {text-shadow: 2px 2px black, 3px 3px var(--bloodred); position: relative; top: 5px;}
#pronouns.vertical {color: lightgrey; font-size: 16px; background-color: black; background: linear-gradient(to right, black, var(--jet), black); width: 365px; padding-top: 1px; padding-bottom: 1px; margin-bottom: inherit;}
#bio.vertical {background: linear-gradient(to right, black, var(--jet), black); height: 150px; padding: 5px;}
#description.vertical {list-style: none;}
li {margin-bottom: 5px;}

/* Horizontal */

.border.horizontal {border: 6px transparent; border-radius: 4px; box-shadow: 5px 5px var(--bloodred), -7px -7px black;}
#container.horizontal {background-color: dimgrey; background: linear-gradient(to bottom, black, darkred, black); position: absolute; top: 25px; right: 15px; height: 700px; width: 1100px; padding-left: 15px; padding-right: 15px; margin-bottom: 25px;
            color: lightgrey; font-family: 'October Crow'; 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, var(--crimson), darkred, var(--crimson)); 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, var(--jet), 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, var(--jet), black); margin-bottom: 15px;}
#name.horizontal {text-shadow: 2px 2px black, 3px 3px var(--bloodred); position: relative; top: 5px;}
#pronouns.horizontal {color: lightgrey; font-size: 16px; background-color: black; background: linear-gradient(to right, black, var(--jet), 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, var(--jet), black); height: 150px; width: 350px; padding: 5px; position: relative; top: 40px; left: 15px; border-image: url("/assets/dividers/gothlace.png") 5px; }
#description.horizontal {list-style: none;}
#divider {position: absolute; top: 245px; right: 50px;}
#roses {height: 100px;}
.deco {text-shadow: 2px 2px black, 3px 3px var(--bloodred);}
#rose {position: relative; left: 50px; font-size: 26px;}
#skull {position: relative; font-size: 30px;}
#knife {position: relative; font-size: 26px;}
#heart {position: relative; font-size: 32px;}
#rose2 {position: relative; left: 50px; font-size: 26px;}
#skull2 {position: relative; font-size: 30px;}
#knife2 {position: relative; font-size: 26px;}
#heart2 {position: relative; font-size: 32px;}


















/* extra space just for me */