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

html {
  height: 100%;
}

body {
  font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
  line-height: 1.5;
  font-size: 1.1em;
  font-weight: 400;
  width: max(100%, 30rem);
  background-color: #333;
  color: #F1F1F1;
}
body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.5em;
}
body h1 {
  font-size: clamp(2rem, 2rem + (3rem - 2rem) * (100vw - 320px) / (1280px - 320px), 3rem);
}
body h2 {
  font-size: clamp(1.75rem, 1.75rem + (2.5rem - 1.75rem) * (100vw - 320px) / (1280px - 320px), 2.5rem);
}
body h3 {
  font-size: clamp(1.5rem, 1.5rem + (2rem - 1.5rem) * (100vw - 320px) / (1280px - 320px), 2rem);
}
body h4 {
  font-size: clamp(1.25rem, 1.25rem + (1.75rem - 1.25rem) * (100vw - 320px) / (1280px - 320px), 1.75rem);
}
body h5 {
  font-size: clamp(1.125rem, 1.125rem + (1.5rem - 1.125rem) * (100vw - 320px) / (1280px - 320px), 1.5rem);
}
body h6 {
  font-size: clamp(1rem, 1rem + (1.25rem - 1rem) * (100vw - 320px) / (1280px - 320px), 1.25rem);
}

@media only screen and (max-width: 48rem) {
  body {
    font-size: 0.85rem;
  }
}
body header {
  background-color: seagreen;
  color: #F1F1F1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body header .header-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  margin: 0 auto;
}
body header .header-container nav {
  font-size: inherit;
  font-weight: 500;
}
body header .header-container nav ul {
  list-style: none;
  padding: 0.25rem;
}
body header .header-container nav li {
  padding: 0 0.3125rem;
  display: inline-block;
  text-align: center;
}
@media only screen and (max-width: 48rem) {
  body header .header-container nav ul {
    background-color: rgba(255, 255, 255, 0.1);
  }
}
body header .header-container a {
  text-decoration: none;
  color: #eee;
  transition: color 0.2s ease;
}
body header .header-container a:link, body header .header-container a:visited {
  color: #eee;
}
body header .header-container a:hover, body header .header-container a:active {
  color: #eee;
}
@media only screen and (max-width: 48rem) {
  body header .header-container {
    flex-direction: column;
    justify-content: center;
  }
}
body main {
  background-color: inherit;
  color: inherit;
  width: min(80ch, 100% - 1.1em);
  margin: 2rem auto;
  padding: 0 1rem;
  text-align: center;
}
body main .file-input-label, body main button, body main input[type=reset], body main input[type=submit], body main a.button-info, body main a.button-warning, body main a.button-success, body main a.button-secondary, body main a.button-primary, body main a.button-danger, body main select,
body main textarea,
body main input[type=number],
body main input[type=text],
body main input[type=url],
body main input[type=password],
body main input[type=email],
body main input[type=tel],
body main input[type=search],
body main input[type=date],
body main input[type=month],
body main input[type=week],
body main input[type=time],
body main input[type=datetime-local] {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 0.3125rem;
  outline: none;
  line-height: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  text-align: center;
  padding: 0.25rem 0.75rem;
  margin: 0.5rem 0.25rem;
}
body main select,
body main textarea,
body main input[type=number],
body main input[type=text],
body main input[type=url],
body main input[type=password],
body main input[type=email],
body main input[type=tel],
body main input[type=search],
body main input[type=date],
body main input[type=month],
body main input[type=week],
body main input[type=time],
body main input[type=datetime-local] {
  border: 0.0625rem solid #555;
}
body main select {
  cursor: pointer;
}
body main textarea {
  width: 95%;
}
body main input[type=number] {
  width: 7.8125rem;
}
body main a.button-danger {
  text-decoration: none !important;
}
body main a.button-danger,
body main button.button-danger,
body main input[type=reset].button-danger,
body main input[type=submit].button-danger {
  cursor: pointer;
  border: none;
  color: #F1F1F1 !important;
  background: linear-gradient(135deg, #DC3545, rgb(194.5, 53, 66.5568862275));
  box-shadow: 1px 1px #999;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
body main a.button-danger:hover,
body main button.button-danger:hover,
body main input[type=reset].button-danger:hover,
body main input[type=submit].button-danger:hover {
  background: rgb(221.75, 63.1, 78.3);
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
body main a.button-danger:active,
body main button.button-danger:active,
body main input[type=reset].button-danger:active,
body main input[type=submit].button-danger:active {
  background: linear-gradient(135deg, rgb(194.5, 53, 66.5568862275), rgb(169, 53, 64.1137724551));
  transform: scale(0.99);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}
body main a.button-primary {
  text-decoration: none !important;
}
body main a.button-primary,
body main button.button-primary,
body main input[type=reset].button-primary,
body main input[type=submit].button-primary {
  cursor: pointer;
  border: none;
  color: #F1F1F1 !important;
  background: linear-gradient(135deg, #007BFF, rgb(0, 110.7, 229.5));
  box-shadow: 1px 1px #999;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
body main a.button-primary:hover,
body main button.button-primary:hover,
body main input[type=reset].button-primary:hover,
body main input[type=submit].button-primary:hover {
  background: rgb(12.75, 129.6, 255);
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
body main a.button-primary:active,
body main button.button-primary:active,
body main input[type=reset].button-primary:active,
body main input[type=submit].button-primary:active {
  background: linear-gradient(135deg, rgb(0, 110.7, 229.5), rgb(0, 98.4, 204));
  transform: scale(0.99);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}
body main a.button-secondary {
  text-decoration: none !important;
}
body main a.button-secondary,
body main button.button-secondary,
body main input[type=reset].button-secondary,
body main input[type=submit].button-secondary {
  cursor: pointer;
  border: none;
  color: #F1F1F1 !important;
  background: linear-gradient(135deg, #6C757D, rgb(104.5161290323, 104.5161290323, 104.5161290323));
  box-shadow: 1px 1px #999;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
body main a.button-secondary:hover,
body main button.button-secondary:hover,
body main input[type=reset].button-secondary:hover,
body main input[type=submit].button-secondary:hover {
  background: rgb(114.4197424893, 123.95472103, 132.4302575107);
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
body main a.button-secondary:active,
body main button.button-secondary:active,
body main input[type=reset].button-secondary:active,
body main input[type=submit].button-secondary:active {
  background: linear-gradient(135deg, rgb(104.5161290323, 104.5161290323, 104.5161290323), rgb(95.0146627566, 95.0146627566, 95.0146627566));
  transform: scale(0.99);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}
body main a.button-success {
  text-decoration: none !important;
}
body main a.button-success,
body main button.button-success,
body main input[type=reset].button-success,
body main input[type=submit].button-success {
  cursor: pointer;
  border: none;
  color: #F1F1F1 !important;
  background: linear-gradient(135deg, #28A745, rgb(40, 141.5, 63.1771653543));
  box-shadow: 1px 1px #999;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
body main a.button-success:hover,
body main button.button-success:hover,
body main input[type=reset].button-success:hover,
body main input[type=submit].button-success:hover {
  background: rgb(42.9275362319, 179.2224637681, 74.05);
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
body main a.button-success:active,
body main button.button-success:active,
body main input[type=reset].button-success:active,
body main input[type=submit].button-success:active {
  background: linear-gradient(135deg, rgb(40, 141.5, 63.1771653543), rgb(40, 116, 57.3543307087));
  transform: scale(0.99);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}
body main a.button-warning {
  text-decoration: none !important;
}
body main a.button-warning,
body main button.button-warning,
body main input[type=reset].button-warning,
body main input[type=submit].button-warning {
  cursor: pointer;
  border: none;
  color: #F1F1F1 !important;
  background: linear-gradient(135deg, #E3714E, rgb(201.5, 107.0100671141, 78));
  box-shadow: 1px 1px #999;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
body main a.button-warning:hover,
body main button.button-warning:hover,
body main input[type=reset].button-warning:hover,
body main input[type=submit].button-warning:hover {
  background: rgb(228.4, 120.1, 86.85);
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
body main a.button-warning:active,
body main button.button-warning:active,
body main input[type=reset].button-warning:active,
body main input[type=submit].button-warning:active {
  background: linear-gradient(135deg, rgb(201.5, 107.0100671141, 78), rgb(176, 101.0201342282, 78));
  transform: scale(0.99);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}
body main a.button-info {
  text-decoration: none !important;
}
body main a.button-info,
body main button.button-info,
body main input[type=reset].button-info,
body main input[type=submit].button-info {
  cursor: pointer;
  border: none;
  color: #F1F1F1 !important;
  background: linear-gradient(135deg, #17A2B8, rgb(23, 139.9844720497, 158.5));
  box-shadow: 1px 1px #999;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
body main a.button-info:hover,
body main button.button-info:hover,
body main input[type=reset].button-info:hover,
body main input[type=submit].button-info:hover {
  background: rgb(24.6833333333, 173.8565217391, 197.4666666667);
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
body main a.button-info:active,
body main button.button-info:active,
body main input[type=reset].button-info:active,
body main input[type=submit].button-info:active {
  background: linear-gradient(135deg, rgb(23, 139.9844720497, 158.5), rgb(23, 117.9689440994, 133));
  transform: scale(0.99);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}
body main button:disabled, body main input[type=reset]:disabled, body main input[type=submit]:disabled {
  opacity: 50%;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(40%);
}
body main .file-input-label {
  position: relative;
  border: 0.0625rem solid #555;
  cursor: pointer;
  border: none;
  color: #F1F1F1 !important;
  background: linear-gradient(135deg, rgb(36, 181, 36), rgb(36, 155.5, 36));
  box-shadow: 1px 1px #999;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
body main .file-input-label:hover {
  background: rgb(38.4304147465, 193.2195852535, 38.4304147465);
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
body main .file-input-label:active {
  background: linear-gradient(135deg, rgb(36, 155.5, 36), #248224);
  transform: scale(0.99);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}
body main .file-input-label input[type=file] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
}
body main input[type=range],
body main input[type=checkbox],
body main input[type=radio],
body main input[type=color] {
  cursor: pointer;
}
body main input[type=checkbox],
body main input[type=radio] {
  accent-color: darkcyan;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.3rem;
  vertical-align: middle;
}
body main input[type=color] {
  background: none;
  appearance: auto;
  -moz-appearance: none;
  -webkit-appearance: none;
  inline-size: 3.125rem;
  block-size: 2rem;
  box-sizing: border-box;
  border: 0.0625rem solid #555;
}
body main form {
  margin: 0 auto;
}
body main form fieldset {
  padding: 0.3125rem 1.5625rem;
  border-radius: 0.3125rem;
  border: 0.0625rem solid lightseagreen;
}
body main form fieldset legend {
  color: mediumaquamarine;
  font-size: x-large;
  font-weight: bold;
  font-style: italic;
  text-align: left;
  padding-inline: 0.3125rem;
}
body main form fieldset label {
  font-size: large;
  font-weight: bold;
}
body main p {
  font-size: inherit;
  font-weight: inherit;
  margin: 0.75rem 0;
}
body main strong {
  font-weight: bold;
}
body main em {
  font-style: italic;
}
body main abbr[title] {
  text-decoration: none !important;
}
body main figcaption {
  font-size: small;
  font-weight: normal;
  font-style: italic;
}
body main a {
  text-decoration: none;
  color: #cdc;
  transition: color 0.2s ease;
}
body main a:link, body main a:visited {
  color: #cdc;
}
body main a:hover, body main a:active {
  color: #efe;
}
body main h1 {
  color: mediumseagreen;
}
body main h2 {
  color: lightseagreen;
}
body footer {
  background-color: seagreen;
  color: #F1F1F1;
  font-size: inherit;
  text-align: center;
  padding: 0.3125rem 0;
}
body footer a {
  text-decoration: none;
  color: #eee;
  transition: color 0.2s ease;
}
body footer a:link, body footer a:visited {
  color: #eee;
}
body footer a:hover, body footer a:active {
  color: #eee;
}
body .project-card {
  border-inline: 0.15rem solid mediumseagreen;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin: 1em 0;
  transition: box-shadow 0.3s ease;
}
body .project-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
body #numberGuessingGameContainer {
  text-align: center;
  display: block;
  border: solid medium teal;
  border-radius: 0.5rem;
  width: min(450px, 100%);
  margin: auto;
  padding: 10px 15px;
}
@media screen and (max-width: 500px) {
  body #numberGuessingGameContainer {
    flex: 100%;
    max-width: 100%;
  }
}
body #cat_container {
  text-align: center;
}
body #catDisplay {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
}
body #catHeading {
  color: darkorange;
}
body .splide {
  margin: auto;
  width: 95%;
}
body .weather-display {
  background-color: rgba(46, 139, 87, 0.55);
  color: #353;
  border: solid thin mediumseagreen;
  padding: 8px;
  margin: auto;
  text-align: center;
  font-weight: 500;
  outline: none;
  border-radius: 8px;
  overflow: hidden;
}
body .weather-display .heading-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
body .weather-display .heading-container .heading-card {
  margin: auto;
}
body .weather-display #currentDiv {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: solid thin darkseagreen;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 2px;
}
body .weather-display #currentDiv #currentId {
  flex: 2;
  background-color: seagreen;
  color: honeydew;
  line-height: 1.4;
  border-radius: 8px;
  padding: 8px 4px;
  word-break: keep-all;
}
body .weather-display #currentDiv #nextId {
  flex: 1;
  border-radius: 8px;
  padding: 2px;
}
body .weather-display #alertsId {
  background-color: #8b2e62;
  color: honeydew;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 2px;
}
body .weather-display #weekId {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
body .weather-display #weekId .dayId {
  flex: 1;
  border: solid thin darkseagreen;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 3px 0;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 2px;
}
body .weather-display #weekId .dayId .day {
  color: #335;
}
body .weather-display #weekId .dayId .hi {
  color: crimson;
}
body .weather-display #weekId .dayId .lo {
  color: royalblue;
}
body .weather-display #chartId {
  margin: 0.1rem auto;
}
body .cloudLoader {
  width: 180px;
  height: 140px;
  display: block;
  margin: 0 auto 20px;
  position: relative;
  box-sizing: border-box;
  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 15px at 15px 15px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
  background-size: 50px 50px, 100px 75px, 50px 50px, 30px 32px, 136px 20px;
  background-repeat: no-repeat;
  background-position: 0px 30px, 30px 0px, 113px 29px, 147px 50px, 23px 60px;
}
body .cloudLoader::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 65px;
  width: 2px;
  height: 6px;
  color: #FFF;
  box-sizing: border-box;
  animation: animateLoader 0.6s linear infinite;
}
@keyframes animateLoader {
  0% {
    box-shadow: 25px 0 #FFF, 50px 0 #FFF, 75px 0 #FFF, 100px 0 #FFF, 125px 0 #FFF, 150px 0 #FFF, 25px 0 #FFF, 50px 0 #FFF, 75px 0 #FFF, 100px 0 #FFF, 125px 0 #FFF, 150px 0 #FFF;
  }
  50% {
    box-shadow: 25px 20px #FFF, 50px 60px rgba(255, 255, 255, 0), 75px 30px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 40px #FFF, 150px 60px rgba(255, 255, 255, 0), 25px 20px #FFF, 50px 30px #FFF, 75px 10px #FFF, 100px 30px #FFF, 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 25px 60px rgba(255, 255, 255, 0), 50px 60px rgba(255, 255, 255, 0), 75px 50px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 70px rgba(255, 255, 255, 0), 150px 60px rgba(255, 255, 255, 0), 25px 80px rgba(255, 255, 255, 0), 50px 80px rgba(255, 255, 255, 0), 75px 70px rgba(255, 255, 255, 0), 100px 60px rgba(255, 255, 255, 0), 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
  }
}