body {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            color: #2c3e50;
            background-color: #F4F5F7;
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        header {
            background-color: #2c3e50;
            height: 50px;
            margin: 0;
        }

        h1 {
          color:antiquewhite;
          text-align: left;
          margin: 0;
          padding-top: 5px;
          padding-left: 20px;
        }

        .container {
          display: grid;
          place-items: center;
          padding: 20px;
        }

        .eigenform {
            background-color: #F4F5F7;
            max-width: 500px;
            margin: 30px auto;
            padding: 0px 20px;
            box-shadow: 2px 5px 10px rgba(129, 129, 129, 0.5);
            border-radius:10px;
            text-align: center;
            margin-bottom: 25px;
            overflow: auto;
        }

        .eigenform h1 {
            color:#2c3e50;
            margin: auto;
            padding: 20px ;
            text-align: center;
        }

        button {
          background-color: #5E72E4;
          color: #ebebeb;
          font-family: 'Roboto', sans-serif;
          font-weight: bold;
          font-size: 18px;
          display: block;
          max-width: 500px;
          margin: 50px auto;
          margin-top: 20px;
          padding: 15px 15px;
          box-shadow: 2px 2px 2px #5E72E4;
          border: #5E72E4;
          border-radius:5px;
        }

        button:hover {
          transform: translateY(-1px);
        }

        button:active {
          background-color: #5E72E4;
          box-shadow: 0 5px #5E72E4;
          transform: translateY(2px);
        }

        .base-timer {
            position: relative;
            width: 300px;
            height: 300px;
          }
          
          .base-timer__svg {
            transform: scaleX(-1);
          }
          
          .base-timer__circle {
            fill: none;
            stroke: none;
          }
          
          .base-timer__path-elapsed {
            stroke-width: 7px;
            stroke: grey;
          }
          
          .base-timer__path-remaining {
            stroke-width: 7px;
            stroke-linecap: round;
            transform: rotate(90deg);
            transform-origin: center;
            transition: 1s linear all;
            fill-rule: nonzero;
            stroke: currentColor;
          }
          
          .base-timer__path-remaining.green {
            color: rgb(65, 184, 131);
          }
          
          .base-timer__path-remaining.orange {
            color: orange;
          }
          
          .base-timer__path-remaining.red {
            color: #000000;
          }
          
          .base-timer__label {
            position: absolute;
            width: 300px;
            height: 300px;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
          }