/* ========================================
   RESET
   ======================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;
}


/* ========================================
   BODY
   ======================================== */

body {

  overflow: hidden;

  font-family: Arial, Helvetica, sans-serif;

  color: #06466a;

  background: #078dcc;
}


/* ========================================
   MAIN SCREEN
   ======================================== */

.screen {

  position: relative;

  width: 100vw;
  height: 100vh;

  padding: 28px 38px;

  background:

    radial-gradient(
      circle at 82% 8%,
      rgba(255,255,255,0.25),
      transparent 18%
    ),

    linear-gradient(
      180deg,
      #20b5ed 0%,
      #079bd8 48%,
      #0784bf 100%
    );
}


/* ========================================
   HEADER
   ======================================== */

header {

  position: absolute;

  top: 28px;
  left: 38px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


/* ========================================
   BRAND
   ======================================== */

.brand {

  color: white;

  font-size: clamp(32px, 5vw, 68px);

  font-weight: bold;

  line-height: 0.9;

  letter-spacing: -4px;

  text-shadow:
    0 2px 0 rgba(0,70,115,0.25);
}


/* ========================================
   WEATHER REPORT LABEL
   ======================================== */

.header-info {

  margin-top: 10px;

  color: white;

  font-size: 10px;

  letter-spacing: 2.5px;

  opacity: 0.9;
}


/* ========================================
   CURRENT WEATHER — TOP RIGHT
   ======================================== */

.current {

  position: fixed;

  top: 28px;
  right: 38px;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  text-align: right;
}


/* TEMPERATURE */

.temperature {

  color: white;

  font-size: clamp(45px, 5vw, 72px);

  line-height: 0.9;

  font-weight: bold;

  letter-spacing: -4px;

  text-shadow:

    0 2px 0 rgba(255,255,255,0.25),

    0 4px 8px rgba(0,65,110,0.25);
}


/* CONDITION */

.condition {

  margin-top: 5px;

  color: white;

  font-size: 9px;

  letter-spacing: 2px;
}


/* LOCATION + TODAY */

.weather-right {

  margin-top: 9px;

  display: flex;

  align-items: center;

  color: white;

  font-size: 10px;

  letter-spacing: 1.5px;
}


/* DOT */

.location::after {

  content: "•";

  margin-left: 8px;
  margin-right: 8px;

  opacity: 0.65;
}


/* ========================================
   CENTER NAVIGATION
   ======================================== */

.forecast {

  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  display: grid;

  grid-template-columns:
    repeat(4, 205px);

  gap: 18px;

  justify-content: center;

  align-items: center;
}


/* ========================================
   NAVIGATION CELLS
   ======================================== */

.card {

  position: relative;

  width: 205px;
  height: 380px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 17px;

  text-decoration: none;

  color: #06466a;

  background: #159dcc;

  border: 1px solid #8de3f5;

  border-radius: 18px;

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,0.4),

    0 3px 0 #006eaa,

    0 8px 16px rgba(0,65,105,0.22);

  overflow: hidden;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


/* ========================================
   INDIVIDUAL CELL COLORS
   ======================================== */

.card:nth-child(1) {
  background: #159dcc;
}

.card:nth-child(2) {
  background: #0b91c4;
}

.card:nth-child(3) {
  background: #1ba5d0;
}

.card:nth-child(4) {
  background: #078abf;
}


/* ========================================
   CELL GLOSS
   ======================================== */

.card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 42%;

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,0.20),
      rgba(255,255,255,0)
    );

  pointer-events: none;
}


/* ========================================
   HOVER
   ======================================== */

.card:hover {

  transform: translateY(-5px);

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,0.5),

    0 5px 0 #006eaa,

    0 12px 22px rgba(0,65,105,0.3);
}


/* ========================================
   CELL TEXT
   ======================================== */

.card-top,
.card-bottom {

  position: relative;

  z-index: 2;

  display: flex;

  justify-content: space-between;

  font-size: 10px;

  letter-spacing: 2px;

  color: #063f60;
}


/* ========================================
   WEATHER SYMBOL
   ======================================== */

.weather-symbol {

  position: relative;

  z-index: 2;

  margin: auto 0;

  text-align: center;

  font-size: clamp(50px, 5vw, 80px);

  color: #d9f8ff;

  text-shadow:

    0 2px 0 #087ba8,

    0 3px 6px rgba(0,60,100,0.25);
}


/* ========================================
   CELL TITLE
   ======================================== */

.card-title {

  position: relative;

  z-index: 2;

  margin-bottom: 14px;

  color: #e0faff;

  font-size: clamp(25px, 2.7vw, 45px);

  font-weight: bold;

  letter-spacing: -2px;

  text-shadow:
    0 2px 0 #087ba8;
}


/* ========================================
   FOOTER
   ======================================== */

footer {

  position: fixed;

  left: 38px;
  right: 38px;
  bottom: 28px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: white;

  font-size: 10px;

  letter-spacing: 2px;

  text-shadow:
    0 1px 2px rgba(0,50,90,0.3);
}


/* ========================================
   LOCAL TIME
   ======================================== */

.local-time {

  display: flex;

  align-items: center;

  gap: 14px;
}


.local-label {

  opacity: 0.8;
}


#local-time {

  min-width: 65px;

  text-align: left;
}


/* ========================================
   COPYRIGHT
   ======================================== */

.copyright {

  text-align: right;
}


/* ========================================
   TABLET
   ======================================== */

@media (max-width: 950px) {

  body {
    overflow: auto;
  }

  .screen {

    width: 100%;

    min-height: 100vh;

    height: auto;

    padding: 20px;
  }


  header {

    top: 20px;
    left: 20px;
  }


  .current {

    top: 20px;
    right: 20px;
  }


  .forecast {

    position: relative;

    top: auto;
    left: auto;

    transform: none;

    margin: 220px auto 80px;

    grid-template-columns:
      repeat(2, 205px);
  }


  footer {

    position: relative;

    left: auto;
    right: auto;
    bottom: auto;

    margin-top: 30px;
  }
}


/* ========================================
   PHONE
   ======================================== */

@media (max-width: 500px) {

  .forecast {

    grid-template-columns: 1fr;

    width: 100%;
  }


  .card {

    width: 100%;

    height: 300px;
  }


  .current {

    top: 20px;
    right: 20px;
  }


  .temperature {

    font-size: 45px;
  }


  footer {

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
  }


  .copyright {

    text-align: left;
  }

}