body,html{
    /* height: 100%; */
    font-family: var(--font-family);
    margin: 0px;
    background-color: var(--bgcolor);
    color: var(--color);
    background-image: var(--bgcolor);
    transition: background 1s, color 1s;
}

/* input, button, select, option, textarea {
    font-size: 100%;
} */

a{
    color: var(--color);
}

p{
    letter-spacing: 0.05em;
}

button{
    background-color: var(--bgcolor);
    color: var(--color);
    
    /* Removes default button styling */
    border-style: solid;
    border-color: var(--color);
    border-width: 0;
    font-family: var(--font-family);
    border-radius: var(--button-border-radius);
    cursor: pointer;
    padding: 0.5rem;
    letter-spacing: 0.05em;
}

button:hover{
    background-color: var(--hover-bg-color);
    color: var(--color);
}

button:disabled{
    cursor: not-allowed;
    opacity: 0.5;
}


/* Make this apply to input of type button as well. */

button.callToAction{
    background-color: var(--emphasis-color);
    color: black;
    border-style: solid;
    border-color: var(--color);
    border-width: var(--button-border);
    font-family: var(--font-family);
    font-weight: bold;
    border-radius: var(--button-border-radius);
    background: var(--emphasis-color)





}

button.callToAction:hover{
    background-color: var(--hover-bg-color);
    transform: scale(1.1);
}


input[type="submit"]{
    background-color: var(--emphasis-color);
    color: var(--logo-color);
    border-style: solid;
    border-color: var(--color);
    border-width: var(--button-border);
    font-family: var(--font-family);
    font-weight: bold;
    border-radius: var(--button-border-radius);
    cursor: pointer;
}

input[type="submit"]:hover{
    background-color: var(--hover-bg-color);
    color: var(--color);
}

input[type="button"]{
    background-color: var(--bgcolor);
    color: var(--color);
    border: 0;
    font-family: var(--font-family);
    border-radius: var(--button-border-radius);
}

input[type="button"]:hover{
    background-color: var(--hover-bg-color);
    color: var(--color);
}




input{
    background-color: var(--bgcolor);
    padding: 0.25em;
    color: var(--color);
}


.bigInfoDiv {
    margin-top: 7%;
    width: 60%;
    height: 90%;
    transform: translate(+40%);
    margin-bottom: 10%;
}


/* General stuff --  utlities */

.prewrapwhitespace {
    white-space: pre-wrap;
}

.noboxshadow{
    box-shadow: none;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }



  


/* GLUPUSUI */

.glupusUISummaryPanel{
    display: flex;
}