@font-face {
  font-family: "Cardo";
  src: url('/fonts/Cardo-Regular.ttf') format('truetype');
}

@font-face {
  font-family: "Inter";
  src: url('/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}

html {
    font-family: Inter;
    background-color: #f9f9f9;
}


#main {
    min-height: 90%;
    padding-bottom: 32px;
}

#left {
    width: 15%;
}

#centre {
    width: 70%;
}

#right{
    width: 15%;
}

#title {
    font-family: Cardo;
    font-size: 48px;
}

#question {
    font-size: 20px;
}

#answer {
    font-family: Cardo;
    font-size: 48px;
}

#explanation {
    font-size: 20px;
}

#body {
    display: flex;
    flex-direction: column;
}

.horizontal {
    display: flex;
    flex-direction: row;
}

.vertical {
    display: flex;
    flex-direction: column;
}

#top {
    height: 5%;
}

#index {
    font-family: Cardo;
}

#header {
    position: fixed;
    min-width: 100%;
    left:0;
    top:0;
    background-color: #171717;
    color: #f9f9f9;
    height: 32px;
    line-height: 32px;
    margin-top: 0px;
    font-family:Cardo;
    font-weight: 300;
}

#header_text {
    position: fixed;
    margin-top: 0px;
    margin-left: 2px;
}

#footer {
    position: fixed;
    min-width: 100%;
    left:0;
    bottom:0;
    background-color: #171717;
    color: #f9f9f9;
    height: 32px;
    line-height: 32px;
    margin-bottom: 0px;
    font-family: Cardo;
    font-weight:300;
}

#footer_text {
    position: fixed;
    margin-top:0px;
    margin-left: 45%;
}


label {
    font-size: 20px;
}

input[type='radio'] {
    accent-color: #171717;
    vertical-align: 15%;
}

label:hover {
    border: gray;
}

#button {
    color: #171717;
    background-color: #f9f9f9;
    border-radius: 20%;
    box-shadow: 0px 0px 1px 0px;
    font-family: Inter;
}

#navbar_links {
    color:#f9f9f9;
    text-decoration: none;
}
#middle {
    height: 25%;
}

#bottom {
    height: 60%;
}

p {
    text-align: justify;
    font-size: 20px;
}

a:link {
    color: #171717;
}

a:visited {
    color:gray;
}

a:hover {
    text-decoration: none;
}