:root {
  --text-color: #000;
  --link-color: #333;
  --footer-color: #fff;
  --background-nav-color: #fff;
  --background-body-color: #f2f2f2;
  --background-footer-color: #222;
  --link-color-hover: #000;
  --footer-color-hover:#ccc;
}

.dark-mode {
  --text-color: #fff;
  --link-color: #ccc;
  --footer-color: #000;
  --background-nav-color: #000;
  --background-body-color: #222;
  --background-footer-color: #ccc;
  --link-color-hover: #fff;
  --footer-color-hover:#27558f;
}

/* Reset Styles */
* {
  margin: 0;
  padding: 0;
}

/* Global Styles */
body {
  font-family: 'Segoe UI', sans-serif;
  /* font-size: 16px; */
  line-height: 1.8;
  /* background-color: #f2f2f2; */
  /* height: calc(100vh - 250px); */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--text-color);
  background-color: var(--background-body-color);
  transition: background-color 1s ease, color 1s ease;
}

a {
  color: var(--link-color);
  transition: background-color 1s ease, color 1s ease;
  text-decoration: none;
}

a:hover {
  color: var(--link-color-hover);
  transition: background-color 1s ease, color 1s ease;

}

/* Main content and sidebar container styles */
.container {
  display: flex;
  flex-wrap: wrap;
  max-width: 80vw;
  margin: 0 auto;
  padding: 0 20px;
  /* height: calc(100vh - 250px); */
}

/* Media query for 1400px */
@media (max-width: 1400px) {
  .container {
    max-width: 85vw;
    /* padding: 0 0px; */
  }
}

/* Media query for 1210px */
@media (max-width: 1210px) {
  .container {
    max-width: 90vw;
    /* padding: 0 0px; */
  }
}

/* Media query for 1060px*/
@media (max-width: 1060px) {
  .container {
    max-width: 95vw;
  }
}

/* Media query for 980px*/
@media (max-width: 980px) {
  .container {
    max-width: 100vw;
  }
}