@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
  --primary-color: #4685ff;
  --secondary-color: #757575;
  /* --bg-color: #f5f8fe; */
  --bg-color: hsl(220, 82%, 99%);
  --container-color: #cfdeff;

  /* --nav-bg-color: #e5e9f1; */
  --nav-bg-color: hsl(220, 82%, 96%);
  --nav-text-color: #0b1323;

  --text-color: #0b1323;
  --text-color-lighter: hsl(220, 10%, 30%);

  --button-bg-color: #0b1323;
  --button-color: #fff;
}
body.dark-mode {
  --primary-color: #4685ff;
  --secondary-color: #757575;
  --bg-color: #060e1e;
  --container-color: #121929;
  --text-color: #ecf2fe;
  --text-color-lighter: #ecf2fe;

  --nav-bg-color: #121929;
  --nav-text-color: #fff;

  --button-bg-color: #fff;
  --button-color: #121929;
}

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

body {
  font-family: "Poppins", Inconsolata, "monospace", "sans-serif", "serif";
  background-color: var(--bg-color);
  color: var(--text-color-lighter);
  text-align: justify;
}

/* Default Styling */
a {
  text-decoration: none;
  color: inherit;
}

input,
select {
  outline: none;
  border: 0;
}

button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

h1 {
  font-size: 1.85rem;
}

h2 {
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
}

/* Navbar Styling */
.navbar {
  padding: 1.2rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--nav-bg-color);
}
.navbar ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-weight: 500;
}
.navbar ul li:hover {
  opacity: 0.8;
}
.navbar .navbar-logo {
  height: 2.2rem;
}
#darkModeToggle {
  padding: 0.6rem 0.8rem;
  border-radius: 4rem;
  background-color: var(--button-bg-color);
  color: var(--button-color);
}

/* Title */
.title {
  margin: 0 3rem 2rem 3rem;
}

/* Main Styling */
.wrapper {
  max-width: 1100px;
  margin: 3rem auto;
}
#container {
  background-color: var(--container-color);
  padding: 2rem;
  border-radius: 12px;
  margin: 0 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Slab size and Load on Slab styling */
.col-2-container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.col-2-group {
  flex: 0.8;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.label-container {
  min-width: 65px;
}
.input-container {
  flex-shrink: 1;
  min-width: 160px;
}
.input-container input {
  width: 100%;
  font-size: 1.125rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.load-label-container {
  flex: 1;
}

/* .col-2-group > div {
  flex: 0 1 65px;
  width: 65px;
}
.col-2-group input {
  flex: 0 1 100px;
  min-width: 100px;
  font-size: 1.125rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
} */
.col-2-group label {
  color: var(--text-color-lighter);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.col-2-group input:focus {
  outline: 1px solid var(--primary-color);
}

.col-2-group label[for="IL"] > div,
.col-2-group label[for="DL"] > div {
  font-size: 0.8rem;
}

/* @media (max-width: ) {
} */

/* Grade Section */
.grade-groups {
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.grade-group {
  flex: 1 0 120px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.grade-group > p {
  width: 30px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-color-lighter);
}
select {
  font-size: 1.125rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
}
.grade-group > select:focus {
  outline: 1px solid var(--primary-color);
}

/* Exposure Section */
.col-1-select {
  width: 70%;
}

@media (max-width: 50rem) {
  .col-1-select {
    width: 100%;
  }

  #container {
    margin: 0 1.5rem;
  }
  .title {
    margin: 0 1.5rem 2rem 1.5rem;
  }
}

#button_check {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 0.5rem;
}
.btn {
  /* width: 100%; */
  /* flex: 1 1 10%; */
  padding: 16px 32px;
  border-radius: 0.25rem;
  font-weight: 500;
  color: var(--button-color);
  cursor: pointer;
}
.btn-secondary {
  background-color: var(--text-color);
}
.btn-secondary:hover {
  opacity: 0.8;
}
.btn-primary {
  background-color: var(--primary-color);
}
.btn-primary:hover {
  opacity: 0.8;
}

.mb-1 {
  margin-bottom: 0.8rem;
}

/* For mobile devices */
@media (max-width: 40.5rem) {
  h1 {
    font-size: 1.6rem;
  }
}

#results {
  margin-top: 2rem;
}
#results h2 {
  margin-bottom: 0rem;
}
#short_span p,
#long_span p,
#optimum_depth p {
  font-weight: 600;
}
#short_span span,
#long_span span,
#optimum_depth span {
  color: var(--primary-color);
  color: hsl(220, 70%, 50%);
  font-weight: 700;
}
#optimum_depth {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}
/* 
#optimum_depth span {
  color: var(--primary-color);
  color: hsl(220, 70%, 50%);
  font-weight: 700;
} */

.span_container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
#short_span,
#long_span {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.remarks
{
  color: red;
}

/* #optimum_depth {
}
#slab_design {
} */

/* For mobile phones: */
/* @media only screen and (max-width: 300px) {
  body {
    font-size: 64px;
  }

  .table td,
  .table th,
  .table2 td,
  .table2 th,
  .table3 td,
  .table3 th,
  select,
  button,
  h4,
  h3,
  td,
  option,
  input,
  label {
    font-size: 64px;
  }

  nav ul {
    flex-direction: column;
    align-items: center;
    padding: 0;
  }
  nav li {
    padding: 10px;
  }
  .navbar-logo {
    max-height: 20px;
  }
}

@media only screen and (min-width: 300px) and (max-width: 600px) {
  body,
  table {
    font-size: 64px;
  }
  .table td,
  .table th,
  .table2 td,
  .table2 th,
  .table3 td,
  .table3 th,
  select,
  button,
  h4,
  h3,
  td,
  option,
  input,
  label {
    font-size: 64px;
  }
  nav ul {
    flex-direction: column;
    align-items: center;
    padding: 0;
  }
  nav li {
    padding: 15px;
  }
  .navbar-logo {
    max-height: 25px;
  }
}

@media only screen and (min-width: 600px) and (max-width: 768px) {
  body {
    font-size: 32px;
  }
  .table td,
  .table th,
  .table2 td,
  .table2 th,
  .table3 td,
  .table3 th,
  select,
  button,
  h4,
  h3,
  td,
  option,
  input,
  label {
    font-size: 32px;
  }
  nav ul {
    flex-direction: row;
    justify-content: space-around;
  }
  nav li {
    padding: 20px;
  }
  .navbar-logo {
    max-height: 46px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  body {
    font-size: 25px;
  }
  .table td,
  .table th,
  .table2 td,
  .table2 th,
  .table3 td,
  .table3 th,
  select,
  button,
  h4,
  h3,
  td,
  option,
  input,
  label {
    font-size: 25px;
  }
  nav ul {
    flex-direction: row;
    justify-content: space-around;
  }
  nav li {
    padding: 25px;
  }
  .navbar-logo {
    max-height: 60px;
  }
}

@media only screen and (min-width: 992px) {
  body {
    font-size: 20px;
  }
  .table td,
  .table th,
  .table2 td,
  .table2 th,
  .table3 td,
  .table3 th,
  select,
  button,
  h4,
  h3,
  td,
  option,
  input,
  label {
    font-size: 20px;
  }
  nav ul {
    flex-direction: row;
    justify-content: space-between;
  }
  nav li {
    padding: 30px;
  }
  .navbar-logo {
    max-height: 60px;
  }
}

.navbar-logo {
  height: 100%;
  This will maintain the aspect ratio of the image while fitting it into the navbar
  object-fit: contain;
} */