@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

body {
  background-image: url("/img/background.png");
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: row;
  color: #F0F0F0
}

[flex-float] {
  &[flex-float=left] {
    float: left;
  }
  &[flex-float=right] {
    float: right;
  }
}

[direction-row] {
  display: flex;
  flex-direction: row;
}

[direction-column] {
  display: flex;
  flex-direction: column;
}

a {
  color: #2b5dff;
}

[topbar] {
  text-color: #2b5dff;
  
  background-color: #A0A0A0;
  max-height: 30px;
  min-height: 30px;
}

[weight-100] {
  font-weight: 100;
}

[weight-200] {
  font-weight: 200;
}

[weight-300] {
  font-weight: 300;
}

[weight-400] {
  font-weight: 400;
}

[weight-500] {
  font-weight: 500;
}

[weight-600] {
  font-weight: 600;
}

tr {
  &:hover {
    /*background-color: #D6EEEE;*/
  }
}
td {
  &:hover {
    background-color: #C1CDDD
  }
}
tr, td {
  border: 1px solid #000;
}
row {
  flex-direction: row;
  &[left-row] {
    flex: 0 0 66%;
  }
  &[right-row] {
    flex: 1;
    min-width: 0
  }
}

column {
  flex-direction: column;
}