:root {
  --dark-grey: #333333;
  --dark-grey-trans: #33333328;

  --light-grey: #ebebeb;

  --status-grey: #D3D3D3;
  --status-grey-trans: #D3D3D330;

  --blue: #b3c6ed;
  --blue-shadow: #647597b8;

  --green-screen:  #009e00;
  --green: #b5d1bb;
  --green-shadow: #6e9f7aad;
  --dark-green: #82b08c;
  --dark-green-shadow: #6e9f7aad;

  --yellow: #fff3cd;
  --yellow-shadow: #bca352cc;

  --orange: #ffa500;

  --red: #f0a3a9;
  --red2: #ff0000;
  --red-shadow: #d33f4bb0;

  --purple: #e3c6f5;
  --purple-shadow: #996db5b0;

  --white: #ffffff;
  --white-op: #858585b4;

  --transparent: #00000000;
  --font-family: Arial, sans-serif;
}

.dark-mode {
  --dark-grey: #e6e6e6;
  --dark-grey-trans: #161515b4;

  --light-grey: #1c1c1c;
  --white: #121212;
  --status-grey: #424242;
  --status-grey-shadow: #42424230;

  --blue: #3a4f72;
  --blue-shadow: #33435fb8;

  --green: #2e4737;
  --green-shadow: #2a432fad;
  --dark-green: #3b5e43;
  --dark-green-shadow: #3d5c45;

  --yellow: #7a6d2b;
  --yellow-shadow: #5d521bcc;

  --red: #77232a;
  --red-shadow: #4b1d21d0;

  --purple: #59317e;
  --purple-shadow: #4a2464b0;

  --white: #121212;
  --white2: #252525;
  --white3: #ffffff28;
  
  --white-op: #8b8b8bb4;
}

html {
  overflow-y: none;
} 

body {
  font-family: var(--font-family);
  background: var(--light-grey);
  color: var(--dark-grey);
  text-align: center;
  margin: 0;
  height: 100vh;
  overflow: hidden;
}

.Qteco {
  background-image: radial-gradient(circle, var(--white3) 15%, var(--white2) 20%, var(--white)50%);
  display: flex;
  position: sticky;
  height: 7vh;
  top: 0;
  justify-content: space-between;
  align-items: center;
  padding: 0.5% 2%;
  box-shadow: 0 0.5vw 0.5vw var(--dark-grey-trans);
  z-index: 1000;
}

.Qteco img {
  max-width: 50%;
  height: auto;
  padding: 2%;
  margin-top: 2%;
}

#card-container {
  display: grid;
  overflow-y: auto;
  grid-template-columns: repeat(auto-fit, minmax(15%, max-content));
  gap: 0.5%;
  width: 100%;
  justify-content: center;
  margin: 0 auto;
  box-sizing: border-box;
  height: calc(100vh - 14vh);
  padding: 1%;
}

.card {
  border-radius: 6px;
  padding: 1%;
  text-align: center;
  font-size: 1vw;
  min-height: 2vw;
  margin-bottom: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .url {
  font-weight: bold;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  max-width: 100%;
  position: relative;
  text-decoration: underline;
  color: var(--dark-grey);
}

a {
  text-decoration: none;
}

.status-0xx {
  background-color: var(--status-grey);
  box-shadow: 0 0.2vw 0.2vw var(--status-grey-shadow);
}

.status-1xx {
  background-color: var(--purple);
  box-shadow: 0 0.2vw 0.2vw var(--purple-trans);
}

.status-2xx {
  background-color: var(--green);
  box-shadow: 0 0.2vw 0.2vw var(--green-shadow);
}

.status-3xx {
  background-color: var(--blue);
  box-shadow: 0 0.2vw 0.2vw var(--blue-shadow);
}

.status-4xx {
  background-color: var(--red);
  box-shadow: 0 0.2vw 0.2vw var(--red-shadow);
}

.status-5xx {
  background-color: var(--red);
  box-shadow: 0 0.2vw 0.2vw var(--red-shadow);
}

#filter {
  font-size: 1.2vw;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 1vh;
}

#status-filter {
  font-size: 1vw;
  border-radius: 6px;
  background-color: var(--transparent);
  color: var(--black);
  font-weight: bold;
}

#theme-container {
  font-size: 1.2vw;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 1vh;
}

#theme-select {
  font-size: 1vw;
  border-radius: 6px;
  background-color: var(--transparent);
  color: var(--black);
  font-weight: bold;
}

#status-filter option {
  background-color: var(--white);               
}

#theme-select option {
  background-color: var(--white);
}

footer {
  font-weight: bold;
  background: var(--white);
  align-items: center;
  position: fixed;
  width: 100%;
  height: 4vw;
  bottom: 0;
  box-shadow: 0 -0.5vw 0.5vw var(--dark-grey-trans);
  display: flex;
  justify-content: space-evenly;
}

.memoryBar, .diskBar {
  display: flex;
  align-items: center;
  gap: 5%;
}

progress {
  appearance: none;
  border-radius: 6px;
}

.green progress::-webkit-progress-value {
  background: var(--green-screen);
  border-radius: 6px;
}
.green progress::-webkit-progress-bar {
  border-radius: 6px;
  background: var(--white-op);
}

.orange progress::-webkit-progress-value {
  background: var(--orange);
  border-radius: 6px;
}
.orange progress::-webkit-progress-bar {
  border-radius: 6px;
  background: var(--white-op);
}

.red progress::-webkit-progress-value {
  background: var(--red2);
  border-radius: 6px;
}
.red progress::-webkit-progress-bar {
  border-radius: 6px;
  background: var(--white-op);
}

.green progress::-moz-progress-bar {
  background: var(--green-screen);
}

.orange progress::-moz-progress-bar {
  background: var(--orange);
}

.red progress::-moz-progress-bar {
  background: var(--red2);
}

.dateTime {
  font-weight: bold;
  font-size: 24px;
}

.lastReload {
  font-size: 24px;
}