@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

html {
    /*Ensuring responsive font sizing across screen sizes*/
    font-size: clamp(12px, 2vw, 20px);
  }
  
@media (prefers-color-scheme: light) {
:root {
  --bg-color: rgb(241, 238, 231);
  --text-color: rgb(42, 42, 37);
  --text-weight: 300;
  --hover-weight: 500;
    }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color:  rgb(42, 42, 37);
    --text-color: rgb(220, 215, 210);
    --text-weight: 200;
    --hover-weight: 500;
  }
}


body {
    background-color: var(--bg-color);
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}


p, a, table {
    font-family: "Sora"; 
    font-weight: var(--text-weight); 
    font-size: 1.25rem;
    color: var(--text-color);
    text-decoration: none;
    line-height: 1.5;
    margin-bottom: 2.5rem;
}


h1 {
    /* Page title*/
    font-family: "Sora";
    font-weight: 800;
    font-size: 2rem;
    color: var(--text-color);
    text-decoration: none;
    margin-top: 0;
}


h2 {
    /* Headlines on index page */
    font-family: "Sora"; 
    font-weight: 600; 
    font-size: 1.25rem;
    color: var(--text-color);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    text-transform:uppercase;
}


h3 {
    /* Headlines in pages */
    font-family: "Sora"; 
    font-weight: 600; 
    font-size: 1.5rem;
    color: var(--text-color);
    margin-top: 3.5rem;
    margin-bottom: 2.5rem;
    text-transform:uppercase;
}


a:hover {
    /* Hover-effects for responsiveness*/
    font-weight: var(--hover-weight);
    color: var(--text-color);
    /*color: rgb(45, 43, 37);*/
}


td.right-cell {
    /* Properly styling the right row of layout tables */
    text-align: right; 
    white-space: nowrap; 
    padding-left: 1rem;
    vertical-align: middle;
}