:root {
  /* Tokyo Night Moon theme from github.com/folke/tokyonight */
  --bg: #222436;
  --bg_dark: #1e2030;
  --bg_highlight: #2f334d;
  --blue: #82aaff;
  --blue0: #3e68d7;
  --blue1: #65bcff;
  --blue2: #0db9d7;
  --blue5: #89ddff;
  --blue6: #b4f9f8;
  --blue7: #394b70;
  --comment: #636da6;
  --cyan: #86e1fc;
  --dark3: #545c7e;
  --dark5: #737aa2;
  --fg: #c8d3f5;
  --fg_dark: #828bb8;
  --fg_gutter: #3b4261;
  --green: #c3e88d;
  --green1: #4fd6be;
  --green2: #41a6b5;
  --magenta: #c099ff;
  --magenta2: #ff007c;
  --orange: #ff966c;
  --purple: #fca7ea;
  --red: #ff757f;
  --red1: #c53b53;
  --teal: #4fd6be;
  --terminal_black: #444a73;
  --yellow: #ffc777;
}

body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg_dark);
  color: var(--fg);
  font-family: Arial;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: var(--green);
}

a:hover {
  text-decoration: underline; 
  color: var(--green1);
}

.radarchart {
  width: 50%;
}

.box {
  border: 2px solid var(--magenta); 
  margin: 5px;
  padding: 5px;
  background-color: var(--bg);
}

.box:hover{
  border: 2px solid var(--purple); 
  background-color: var(--bg_highlight);
}

.main_column {
  width: 15em;
}

.box_title {
  text-align: center; 
  color: var(--orange);
}

.page_title{
  color: var(--magenta2); 
}

.computer_component_title{
  color: var(--orange); 
}

.computer_component_category_title{
  color: var(--red); 
}

#main {
  max-width: 80em; 
  width: 100%;
}

#header {
  width: 100%; 
}

#footer {
}

@media (max-width: 60em) {
  #main_columns {
   flex-direction: column; 
  }
}
@media (min-width: 60em) {
  #main_columns {
    flex-direction: row; 
  }
}

#main_columns {
  height: 100%;
  display: flex;
  justify-content: center;
}

.trans_rights_1{
  animation: transrights1 1s infinite;
}

.trans_rights_2{
  animation: transrights2 1s infinite;
}

.trans_rights_3{
  animation: transrights3 1s infinite;
}

@keyframes transrights1 {
  0% { color: #5BCEFA; }
  33% { color: #5BCEFA; }
  34% { color: #F5A9B8; }
  66% { color: #F5A9B8; }
  67% { color: #FFFFFF; }
  100% { color: #FFFFFF; }
}

@keyframes transrights2 {
  0% { color: #FFFFFF; }
  33% { color: #FFFFFF; }
  34% { color: #5BCEFA; }
  66% { color: #5BCEFA; }
  67% { color: #F5A9B8; }
  100% { color: #F5A9B8; }
}

@keyframes transrights3 {
  0% { color: #F5A9B8; }
  33% { color: #F5A9B8; }
  34% { color: #FFFFFF; }
  66% { color: #FFFFFF; }
  67% { color: #5BCEFA; }
  100% { color: #5BCEFA; }
}