@font-face {
    font-family: "Handel Gothic";
    src: url("../fonts/HandelGothicBT-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Handel Gothic";
    src: url("../fonts/HandelGotD-Light.ttf") format("truetype");
    font-weight: 300;
}

@font-face {
    font-family: "Handel Gothic";
    src: url("../fonts/HandelGotD-Bold.ttf") format("truetype");
    font-weight: 700;
}

:root {
    --tsd-blue: rgb(8, 81, 244);
    --tsd-blue-alt: rgb(8, 81, 244, 0.85);
    --tsd-grey: rgb(35, 35, 35);
    --text-color-main: black;
    --text-color-alt: white;
    --text-color-success: green;
    --text-color-failure: red;
    --grey-light: lightgrey;
    --grey: rgb(160, 160, 160);
    --grey-dark: var(--tsd-grey);
    --atc-gold: #ae965d;
}

html {
    font-family: "Handel Gothic", sans-serif;
}

body {
    max-width: 1000px;
    margin: 0 auto;
}

input, button {
    font-family: inherit;
}

hr {
    border-top: 1px solid var(--grey);
}

button {
    cursor: pointer;
    background-color: var(--tsd-blue);
    padding: 10px;
    width: 150px;
    height: 60px;
    font-size: 14pt;
    color: var(--text-color-alt);
    border: none;
    border-radius: 10px;
}

button:hover {
    background-color: var(--tsd-blue-alt);
}

.button-alt {
    cursor: pointer;
    background-color: white;
    padding: 10px;
    width: 150px;
    height: 60px;
    font-size: 14pt;
    color: var(--text-color-main);
    border: 1px solid var(--tsd-blue);
    border-radius: 10px;
}

.button-alt:hover {
    background-color: var(--tsd-blue);
    color: var(--text-color-alt);
}

.long-button {
    text-decoration: none;
    width: 300px;
    margin: 5px 0px;
}