@import url('https://fonts.googleapis.com/css2?family=Amita&family=Poppins:wght@600&display=swap');

        * {
            margin: 0;
            padding: 0;
        }

        .logo {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;
        }

        .container {
            min-height: 100vh;
            font-family: 'Poppins', sans-serif;
            max-width: 80vw;
            margin: auto;
        }

        .container h1 {
            margin: 25px;
            font-family: 'Poppins', sans-serif;
        }

        .container form input[type='number'],
        label {
            margin: 2px;
            font-size: 25px;
            font-family: 'Poppins', sans-serif;

        }

        .container select {
            margin: 2px;
            font-size: 25px;
            font-family:  'Poppins', sans-serif;
        }

        .container input {
            font-size: 20px;
        }

        .container form {
            margin: 30px;
            display: flex;
            flex-direction: column;
            width: 500px;

        }

        .container button {
            margin: 15px 15px 5px 15px;
            width: 200px;
            padding: 15px;
            background-color: blueviolet;
            color: azure;
            border-radius: 5ch;
            cursor: pointer;
            box-shadow: inset 0 1px 0 rgba(white, .15), 0 1px 1px rgba(black, .075);
            &:hover{
            background-color:rgb(173, 118, 224);
        }
        }
       

        .output {
            display: none;
        }

        
        .output table {
            margin: 15px 15px 5px 15px;
            width: 50vw;
            text-align: center;
            border: 2px solid black;
            font-size: 20px;
            padding: 5px 10px;

        }

        .output table th{
            padding: 3px;
        }


        .output table caption {
            font-size: 25px;
            padding: 20px;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
        }

        footer {
            font-family: 'Poppins', sans-serif;
            text-align: center;
        }

        nav {
            font-family: 'Amita', 'Poppins', sans-serif;
            font-weight: 1000;
            display: flex;
            font-size: 20px;
            background-color: rgb(163, 141, 210);
            padding: 20px;
        }

        nav ul li {
            list-style-type: none;
            margin: 0.5cm;
        }

        nav ul {
            display: flex;
        }

        nav li a {
            text-decoration: none;
            color: rgb(14, 74, 186);
        }

        nav li a:hover {
            text-decoration: none;
            color: rgb(19, 143, 147);
        }

        @media (max-width:600px){
            body{
                background-color: rgb(255, 255, 255);
            }
            nav{
                flex-direction: column;
                font-size: 14px;
                background-color: rgb(163, 141, 210);
                max-width:800vw ;
                width: 100%;
            }
            nav ul li{
                margin: 5px  13px;
            }
            nav ul{
                justify-content: center;
            }
            .container{
                max-width:800vw ;
                justify-content: center;
            }

            .container form input[type='number'], select, label {
               width: 80vw;
            }

            .output{
               max-width: 300vw; 
               width: 100%;
               
               display: flex;
            }

            .output table {
               width: 100%;
               
               
            }


        }