@media
	{
    #dashboard
    {
      width: 15vw;
      padding: 1vw;
      border: 0.2vw solid var(--screenGreen);
      border-radius: 1vw;
      color: var(--screenGreen);
      font-weight: lighter;
    }

    #rate
    {
      margin-bottom: 1vw;
      font-weight: bold;
    }

    #status
    {
      text-align: center;
      width: 10vw;
      margin-bottom: 1vw;
      border: 0.13vw solid var(--screenGreen);
      border-radius: 1vw;
    }



    /* CLOCK */
    .clock
    {
      position: relative;
      width: 10vw;
      height: 10vw;
      border: 0.3vw solid white;
      border-radius: 50%;
    }

    .clockStick
    {
      position: absolute;
      bottom: 50%;
      left: 50%;
      transform-origin: bottom center;
    }

    .hour{ width: 0.25vw; height:2vw; background:white; }
    .minute{ width: 0.2vw; height: 4vw; background:white; }
    .second{ width: 0.15vw; height: 4vw; background:red; }

    .center
    {
      position:absolute;
      width:0.5vw;
      height: 0.5vw;
      background:white;
      border-radius:50%;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }



    .loadingRed
    {
      color: red;
    }

}

@media (max-width: 1400px)
	{
    #dashboard
    {
      gap: 0.5vw;
      border-radius: 1.5vw;
      width: 20vw;
    }
  }

@media (max-width: 800px)
	{
    #dashboard
    {
      width: 70vw;
      padding: 5vw;
      border: 0.6vw solid var(--screenGreen);
      border-radius: 5vw;
      gap: 2vw;
    }

    .clock
    {
      width: 50vw;
      height: 50vw;
      border: 1vw solid white;
    }

    .hour{ width: 0.8vw; height: 10vw; background:white; }
    .minute{ width: 1vw; height: 18vw; background:white; }
    .second{ width: 0.85vw; height: 18vw; background:red; }

    #status
    {
      width: 40vw;
      margin-bottom: 1vw;
      border: 0.4vw solid var(--screenGreen);
      border-radius: 5vw;
    }

	}