* {
    outline:none;
    transition:all ease 0.3s;
    font-family:'Poppins', sans-serif, arial;
}
body {
    margin:0;
    padding:0;
    box-sizing:border-box;
    background-color:#262D37;
}
.container {
    width:660px;
    display:flex;
    align-items:center;
    flex-direction:column;
    justify-content:space-between;
}
main {
    display:flex;
    justify-content:center;
    margin-top:40px;
}
.numbers {
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:40px;
}
#n1,
#n2 {
    width:310px;
    height:310px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#222;
    font-size:150px;
    text-align:center;
    margin-right:40px;
    background-color:#EEE;
    border:1px solid #F1F1F1;
    border-radius:26px;
}
#n2 {
    margin-right:0;
}

button{
    cursor:pointer;
    border:0;
    width:100%;
    height:50px;
    font-size:26px;
    border-radius:16px;
}
#result {
    color:#F1F1F1;
    font-size:30px;
    margin-top:20px;
}
@media (max-width:680px) {
    #n1,
    #n2 {
        width:200px;
        height:150px;
        font-size:80px;
    }
    button {
        width:200px;
    }
    #result {
        font-size:26px;
    }
}
@media (max-width:460px) {
    .numbers {
        flex-direction:column;
    }
    #n1,
    #n2 {
        font-size:50px;
    }
    #n1 {
        margin-right:0;
        margin-bottom:20px;
    }
    #result {
        font-size:20px;
    }
}