@font-face {
    font-family: "TT Norms";
    src: url("./fonts/TTNorms-Bold.eot");
    src: url("./fonts/TTNorms-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/TTNorms-Bold.woff2") format("woff2"), url("./fonts/TTNorms-Bold.woff") format("woff"), url("./fonts/TTNorms-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "TT Norms";
    src: url("./fonts/TTNorms-BoldItalic.eot");
    src: url("./fonts/TTNorms-BoldItalic.eot?#iefix") format("embedded-opentype"), url("./fonts/TTNorms-BoldItalic.woff2") format("woff2"), url("./fonts/TTNorms-BoldItalic.woff") format("woff"), url("./fonts/TTNorms-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "TT Norms";
    src: url("./fonts/TTNorms-Italic.eot");
    src: url("./fonts/TTNorms-Italic.eot?#iefix") format("embedded-opentype"), url("./fonts/TTNorms-Italic.woff2") format("woff2"), url("./fonts/TTNorms-Italic.woff") format("woff"), url("./fonts/TTNorms-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "TT Norms";
    src: url("./fonts/TTNorms-Light.eot");
    src: url("./fonts/TTNorms-Light.eot?#iefix") format("embedded-opentype"), url("./fonts/TTNorms-Light.woff2") format("woff2"), url("./fonts/TTNorms-Light.woff") format("woff"), url("./fonts/TTNorms-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "TT Norms";
    src: url("./fonts/TTNorms-Regular.eot");
    src: url("./fonts/TTNorms-Regular.eot?#iefix") format("embedded-opentype"), url("./fonts/TTNorms-Regular.woff2") format("woff2"), url("./fonts/TTNorms-Regular.woff") format("woff"), url("./fonts/TTNorms-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "TT Norms";
    src: url("./fonts/TTNorms-Black.eot");
    src: url("./fonts/TTNorms-Black.eot?#iefix") format("embedded-opentype"), url("./fonts/TTNorms-Black.woff2") format("woff2"), url("./fonts/TTNorms-Black.woff") format("woff"), url("./fonts/TTNorms-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }

:root {
    --heading-font-size: clamp(1.2rem, 1.5vw, 2rem);
    --subheading-font-size: clamp(0.9rem, 1.1vw, 1.3rem);
    --paragraph-font-size: clamp(0.7rem, 1vw, 1.1rem);
    --button-font-size: clamp(0.9rem, 1.1vw, 1.3rem);

    --primary-color: #12141d;
    --secondary-color: rgb(233, 233, 233);
    --accent-color: #00ADF0;
}

h1 {
    font-size: var(--heading-font-size);
    font-weight: 600;
}

h2,
h3 {
    font-size: var(--subheading-font-size);
    font-weight: 400;
}

a {
    color: var(--secondary-color);
    font-weight: 400;
}

button {
    width: 60%;
    background-color: var(--primary-color);
    border: 2px solid var(--accent-color);
    border-radius: 10px;
    font-weight: 400;
    font-size: var(--button-font-size);
    color: var(--secondary-color);
    margin-block: max(.3vw, 5px);
    padding-block: max(.3vw, 5px);
    cursor: pointer;
    font-family: 'TT Norms';
}

button:hover {
    background-color: var(--accent-color);
    color: var(--primary-color);
    /* font-weight: 600; */
}

.button {
    text-align: center;
    width: 25%;
    background-color: var(--primary-color);
    border: 2px solid var(--accent-color);
    border-radius: 10px;
    font-weight: 400;
    font-size: 1.2em;
    font-family: 'TT Norms';
    color: var(--secondary-color);
    margin-block: max(.3vw, 5px);
    padding-block: max(.3vw, 5px);
    cursor: pointer;
}

.button:hover {
    background-color: var(--accent-color);
    color: var(--primary-color);
    /* font-weight: 600; */
}