@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@theme inline {
    --font-sans: Instrument Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.page-container {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.4fr 0.6fr;
  gap: 2em 0em;
  grid-auto-flow: row;
  grid-template-areas:
    "currentForecast"
    "weeklyReport";
}

.currentForecast {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "forecast secondaryInfo";
  grid-area: currentForecast;
}

.forecast {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "shortDescription"
    "longDescription"
    "currentTemp";
  grid-area: forecast;
}

.shortDescription { grid-area: shortDescription; }

.longDescription { grid-area: longDescription; }

.currentTemp { grid-area: currentTemp; }

.secondaryInfo {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "windContainer"
    "solarClock";
  grid-area: secondaryInfo;
}

.windContainer { grid-area: windContainer; }

.solarClock { grid-area: solarClock; }

.weeklyReport {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . .";
  grid-area: weeklyReport;
}