* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
     display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  font-family: "Satoshi", sans-serif;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: background-color 0.5s ease;
  background-color: #F2F2F7;
  color: #000000;
}
body.with-background-image {
  background-image: url("background.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
body.dark-mode {
  background-color: #000000;
  color: #ffffff;
}
body.dark-mode .card {
  color: #8E8E93;
}
body.dark-mode .topbar .topbar-nav .icon-container {
  background-color: #1C1C1E;
}
body.dark-mode .topbar .topbar-nav .icon-container .clock-container #clock {
  color: #ffffff;
}
body.dark-mode .topbar .topbar-nav .icon-container svg {
  stroke: #ffffff;
  fill: #ffffff;
}
body.dark-mode .topbar .topbar-nav .user-container {
  background-color: #1C1C1E;
}
body.dark-mode .topbar .topbar-nav .user-container span {
  color: #ffffff;
}
body.dark-mode .topbar .topbar-nav .user-container svg {
  fill: #ffffff;
}
body.dark-mode .slider {
  background-color: #000000;
}
body.dark-mode .box1 {
  background-color: #1C1C1E;
  color: #ffffff;
}
body.dark-mode .box2 {
  background-color: #1C1C1E;
  color: #ffffff;
}
body.dark-mode .box2 .weather1 {
  color: #ffffff;
}
body.dark-mode .box2 .description {
  color: #ffffff;
}
body.dark-mode .box3 {
  background-color: #1C1C1E;
  color: #ffffff;
}
body.dark-mode .box4 {
  background-color: #1C1C1E;
  color: #ffffff;
}
body.dark-mode .box5 {
  background-color: #1C1C1E;
  color: #ffffff;
}
body.dark-mode .box6 {
  background-color: #1C1C1E;
  color: #ffffff;
}
body.dark-mode #section-clock {
  color: #ffffff;
}
body.dark-mode .grid-container.settings .slider:before {
  background-color: #ffffff;
}
body.dark-mode .grid-container.settings .box1 {
  background-color: #1C1C1E;
  color: #ffffff;
}
body.dark-mode .grid-container.settings .box2 {
  background-color: #1C1C1E;
  color: #ffffff;
}
body.dark-mode .grid-container.settings .box2 .settings-menu {
  color: #ffffff;
}
body.dark-mode .grid-container.settings .box2 .settings-menu .container-item {
  color: #ffffff;
}
body.dark-mode .grid-container.settings .box2 .settings-menu .container-item .item {
  color: #ffffff;
  border-bottom: #636366 solid 1px;
}
body.dark-mode .grid-container.settings .box2 .settings-menu .settings-item {
  color: #ffffff;
}
body.dark-mode .grid-container.settings .box2 .settings-menu .settings-item .item {
  color: #ffffff;
  border-bottom: #636366 solid 1px;
}
body.dark-mode .grid-container.settings .box2 .settings-menu .settings-item .item svg {
  fill: #F2F2F7;
}
body.dark-mode .grid-container.settings .box3 {
  background-color: #1C1C1E;
  color: #ffffff;
}
body.dark-mode .grid-container.clock #section-clock {
  color: #ffffff;
}
body.dark-mode .bottombar .nav-container {
  background-color: #1C1C1E;
  color: #ffffff;
}
body.dark-mode .bottombar .divider {
  background-color: #8E8E93;
}
body.dark-mode .bottombar .icon-placeholder svg {
  fill: #ffffff;
  stroke: #ffffff;
}
body.dark-mode .bottombar .icon-placeholder .nav-text {
  color: #ffffff;
}
body.dark-mode .bottombar #clock {
  color: #8E8E93;
}

.container {
  width: 800px;

}

.topbar {
    width: 800px;
  /* Style your top bar here */
  height: 80px; /* Example height */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-nav {
  gap: 8px;
  margin-left: 80px;
  display: flex;
}

.icon-container {
  width: 424px;
  display: flex;
  gap: 8px;
  background-color: #ffffff;
  padding: 8px;
  border-radius: 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.icon-container .clock-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 104px;
  width: 100px;
  gap: 8px;
}
.icon-container .clock-container #clock {
  font-size: 16px;
  color: #000000;
}
.icon-container .icon-placeholder {
  padding: 8px 12px 8px 12px;
}
.icon-container .icon-placeholder-information {
  padding: 8px 12px 8px 12px;
}
.icon-container .icon-placeholder-notification {
  padding: 8px 12px 8px 12px;
}
.icon-container .icon-placeholder-reload {
  padding: 8px 12px 8px 12px;
}

.user-container {
  width: 208px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0px;
  background-color: #ffffff;
  padding: 12px;
  border-radius: 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  color: #000000;
}
.user-container .user-image {
  width: 28px;
  height: 28px;
  background-color: #34C759;
  border-radius: 40px;
}
.user-container span {
  margin-right: 52px;
  margin-top: 1px;
}
.user-container svg {
  margin-top: 3px;
}

.section {
  display: none;
}

.section.home {
  display: block; /* or display: flex; depending on your layout */
}

.grid-container {
  height: 320px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.grid-home {
  display: grid;
  grid-template-columns: repeat(6, 100px); /* 3 columns, each 240px wide */
  grid-template-rows: repeat(3, 100px); /* 3 rows, each 120px tall */
  gap: 8px; /* Gap between the boxes */
}

.box1, .box2, .box3, .box4, .box5, .box6 {
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  border-radius: 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Specific box adjustments */
.box1 {
  grid-area: 1/1/3/3; /* Spans first 2 rows in the 1st column */
}

.box2 {
  grid-area: 3/1/4/3; /* Takes up the first column in the 3rd row */
}

.box3 {
  grid-area: 2/3/4/7; /* Spans all three rows in the 2nd and 3rd columns */
}

.box4 {
  grid-area: 1/3/2/5; /* Spans first 2 rows in the 1st column */
}

.temp {
  font-size: 30px;
}

.weather1 {
  font-size: 16px;
  text-align: center;
}

.card {
  width: 200px;
  display: flex;
  padding: 20px;
  text-align: right;
  align-items: flex-end;
}

.description {
  font-size: 12px;
}

.grid-container.clock {
  display: flex; /* Example to ensure it's visible when active */
  justify-content: center; /* Centers the content horizontally */
  align-items: center; /* Centers the content vertically */
}
.grid-container.clock #section-clock {
  font-size: 80px;
  color: #000000;
}

.grid-container.settings {
  /* Toggle switch styling */
  /* Specific box adjustments */
  /* Rounded sliders */
}
.grid-container.settings .grid-settings {
  display: grid;
  grid-template-columns: repeat(6, 100px); /* 3 columns, each 240px wide */
  grid-template-rows: repeat(3, 100px); /* 3 rows, each 120px tall */
  gap: 8px; /* Gap between the boxes */
}
.grid-container.settings .box1, .grid-container.settings .box2, .grid-container.settings .box3 {
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000000;
  border-radius: 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.grid-container.settings .box1 {
  grid-area: 1/1/2/4; /* Spans first 2 rows in the 1st column */
}
.grid-container.settings .box2 {
  grid-area: 2/1/4/4; /* Takes up the first column in the 3rd row */
}
.grid-container.settings .box2 .settings-header {
  display: flex;
  align-items: center;
  padding: 10px;
}
.grid-container.settings .box2 .back-arrow {
  cursor: pointer;
  margin-right: 10px;
  /* Additional styling */
}
.grid-container.settings .box2 .settings-content {
  width: 100%;
}
.grid-container.settings .box2 .settings-menu {
  padding: 0 0px 0 16px;
  height: 200px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 3 columns, each 240px wide */
  grid-template-rows: repeat(6, 30px); /* 3 rows, each 120px tall */
  gap: 4px;
}
.grid-container.settings .box2 .settings-menu .settings-item, .grid-container.settings .box2 .settings-menu .container-item {
  gap: 16px;
  display: flex;
}
.grid-container.settings .box2 .settings-menu .item-icon {
  margin-top: 2px;
  fill: #007AFF;
  width: 24px;
}
.grid-container.settings .box2 .settings-menu .notification-icon {
  margin-top: 2px;
  fill: #FF3B30;
  width: 24px;
}
.grid-container.settings .box2 .settings-menu .light-icon {
  margin-top: 2px;
  fill: #007AFF;
  width: 24px;
}
.grid-container.settings .box2 .settings-menu .location-icon {
  margin-top: 2px;
  fill: #007AFF;
  width: 24px;
}
.grid-container.settings .box2 .settings-menu .item {
  padding-right: 8px;
  width: 100%;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000000;
  height: 32px;
  border-bottom: #F2F2F7 solid 1px;
}
.grid-container.settings .box2 .settings-menu .item svg {
  fill: #636366;
}
.grid-container.settings .box2 .settings-menu #item1 {
  justify-content: space-between;
}
.grid-container.settings .box2 .settings-menu #notificationsItem, .grid-container.settings .box2 .settings-menu #locationItem {
  justify-content: space-between;
}
.grid-container.settings .box2 .settings-view {
  display: none; /* Hide all settings views by default */
}
.grid-container.settings .box2 .back-button {
  cursor: pointer;
  display: none; /* Hidden by default */
  /* Add more styling as needed */
}
.grid-container.settings .box3 {
  grid-area: 1/4/4/7; /* Spans all three rows in the 2nd and 3rd columns */
}
.grid-container.settings .switch {
  margin: 4px;
  position: relative;
  display: inline-block;
  width: 42px;
  height: 25px;
}
.grid-container.settings .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.grid-container.settings .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #8E8E93;
  transition: 0.4s;
}
.grid-container.settings .slider:before {
  position: absolute;
  content: "";
  height: 21px;
  width: 21px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  transition: 0.4s;
}
.grid-container.settings input:checked + .slider {
  background-color: #007AFF;
}
.grid-container.settings input:checked + .slider:before {
  transform: translateX(17px);
}
.grid-container.settings .slider.round {
  border-radius: 34px;
}
.grid-container.settings .slider.round:before {
  border-radius: 50%;
}

.bottombar {
  /* Style your bottom bar here */
  height: 80px; /* Example height */
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottombar .nav-container {
  padding: 8px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff; /* Light mode color */
  color: #000000; /* Light mode text color */
  border-radius: 40px; /* Adjust as needed for rounded ends */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
  width: 80%; /* Adjust width as needed */
  max-width: 300px; /* Maximum width */
  box-sizing: border-box;
}
.bottombar .icon-placeholder {
  display: flex;
  flex-direction: row; /* Align items in a row */
  align-items: center;
  justify-content: flex-start; /* Align items to the start of the container */
  transition: all 0.3s ease; /* Smooth transition for all properties */
  padding: 8px 16px 8px 16px;
  white-space: nowrap; /* Ensure text does not wrap */
  overflow: hidden; /* Hide overflow */
  border-radius: 40px;
}
.bottombar .divider {
  height: 26px;
  width: 1px;
  background-color: #636366;
  margin: 0px 4px 0px 4px;
}
.bottombar .icon-placeholder:hover {
  color: #ffffff;
}
.bottombar .icon-active {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
}
.bottombar .nav-text {
  display: block; /* Use block for transition effects */
  opacity: 0; /* Start with the text fully transparent */
  transform: translateX(-100%); /* Start the text off to the left */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for opacity and transform */
  white-space: nowrap; /* Ensure text does not wrap */
  overflow: hidden; /* Hide overflow */
  max-width: 0; /* Start with max-width at 0 */
}
.bottombar .icon-placeholder.active .nav-text {
  margin-left: 8px;
  opacity: 1; /* Make text fully visible */
  transform: translateX(0); /* Move text to its final position */
  max-width: 160px; /* Set max-width to the maximum width of the text */
}
.bottombar .icon-placeholder.active {
  flex-grow: 1;
  background-color: #007AFF; /* Button-like background when active */
  /* Add other styling as needed */
}/*# sourceMappingURL=style.css.map */