style.scss

$color1: #5bc9e1;
$color2: #d0ecf4;

body {
  background-image: url(static/r.png);
  background-attachment: fixed;
  background-color: #464646;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  & > table td {
    vertical-align: top;
  }

  > table,
  > table > tr,
  > table > tr > td {
    display: block;
  }
}

table {
  button {
    width: 50px;
    background: -moz-linear-gradient($color2, $color1, $color2);
    background: -webkit-gradient(
      linear,
      0 0,
      0 100%,
      from($color2),
      to($color2),
      color-stop(0.5, $color1)
    );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');
    border-radius: 5px;
    padding: 5px 12px;
    height: 30px;
  }
}

div {
  & > label {
    display: inline-block;
    font-family: Roboto sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.75);
  }
}

#parameters {
  padding: 40px;
  width: 175px;

  #x {
    background: -moz-linear-gradient($color2, $color1, $color2);
    background: -webkit-gradient(
      linear,
      0 0,
      0 100%,
      from($color2),
      to($color2),
      color-stop(0.5, $color1)
    );
    border: 2px solid;
    border-radius: 10px;
    padding: 10px;
    width: 138px;
  }

  label[for="y"] {
    display: inline-block;
    margin-top: 10px;
    font-family: Roboto sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.75);
  }

  label[for="r"] {
    display: inline-block;
    margin-top: 10px;
    font-family: Roboto sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.75);
  }

  .actionButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background: -moz-linear-gradient($color2, $color1, $color2);
    background: -webkit-gradient(
      linear,
      0 0,
      0 100%,
      from($color2),
      to($color2),
      color-stop(0.5, $color1)
    );

    border-radius: 5px;
    padding: 5px 12px;
    width: 160px;
    margin-top: 10px;
  }
}

td {
  > canvas {
    display: flex;
  }
}

#results {
  padding: 1%;
  margin-left: 100px;
  border-collapse: collapse;
  background-color: #ffffffcc;

  th {
    border: solid 1px black;
    width: 82px;
    height: 50px;
  }

  td {
    border: solid 1px black;
    text-align: center;
  }
}

header {
  font-family: sans-serif;
  color: #393949;
  background-color: var(--secondary-background-color);
  overflow: hidden;

  h2::after {
    color: transparent;
    content: " | ITMO, Saint-Petersburg 2022";
    transition-property: color;
    transition-duration: 0.5s;
  }

  &:hover {
    h1,
    h2 {
      transform: translateX(50px);
    }
  }

  h1 {
    font-size: 40px;
    transition-property: transform;
    transition-duration: 0.5s;
  }

  h2 {
    font-size: 35px;
    transition-duration: 0.3s;
  }
}

.actionButton {
  display: flex;
  align-items: center;
  justify-content: center;
  background: -moz-linear-gradient($color2, $color1, $color2);
  background: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    from($color2),
    to($color2),
    color-stop(0.5, $color1)
  );
  border-radius: 5px;
  padding: 5px 12px;
  width: 160px;
  margin-top: 10px;
}

.active {
  border: green 3px solid;
}

.cat {
  margin-left: 50%;
  position: fixed;
  top: 65%;
  z-index: -1;
}

.canvasContainer {
  min-height: 466px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 20px;
}

.bordered {
  border: 1px solid #555;
  border-radius: 8px;
  box-shadow: 0 10px 10px #0003;
  height: 386px;
}