html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.weather-status-img {
    position: absolute;
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 0;
    z-index: -100;
}

.main-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    position: absolute;
    top: 4%;
    bottom: 4%;
    left: 2%;
    right: 2%;
}

.sub-container {
    background-color: white;
    opacity: 70%;
    flex: 0 0 49%;
    height: 49%;
}

.info-container {
    background-color: darkcyan;
    height: 80%;
    border: 3px solid black;
    display: flex;
    flex-direction: column;
}

.main-info {
    margin: 0;
    flex: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: clamp(32px, 2.17vw, 120px);
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    color: white;
    text-shadow: -4px 0 black, 0 4px black, 4px 0 black, 0 -4px black, -3px -3px black, 3px 3px black, -3px 3px black, 3px -3px black;
}

.info-name {
    margin: 0;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: clamp(18px, 1.33vw, 32px);
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    color: white;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black, -2px -2px black, 2px 2px black, -2px 2px black, 2px -2px black;
}

.title {
    height: 10%;
    font-size: clamp(24px, 1.75vw, 90px);
    margin-top: 1%;
    justify-content: center;
    text-shadow: -4px 0 black, 0 4px black, 4px 0 black, 0 -4px black, -3px -3px black, 3px 3px black, -3px 3px black, 3px -3px black;
}

.title, .subtitle, .temp-text, .sub-temp-text, .weather-info {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
}

.subtitle {
    font-size: clamp(18px, 1.33vw, 60px);
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black, -2px -2px black, 2px 2px black, -2px 2px black, 2px -2px black;
    margin-left: 1%;
}

.time-div {
    margin-top: 2%;
    flex: 1;
}

.temp-text {
    margin-left: 1%;
    font-size: clamp(32px, 2.17vw, 120px);
    text-shadow: -4px 0 black, 0 4px black, 4px 0 black, 0 -4px black, -3px -3px black, 3px 3px black, -3px 3px black, 3px -3px black;
}

.sub-temp-text {
    margin-left: 1%;
    font-size: clamp(18px, 1.33vw, 60px);
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black, -2px -2px black, 2px 2px black, -2px 2px black, 2px -2px black;
}

.weather-div {
    flex: 2;
}

.weather-info {
    margin-left: 1%;
    font-size: clamp(18px, 1.33vw, 60px);
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black, -2px -2px black, 2px 2px black, -2px 2px black, 2px -2px black;
}