[data-theme="light"]{
  /*light mode colors*/
  --top: #333;
  --top_text: #fff;
  --mid: #737373;
  --input_border: #ccc;
  --input_text: #000;
  --btn: #3ed744;
  --btn_hover: #47bf4c;
  --btn_text: #fff;
  --grey: #fefefe;
  --upload: #fff;
  --upload_text: #000;
  --upload_border: #888;
  --link: #fff;
  --link_hover: #c2c2c2;
  --link_text: #fff;
  --text: #000;
  --loading_inner: #3498db;
  --loading_border: #f3f3f3;
  --error: red;
  --gradient_c1: #5ca0eb;
  --gradient_c2: #c670e8;

  --message_height_adj: 270px;
  --message_top_adj: 50px;
}

:root {
  /*dark mode colors*/
  --top: #151515;
  --top_text: #eee;
  --mid: #111;
  --input_border: #ccc;
  --input_text: #eee;
  --btn: #00ffff;/*#7992a8;*/
  --btn_hover: #00dacd;/*#4caf50;*/
  --btn_text: #000;
  --inv_btn: #4f9bdd;
  --inv_btn_hover: #4caf50;
  --grey: #353535;
  --upload: #353535;
  --upload_text: #e3e3e3;
  --upload_border: #888;
  --link: #353535;
  --link_hover: #444;
  --link_text: #e3e3e3;
  --text: #eee;
  --loading_inner: #708c75;
  --loading_border: #f3f3f3;
  --border: #ccc;
  --error: red;
  /*--gradient_c1: #2a5470;
  --gradient_c2: #4c4177;*/
  --gradient_c1: #647DEE;
  --gradient_c2: #7f53ac;
}

/*
* { border: 1px solid red; }
*/

@font-face {
  font-family: "Roboto";
  font-weight: normal;
  src: url('../static/fonts/Roboto-Regular.ttf');
}

@font-face {
  font-family: "Roboto";
  font-weight: bold;
  src: url('../static/fonts/Roboto-Bold.ttf');
}

#news-container {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  font-family: "Roboto";
  font-style: normal;
}

#header {
  background-color: var(--top);
  color: var(--top_text);
  padding: 0.8rem;
}

#header h1 {
  margin: 0;
  font-size: 1.8rem;
}

#hnm {
  cursor: pointer;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--mid);
}

.wrapper {
  color: var(--text);
}

.wrapper h2 {
  font-size: 2rem;
  padding-inline: 10vw;
}

.wrapper p {
  font-size: 1.15rem;
  padding-inline: 22vw;
}

.wrapper button {
  font-size: 0.8rem;
  padding-block: 0.7rem;
  margin: 10px 0;
  width: 50vw;
  max-width: 500px;
  background-color: var(--btn);
  border: none;
  border-radius: 5px;
  color: var(--btn_text);
  font-size: 1.2rem;
  cursor: pointer;
}

.wrapper button:hover {
  background-color: var(--btn_hover);
}

.updates {
  width: 100vw;
  float: right;
  padding: 0px;
}

.updates p {
  float: right;
  font-size: 1.3vw;
  margin-right: 2vw;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
}

.disc {
  text-align: center;
}

.disc p {
  font-size: 0.75rem;
}

.disc svg {
  width: 0.8rem;
  height: 0.8rem;
}

.section-title {
  font-size: 2.5rem;
}

.intro {
  padding-block: 0.2rem;
  background-color: var(--link);
  background-image: linear-gradient(45deg,var(--gradient_c1),var(--gradient_c2));
}

.info {
  padding-block: 2rem;
  background-color: var(--mid);
  height: min-content;
}

.info h2 {
  color: var(--top_text);
  margin-bottom: 0.1rem;
  margin-top: 0.1rem;
  font-size: 1.1rem;
  font-weight: normal;
}

.cta {
  padding-block: 0.5rem;
  background-color: var(--link);
  background-image: linear-gradient(50deg,var(--top),var(--link),var(--top));
}

img {
  margin-left: 1vw;
  margin-right: 1vw;
}

#card {
  display: inline-block;
  vertical-align: top;
  background-color: var(--link);
  border-radius: 5px;
  margin-bottom: 2vh;
  padding-block: 1.6rem;
  padding-inline: 0.8rem;
  width: 90vw;
  height: fit-content;
}

#card:hover {
  background-color: var(--link_hover);
}

#card h3 {
  font-size: 1.7rem;
  padding: 0.4rem;
  margin-bottom: 0px;
  margin-top: 0px;
  margin: 0.3rem;
  text-align: left;
  font-weight: normal;
}

#card p {
  font-size: 1rem;
  margin-top: 0px;
  margin: 0.4rem;
  text-align: left;
  padding: 0.8rem;
}

#card br {
  line-height: 0.2rem;
}

@media only screen and (min-width: 1600px) {
  #card {
    width: 50vw;
  }
}

footer {
  width: 100%;
  margin-top: auto;
  padding-block: 1.5rem;
  background-color: var(--top);
  font-size: 0.8rem;
  text-align: center;
}

.footer-el {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  color: var(--top_text);
  padding-inline: 1.5rem;
  padding-block: 1rem;
}

.footer-el:hover {
  text-decoration: underline;
}

.footer-el-l {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  color: var(--top_text);
  padding-inline: 1rem;
  padding-block: 1rem;
}

#highlighted {
  color: var(--btn_text);
}