@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200;300;400;500;600;700&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: 0;
    transition: all 0.5s ease;
}

body{
    font-family: 'IBM Plex Mono', monospace;
    display: grid;
}

a {
    text-decoration: none;
    color: #fff;
}

.container{
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #eebbc3 0%, #b8c1ec 100%);
}

.calculator{
    width: 90vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

} 

.title-display{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title{
    width: 15rem;
    height: 2.5rem;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center; 
    background-color: #232946;
    color: #fff;
}

#display{
    /* margin: 0 10px 0 10px; */
    height: 3rem;
    width: auto; 
    max-width: 270px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 2rem;
    overflow: hidden;
}

.display-screen{
    width: 20.6rem;
    color:#232946;
    background-color: #e8e8e8;
}

.buttons{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows:  1fr 1fr 1fr 1fr 1fr;
    margin-top: 10px;
}



button{
    width: 6.1em;
    height: 6.1em;
    border: none;
    padding: 12.5px 30px;
    background-color: #232946;
    color: #ffffff;
    font-weight: Bold;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

button:active {
    background-color: #eebbc3;
    transition: all 0.25s;
    -webkit-transition: all 0.25s;
    box-shadow: none;
}

button:hover {
    background-color: #b8c1ec;
    box-shadow: 0 0 20px #6fc5ff50;
}

button#equal{
    height: 12.3em;
    grid-row: -1 / -3;
    grid-column: -2 / -1;
}

button#clear{
    width: 12.3em;
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}
  

  

   
/* -------------- DESKTOP -------- */
/* -------------- DESKTOP -------- */
/* -------------- DESKTOP -------- */
  
@media screen and (min-width: 900px){

    .container{
        background: #232946;
    }

    .calculator{
        width: 55em;
        height: 30em;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        background: linear-gradient(135deg, #eebbc3 0%, #b8c1ec 100%);
        border-radius: 7px;
        /* box-shadow: 5px 5px 10px #bebebe, 
                    -5px -5px 10px #ffffff; */
    }

    .title-display{
        margin-left: 20px;        
        align-items: flex-start;
    
    }

    .buttons{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        margin-top: 10px;
    }

    button#clear{
        width: 12.2em;
        grid-row: 1 / 2;
        grid-column: 1 / 3;
    }
    
    button#equal{
        height: 12.2em;
        grid-row: -1 / -3;
        grid-column: -2 / -1;
    }

    button#zero{
        order: -3;
    }

    button#multiply{
        order: -2;
    }

    button#plus{
        grid-row: -4 / -3;
        grid-column: 5 / 6;
    }

    button#dot{
        grid-row: -3 / -2;
        grid-column: -3 / -2;
    }
}