@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3B4664;
    font-family: "League Spartan", sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

.container {
    width: 33.5rem;
    height: 44.5rem;
}

@media (max-width: 38em) {
    .container {
        width: 90%;
    }
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

nav h1 {
    font-size: 2.2rem;
    align-self: flex-end;
    margin-top: 1rem;
}

nav .toggle {
    width: 28%;
    height: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

@media (max-width: 38em) {
    nav .toggle {
        width: 45%;
    }
}

.toggle p {
    font-size: 16px;
    align-self: flex-end;
}

.toggle .nums,
.toggle {
    display: flex;
    align-items: center;
    margin-top: .3rem;
    margin-right: -.8rem;
}

.toggle .nums {
    margin-top: .7rem;
}

@media (max-width: 38em) {
    .toggle .nums {
        margin-right: -.5rem;
    }
}

.toggle .nums b {
    margin: 0 .5rem;
    margin-top: -0.3rem;
    font-size: 12px;
    justify-content: space-between;
}

@media (max-width: 38em) {
    .toggle .nums b {
        margin: 0 .55rem;
    }
}

.themeSwitch {
    width: 70px;
    height: 25px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #181F32;
    border-radius: 60px;
    margin-right: .5rem;
    margin-top: .5rem;
}

.themeSwitch span {
    height: 15px;
    width: 15px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all ease-in-out .5s;
}

.themeSwitch .first-btn:hover {
    background-color: #49608f;
}

.themeSwitch .second-btn:hover {
    background-color: #E6E7E7;
}

.themeSwitch .third-btn:hover {
    background-color: #17072B;
}

.display {
    width: 100%;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #181F32;
    margin-top: 2rem;
    border-radius: 10px;
}

.display input {
    width: 100%;
    height: 6rem;
    font-size: 3rem;
    font-weight: bolder;
    text-align: right;
    color: #fff;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 2rem;
}

.numbers {
    margin-top: 1.5rem;
    width: 100%;
    height: 30rem;
    background-color: #252D44;
    border-radius: 10px;
    padding: 2rem 1.6rem;
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 38em) {
    .numbers {
        gap: 20px;
        column-gap: 15px;
        padding: 1rem;
    }
}

.numbers button {
    cursor: pointer;
    border-radius: 10px;
    font-size: 2.1rem;
    font-weight: bolder;
    font-family: "League Spartan", sans-serif;
    background-color: #EBE2DB;
    color: #434A5A;
    border: none;
    border-bottom: .2rem outset #B4A49B;
    transition: all .3s ease-in-out;
}

.numbers button:hover {
    background-color: #FEFEFF;
}

.numbers button:active {
    border: 0 !important;
}

.numbers .delete {
    background-color: #647398;
    color: #fff;
    border-bottom: .2rem outset #3B4664;
}

.numbers .delete:hover,
.numbers .reset:hover {
    background-color: #A3B2E1;
}

.numbers .reset {
    grid-column: 1 / 3;
    background-color: #647398;
    color: #fff;
    border-bottom: .2rem outset #3B4664;
}

.numbers .equals {
    grid-column: 3 / 5;
    background-color: #D03E30;
    color: #fff;
    border-bottom: .2rem outset #96261D;
}

.numbers .equals:hover {
    background-color: #F96C5B;
}