@font-face {
  font-family: "Circular Std";
  src: url("./assets/fonts/CircularStd-MediumItalic.eot");
  src: local("Circular Std Medium Italic"),
    local("./assets/fonts/CircularStd-MediumItalic"),
    url("./assets/fonts/CircularStd-MediumItalic.eot?#iefix")
      format("embedded-opentype"),
    url("./assets/fonts/CircularStd-MediumItalic.woff2") format("woff2"),
    url("./assets/fonts/CircularStd-MediumItalic.woff") format("woff"),
    url("./assets/fonts/CircularStd-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Circular Std";
  src: url("./assets/fonts/CircularStd-Black.eot");
  src: local("Circular Std Black"), local("./assets/fonts/CircularStd-Black"),
    url("./assets/fonts/CircularStd-Black.eot?#iefix")
      format("embedded-opentype"),
    url("./assets/fonts/CircularStd-Black.woff2") format("woff2"),
    url("./assets/fonts/CircularStd-Black.woff") format("woff"),
    url("./assets/fonts/CircularStd-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Circular Std";
  src: url("./assets/fonts/CircularStd-Medium.eot");
  src: local("Circular Std Medium"), local("./assets/fonts/CircularStd-Medium"),
    url("./assets/fonts/CircularStd-Medium.eot?#iefix")
      format("embedded-opentype"),
    url("./assets/fonts/CircularStd-Medium.woff2") format("woff2"),
    url("./assets/fonts/CircularStd-Medium.woff") format("woff"),
    url("./assets/fonts/CircularStd-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Circular Std";
  src: url("./assets/fonts/CircularStd-Bold.eot");
  src: local("Circular Std Bold"), local("./assets/fonts/CircularStd-Bold"),
    url("./assets/fonts/CircularStd-Bold.eot?#iefix")
      format("embedded-opentype"),
    url("./assets/fonts/CircularStd-Bold.woff2") format("woff2"),
    url("./assets/fonts/CircularStd-Bold.woff") format("woff"),
    url("./assets/fonts/CircularStd-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Circular Std";
  src: url("./assets/fonts/CircularStd-BlackItalic.eot");
  src: local("Circular Std Black Italic"),
    local("./assets/fonts/CircularStd-BlackItalic"),
    url("./assets/fonts/CircularStd-BlackItalic.eot?#iefix")
      format("embedded-opentype"),
    url("./assets/fonts/CircularStd-BlackItalic.woff2") format("woff2"),
    url("./assets/fonts/CircularStd-BlackItalic.woff") format("woff"),
    url("./assets/fonts/CircularStd-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: "Circular Std Book";
  src: url("./assets/fonts/CircularStd-BookItalic.eot");
  src: local("Circular Std Book Italic"),
    local("./assets/fonts/CircularStd-BookItalic"),
    url("./assets/fonts/CircularStd-BookItalic.eot?#iefix")
      format("embedded-opentype"),
    url("./assets/fonts/CircularStd-BookItalic.woff2") format("woff2"),
    url("./assets/fonts/CircularStd-BookItalic.woff") format("woff"),
    url("./assets/fonts/CircularStd-BookItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Circular Std";
  src: url("./assets/fonts/CircularStd-BoldItalic.eot");
  src: local("Circular Std Bold Italic"),
    local("./assets/fonts/CircularStd-BoldItalic"),
    url("./assets/fonts/CircularStd-BoldItalic.eot?#iefix")
      format("embedded-opentype"),
    url("./assets/fonts/CircularStd-BoldItalic.woff2") format("woff2"),
    url("./assets/fonts/CircularStd-BoldItalic.woff") format("woff"),
    url("./assets/fonts/CircularStd-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Circular Std Book";
  src: url("./assets/fonts/CircularStd-Book.eot");
  src: local("Circular Std Book"), local("./assets/fonts/CircularStd-Book"),
    url("./assets/fonts/CircularStd-Book.eot?#iefix")
      format("embedded-opentype"),
    url("./assets/fonts/CircularStd-Book.woff2") format("woff2"),
    url("./assets/fonts/CircularStd-Book.woff") format("woff"),
    url("./assets/fonts/CircularStd-Book.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  font-family: "Circular Std", sans-serif;
  display: flex;
  height: 100%;
  padding: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: lightgrey;
}

.accent-color {
  color: #083e9e;
}

img,
embed,
object,
video {
  max-width: 100%;
}
@media screen and (max-width: 500px) {
  #wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: white;
    padding: 30px 35px;
  }
  #logo {
    order: -1;
  }
  #info-section {
    width: 100%;
  }
  #calculator-section {
    width: 100%;
    order: 1;
  }
  #info-section {
    padding-right: 20px;
    display: flex;
    word-wrap: normal;
    width: 100%;
    flex-direction: column;
    flex: 1 1 50%;
  }

  #calculator-section {
    display: flex;
    width: 80%;
    flex-direction: column;
    padding: 30px;
    flex: 1 1 25%;
    align-items: center;
    color: white;
    background-color: #083e9e;
  }

  .calculator-header {
    width: 100%;
    text-align: center;
    font-weight: 100;
    letter-spacing: 2px;
  }

  label {
    font-size: 10px;
    margin-bottom: 7px;
  }

  .input-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 10px 0;
  }

  .input-field {
    height: 30px;
    border: none;
  }

  .button {
    font-size: 8px;
    font-weight: bold;
    padding: 8px;
    border-radius: 10px;
    border: none;
    color: #083e9e;
    background-color: white;
    width: 120px;
  }

  .button:hover {
    background-color: lightgrey;
    cursor: pointer;
  }

  .width-100 {
    width: 100%;
  }
  .mar-top25 {
    margin-top: 25px;
  }
  .mar-bot25 {
    margin-bottom: 25px;
  }

  .result-header {
    font-size: 10px;
  }

  .result-inner-container {
    height: 70px;
    padding: 10px;
    background-color: white;
    color: #083e9e;
    font-size: 20px;
  }
  .header-text {
    font-weight: 800;
    font-size: 40px;
    width: 100%;
  }
}
@media screen and (min-width: 500px) {
  #wrapper {
    display: flex;
    width: 850px;
    flex-direction: column;
    background-color: white;
    padding: 30px 35px;
  }

  #logo {
    padding: 20px 0;
  }

  #content-container {
    display: flex;
    width: auto;
  }

  #info-section {
    padding-right: 20px;
    display: flex;
    word-wrap: normal;
    width: 100%;
    flex-direction: column;
    flex: 1 1 50%;
  }

  #calculator-section {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 30px;
    flex: 1 1 25%;
    align-items: center;
    color: white;
    background-color: #083e9e;
  }

  .calculator-header {
    width: 100%;
    text-align: center;
    font-weight: 100;
    letter-spacing: 2px;
  }

  label {
    font-size: 10px;
    margin-bottom: 7px;
  }

  .input-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 10px 0;
  }

  .input-field {
    height: 30px;
    border: none;
  }

  .button {
    font-size: 8px;
    font-weight: bold;
    padding: 8px;
    border-radius: 10px;
    border: none;
    color: #083e9e;
    background-color: white;
    width: 120px;
  }

  .button:hover {
    background-color: lightgrey;
    cursor: pointer;
  }

  .width-100 {
    width: 100%;
  }
  .mar-top25 {
    margin-top: 25px;
  }
  .mar-bot25 {
    margin-bottom: 25px;
  }

  .result-header {
    font-size: 10px;
  }

  .result-inner-container {
    height: 70px;
    padding: 10px;
    background-color: white;
    color: #083e9e;
    font-size: 20px;
  }
  .header-text {
    font-weight: 800;
    font-size: 40px;
    width: 70%;
  }
}