@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
  box-sizing: border-box;
}

@media screen and (max-width: 720px) {
  :root {
    --content-width: 100%;
    --header-height: 35.5vw;
    --logo-font: 10vw;
    --input-height: 10vw;
    --input-margin: 4vw;
    --input-font-size: 4vw;
    /* --cooling-unit-radius: 1.25vw;
    --temperature-width: 16vw;
    --temperature-margin: 1vw;
    --temperature-radius: 8vw;
    --temperature-border: .5vw;
    --temperature-font-size: 4vw;
    --img-width: 7.5vw; */
  }
}

@media screen and (min-width: 721px) {
  :root {
    --content-width: 720px;
    --header-height: 255.6px;
    --logo-font: 72px;
    --input-height: 72px;
    --input-margin: 28.8px;
    --input-font-size: 28.8px;
    /* --cooling-unit-radius: 9px;
    --temperature-width: 115.2px;
    --temperature-margin: 7.2px;
    --temperature-radius: 57.6px;
    --temperature-border: 3.6px;
    --temperature-font-size: 28.8px;
    --img-width: 54px; */
  }
}

body {
  display: flex;
  justify-content: center;
  background-color: #073a69;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: var(--content-width);
  align-items: center;
}

header {
  display: flex;
  width: 100%;
  height: var(--header-height);
  align-items: center;
  justify-content: center;
}

.logo {
  position: relative;
  width: fit-content;
  margin-top: -1.50px;
  font-family: "Exo-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: var(--logo-font);
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
}

input {
  width: 100%;
  height: var(--input-height);
  margin-bottom: var(--input-margin);
  font-size: var(--input-font-size);
}