main {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    --altezza: calc(79.8vh - 2px);
    .container{
        display:flex;
        justify-content: center;
    }
    .box1{
        height: var(--altezza);
        width:60%;
        background-color:#CECBCB;
        position: relative;
        .login-container {
            background-color:#bbb9b9;
            padding: 20px;
            border-radius:3vh;
            box-shadow:0 0 10px rgba(0, 0, 0, 0.1);
            width:30vw;
            height:30vh;
            text-align:center;
            position:relative;
            left:14vw;
            top:37.5%;
            h2 {
                margin-bottom: 20px;
                font-size: 24px;
                color:black;
            }
            label {
                display: block;
                text-align:left;
                margin-bottom:5px;
                color:black;
            }
            input[type="email"], input[type="password"] {
                width: 100%;
                padding: 10px;
                margin-bottom: 15px;
                border: 1px solid #CECBCB;
                border-radius: 4px;
                box-sizing: border-box;
            }
            input[type="submit"] {
                width: 100%;
                padding: 10px;
                background-color:#0fcc96;
                border: none;
                border-radius: 4px;
                color: #ffffff;
                font-size: 16px;
                cursor: pointer;
            }
            input[type="submit"]:hover {
                border:1px solid white;
            }
        }
        #login{
            position:absolute;
            top:20%;
            width: 100%;
            text-align: center;
            font-size: 4.5vh;
            color:#12c979;
            text-shadow:rgb(94, 94, 94) 0.1vh 0.025vh 0.1vh;
        }
        #linea1{
            background-color:#12c979;
            width:5vw;
            height:0.5vh;
            position:absolute;
            top:30%;
            left:28vw;
            border-radius:2vh;
        }
    }
    .box2{
        position: relative;
        height: var(--altezza);
        width:40%;
        background-color:#0fcc96; 
        h2{
            position: absolute;
            top:20%;
            width: 100%;
            right: 0;
            text-align: center;
            font-size: 4.5vh;
            color:white;
            text-shadow:rgb(94, 94, 94) 0.1vh 0.025vh 0.1vh;
        }
        p{
            position: absolute;
            width: 100%;
            right: 0;
            text-align: center;
            top:40%;
            font-size:2vh;
            color:white;
        }
        #linea2{
            background-color:white;
            width:12.5%;
            height:0.5vh;
            position:absolute;
            top:30%;
            right:43.75%;
            border-radius:2vh;
        }
        #bottonereg{
            width: 1.25%;
            margin: 0 49.375%;
            transform: translateX(-50%);
            padding: 3% 12%;
            background-color: #0fcc96;
            border-radius:3vh;
            border: white 0.3vh solid;
            position:absolute;
            top:50%;
            cursor: pointer;
            transition: background-color 0.4s ease;
            p{
                position:absolute;
                top:50%;
                left:50%;
                transform: translate(-50%,-50%);
                text-align: center;
                color:white;
            }
        }
        #bottonereg:hover {
            color: white;
            background-color:#45b89d;
            
        }
    }
}