@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

/* Configuration */
:root {
  --background: linear-gradient(#000000, #202020, #313131);
  --content: #1e1e1e;
  --content-border: #fff;
  --content-border-size: ;
  --priority: #fff;
  --priority-size: 3rem;
  --sub-priority: #565656;
  --sub-priority-size: ;
  --normal: #525252;
  --normal-size: ;
  --p-button: #fff;
  --p-button-text: ;
  --p-button-size: ;
  --sp-button: #fff;
  --sp-button-text: ;
  --sp-button-size: ;
  --button: #fff;
  --button-border: #fff;
  --button-border-size: ;
  --button-text: ;
  --button-size: ;
}

/* Styling from config */
body {background: var(--background); font-family: "Roboto Mono", monospace;}
h1,h2,h3 {color: var(--priority);}
h1 {font-size: var(--priority-size);}
h4,h5,h6,a,p.sp {text-decoration: none; color: var(--sub-priority); font-size: var(--sub-priority-size);}
a::after {content: " [LINK]"} /* Not needed (find out how to put symbol) */
p {color: var(--normal); font-size: var(--normal-size);}
div.content {background-color: var(--content); border: var(--content-border-size) solid var(--content-border); border-radius: 30px; padding-left: 2em;}
button {background-color: var(--button); border: var(--button-border-size) solid var(--button-border); color: var(--button-text); font-size: var(--button-size); border-radius: 30%;}
button.p {background-color: var(--p-button); border: var(--p-button-border-size) solid var(--p-button-border); color: var(--p-button-text); font-size: var(--p-button-size); border-radius: 30px;}
button.sp {background-color: var(--sp-button); border: var(--sp-button-border-size) solid var(--sp-button-border); color: var(--sp-button-text); font-size: var(--sp-button-size); border-radius: 30px;}

/* Unique and custom */
div#banner{height: 30em; background-image: url(assets/background.gif); background-position: center; background-repeat: no-repeat; background-size: cover;}
div#banner h1{position: absolute; top: 20%; left: 42%; transform: calc(20%, 42%); font-size: 5em;}
div#banner p#bnr-p{position: relative; top: 41%; left: 45%; transform: calc(41%, 45%,); font-size: 1.3em;}
div#banner p#bnr-d{position: relative; top: 65%; left: 36%; transform: calc(65%, 36%,); font-size: 1.3em;}
div#banner p{position: absolute; bottom: 1.8em; font-size: 1.3em;}