@media only screen and (max-width: 770px){
    .main{
        display: block;
    }
    .leftwindow{
        position: relative;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        border-radius: 5px;
    }
    .rightwindow{
        position: relative;
        left: 50%;
        top: 6%;
        transform: translateX(-50%);
        width: 80%;
        border-radius: 5px;
    }
}




@media only screen and (max-width: 991px){
    .inputterm{
        grid-row: 8/9;
        grid-column: 2/20;
    }
    #ratelabel{
        grid-row: 9;
        grid-column: 2/18;
    }

    .inputterm p{
        width: 20%;
    }

    .rateterm p{
        width: 20%;
    }

    .rateterm{
        grid-row: 10/11;
        grid-column: 2/20;
    }
    #termlabel{
        grid-column: 2/20;
    }

    #typelabel{
        grid-row: 12;
        grid-column: 2/20;
    }
    .radiobutton#repayment {
        grid-row: 13;
        grid-column: 2 / 18;
    }

    .radiobutton#interest {
        grid-row: 15;
        grid-column: 2 / 18;
    }
    .buttons{
        grid-row: 18/20;
        grid-column: 2/20;
    }
    #euro, #years, #percent{
        height: 100%;
    }

}


@media only screen and (min-width: 992px) and (max-width: 1200px) {
    
    .leftwindow{
        width: 50vw;
    }
    #header{
        grid-column: 2/15;

    }
    .buttons{
        grid-row: 15/17;
        grid-column: 2/19;

    }



}

/*Desktop*/
@media only screen and (min-width: 1201px) and (max-width: 1440px) {
    body{
        background-color: bisque;
    }
    p{font-size: 1.2em;}

}