body {
          font-family: Arial, Helvetica, sans-serif;
        }
        @media (max-width: 800px) {
          .flex-container {
            flex-direction: column;
          }
        }
        
        .flip-card {
          background-color: transparent;
          width:16%;
          height: 12.5rem;
          padding: 0.6rem;
          perspective: 62.5rem;
         float: left;
         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        
        
        }
        
        .flip-card-inner {
          position: relative;
          width: 100%;
          height: 100%;
          text-align: center;
          transition: transform 0.6s;
          transform-style: preserve-3d;
          box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
          
        }
        
        .flip-card:hover .flip-card-inner {
          transform: rotateY(180deg);
        }
        
        .flip-card-front, .flip-card-back {
          position: absolute;
          width: 100%;
          height:100%;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
        }
        #lengthfront1 {
          background-color: #fdee64;
          color:black;
          border-radius: 10px;
          box-shadow:5px 10px 30px;
          padding: 10px 10px 10px;
          margin-bottom: 5px;
          font-size: 18px;
          font-weight: bold;
          
        }
       
        #lengthfront2 {
          background-color: #fdb673;
          color:black;
          border-radius: 10px;
          box-shadow:5px 10px 30px;
          padding: 10px 10px 10px;
          margin-bottom: 5px;
          font-size: 18px;
          font-weight: bold;
          
        }
        #lengthfront3 {
          background-color: #fa7e58;
          color:black;
          border-radius: 10px;
          box-shadow:5px 10px 30px;
          padding: 10px 10px 10px;
          margin-bottom: 5px;
          font-size: 18px;
          font-weight: bold;
          
        }
        #lengthfront4 {
          background-color: #c3f0f8;
          color:black;
          border-radius: 10px;
          box-shadow:5px 10px 30px;
          padding: 10px 10px 10px;
          margin-bottom: 5px;
          font-size: 18px;
          font-weight: bold;
          
        }
        #lengthfront5 {
          background-color: #6b8cf8;
          color:black;
          border-radius: 10px;
          box-shadow:5px 10px 30px;
          padding: 10px 10px 10px;
          margin-bottom: 5px;
          font-size: 18px;
          font-weight: bold;
          
        }
        #lengthfront6 {
          background-color: #f85e9e;
          color:black;
          border-radius: 10px;
          box-shadow:5px 10px 30px;
          padding: 10px 10px 10px;
          margin-bottom: 5px;
          font-size: 18px;
          font-weight: bold;
          
        }



        
        .flip-card-back {
          
          background-color: #f7fa56;
          color: rgb(8, 6, 0);
          transform: rotateY(180deg);
          border-radius: 0.6rem;
          box-shadow:5px 5px 5px rgb(66, 56, 27);
          padding:0.6px 0.6px 0.6px;
        
        }
      
       button:hover{
        background-color: rgb(134, 204, 209);
       }