@font-face {
    font-family: "Raleway";
    src: url("./fonts/Raleway.ttf");
}

@font-face {
    font-family: "Lato Light";
    src: url("./fonts/Lato-Light.ttf");
}

@font-face {
    font-family: "Lato Bold";
    src: url("./fonts/Lato-Bold.ttf");
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("./fonts/IBMPlexMono-Regular.ttf");
}

body {
    background-color: #243447;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    color: #E0E0E0;

    font-family: "Lato Light";
    font-variant-numeric: tabular-nums;

    min-height: 100dvh;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 0;

    box-sizing: border-box;
}

main {
    flex: 1 0 auto;
    padding: 32px 64px;

    display: flex;
    flex-direction: column;

    gap: 32px;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-bottom: 32px;
}

h1 {
    font-family: "Raleway";
    font-variant-numeric: tabular-nums;
    font-size: 36px;

    margin: 0;
}

p {
    margin: 0;
}

a {
    text-decoration: none;
    color: #E0E0E0;
    cursor: pointer;
}

button {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: #3B5166;
    height: 64px;
    width: 64px;
    border-radius: 50%;

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35),
        0 1px 1px rgba(255, 255, 255, 0.05);
}

button:hover {
    box-shadow: 0 0 6px rgba(46, 134, 222, 0.4);
}

button:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

img {
    width: 20px;
    height: 20px;
}

#calculator,
.mathFuncsKeyboardLeft,
.mathFuncsKeyboardRight {
    background-color: #2c3e50;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 20px rgba(74, 144, 226, 0.25);
}

#calculator {
    padding: 20px;
    width: 300px;

    margin-left: 30px;
}

#display {
    background-color: #34495E;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.14);
    height: 100px;
    border-radius: 16px;

    padding: 8px 16px;

    text-align: right;

    font-family: "IBM Plex Mono";

    display: flex;
    flex-direction: column;
    gap: 10px;

    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 -2px 2px rgba(255, 255, 255, 0.05);
}

#calcDisplay {
    font-size: 42px;
}

#calcDisplayHistory {
    height: 16px;
    opacity: 0.75;

    font-size: 25px;
}

#keyboard {
    flex-wrap: nowrap;
    padding-top: 16px;
}

#footerText {
    font-size: 16px;
}

#attribution {
    font-size: 16px;
}

.btnsPlacement,
.keyboardBtns,
#row-1,
#row-2,
#row-3,
#row-4 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#calcOperators {
    margin-bottom: 7px;
}

.mathFuncsKeyboardLeft,
.mathFuncsKeyboardRight {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 10px;

    background-color: #263746;

    height: 360px;
    width: 100px;

    margin-top: 142px;
}

.mathFuncBtn,
#powBtn {
    background-color: #384D61;

    width: 56px;
    height: 56px;
}

.closed,
.openned {
    position: absolute;
    transform: translateX(-50%);
    z-index: 10;

    box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.05);
}

.closed,
.openned {
    width: 10px;
    height: 15px;
}

.closed.left {
    left: 7.5%;
}

.closed.right {
    right: 5%;
}

.openned.left {
    left: 7.8%;
}

.openned.right {
    right: 5.2%;
}

.top {
    top: 35%;
}

.bottom {
    top: 85%;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.text {
    font-size: 20px;
    font-weight: 400;

    color: #E0E0E0;
}

.utilityBtn {
    background-color: #465766;
    height: 48px;
    width: 48px;

    padding: 0;
}

#utilityBtns {
    display: flex;
    gap: 6px;
}

.keyboardBtn {
    background-color: #3B5166;
}

.operatorBtn {
    background-color: #426B88;
}

#equalBtn {
    background-color: #1E6FB2;
}

.mainScreen {
    display: flex;

    position: relative;
}

.hidden {
    display: none;
}

#hint {
    margin-left: 10px;
}

#hint:hover {
    opacity: 0.5;
}

.hintText {
    box-sizing: border-box;

    width: 200px;
    height: 250px;
    background-color: rgba(44, 62, 80, 0.85);
    border-radius: 8px;
    padding: 0 8px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;

    color: #F0F0F0;
}

#mobileHint {
    display: none;
}

@media screen and (max-width: 460px) {

    .hinge,
    #hint {
        display: none;
    }

    #mobileHint {
        display: inline;
    }

    .header {
        flex-direction: column;
        position: relative;
    }

    .hintText {
        height: auto;
        padding: 8px 8px;

        position: absolute;
        z-index: 10;
        margin-top: 200px;
    }

    #calculator {
        margin: 0;
    }

    #mathFuncsBtn {
        display: none;
    }

    #utilityBtns {
        gap: 10px;
    }

    .utilityBtn {
        width: 64px;
        height: 64px;
    }
}

@media screen and (max-width: 915px) and (orientation: landscape) {

    .hinge,
    #hint {
        display: none;
    }

    #mobileHint {
        display: inline;
    }

    .header {
        flex-direction: column;
    }

    #keyboard {
        display: flex;
        justify-content: center;

        padding: 10px 50px;
        padding-top: 20px;

        gap: 50px;
    }

    .header {
        flex-direction: column;
        position: relative;
    }

    .hintText {
        height: auto;
        padding: 8px 8px;

        position: absolute;
        z-index: 10;
        margin-top: 200px;
    }

    button,
    .utilityBtn,
    .mathFuncBtn,
    #powBtn {
        text-align: center;
        padding: 0;
        width: 80px;
        height: 30px;
    }

    #mathFuncsBtn {
        display: none;
    }

    #calculator {
        width: 100vw;
        margin: 0;

        height: auto;

        box-sizing: border-box;
    }

    .mathFuncsKeyboardLeft,
    .mathFuncsKeyboardRight {
        margin: 0;

        width: auto;
        height: auto;

        background-color: #2c3e50;

        border: none;
        border-radius: 0;

        box-shadow: none;

        justify-content: flex-start;
    }

    .text {
        font-size: 14px;
    }

    .mobileBtnsPlacement,
    #mainCalcOperators,
    #calcOperators {
        display: flex;
        flex-direction: column;
    }

    #utilityBtns,
    #row-1,
    #row-2,
    #row-3,
    #row-4 {
        gap: 50px;
    }

    .keyboardBtns {
        flex-direction: column;
    }
}