:root{
    /* color variables*/
    --textcolor: white;
    --btncolor: #11044D;
    --btncolorhover: #2a1780;
    --iconcolor: white;
    --iconcolorhover: #dcb7ff;
    /* font variables*/
    --titlefont: "Acme", sans-serif;
    --subheaderfont: "Acme", sans-serif;
    --basefont: "Quicksand", sans-serif;
    /* card variables*/
    --cardcolor: rgba(19,3,81,.6);
    --max-width: 400px;
    --cardborder: solid 2px white;
    --cardrounding: 24px;
    /* button variables*/
    --btnborder: solid 2px white;
    --btnrounding: 18px;
    --btnspacing: 10px;
    --btnpadding: 12px;
    /* text variables*/
    --text-size: 1.1em;
    --alignment: center;
    /*misc*/
    --spacing: 24px; /*padding for card*/
    --profilepicsize: 150px;
    --profilepiccorner: 50%; /* values range between 0-50%, where 0 is a sharp square and 50% is a circle */
}
html {
    height: 100%;
    max-width: 100%;
    -ms-overflow-style: none;
}
body {
    min-height: 100%;
    margin: 0;
    background-image: url("images/dragons.png"), linear-gradient(to bottom right, #11044D, #5800e3);
    background-color: #11044D;
    background-attachment: fixed;
}
.tooltip {
    position: relative;
    display: block;
}
.tooltiptext{
    visibility: hidden;
    font-size: small;
    font-family: var(--basefont);
    width: auto;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 5px;
    position:absolute;
    top: 100%;
    z-index: 1;
}
.tooltip:hover .tooltiptext{
    visibility: visible;
    transition: visibility 0s linear 1s;
}
/* Font shit
.quicksand-regular {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.acme-regular {
  font-family: "Acme", sans-serif;
  font-weight: 400;
  font-style: normal;
}
  */
h1 {
    color: var(--textcolor);
    text-align: var(--alignment);
    text-shadow: -4px 4px black;
    font-family: var(--titlefont);
}
h2 {
    color: var(--textcolor);
    text-align: var(--alignment);
    text-shadow: -3px 3px black;
    font-family: var(--subheaderfont);
    font-size: 1.4em;
}
h3 {
    color: var(--textcolor);
    text-align: var(--alignment);
    text-shadow: -3px 3px black;
    font-family: var(--subheaderfont);
    font-size: 1.4em;
}
p {
    color: var(--textcolor);
    font-family: var(--basefont);
}
footer {
    margin-top: 2.5%;
}
#card {
    background-color:var(--cardcolor);
    max-width: var(--max-width);
    padding: var(--spacing);
    border: var(--cardborder);
    border-radius: var(--cardrounding);
    width:auto;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
}
a {
    color: var(--textcolor);
    font-family: var(--basefont);
    font-size: var(--text-size);
    text-decoration: none;
}
.profilepic img {
    width: var(--profilepicsize);
    height: var(--profilepicsize);
    padding: var(--half);
    object-fit: cover;
}
.center {
    text-align: center;
    margin: 0 auto;
}
.rounded img {
    border-radius: var(--profilepiccorner);
}
.button {
    background-color: var(--btncolor);
    border: var(--btnborder);
    border-radius: var(--btnrounding);
    text-align: var(--alignment);
    padding: var(--btnpadding);
    margin-top: var(--btnspacing);
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width:80%;
}
.button:hover{
    background-color: var(--btncolorhover);
    transition: 0.25s;
}
.icon:hover{
    color: var(--iconcolorhover);
    transform: scale(1.1);
    transition: .25s;
}
.link:hover{
    color:var(--iconcolorhover);
}
#socials{
    margin-top: 24px;
    margin-bottom: 24px;
}
#credits {
    font-size: 12px;
}
.quote{
    color:#dcb7ff;
    font-size: small;
}