@import url(https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900);

/* CSS Reset */
/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}
/*
    2. Remove default margin
  */
* {
    margin: 0;
}
/*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/*
    5. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}
/*
    6. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
    font: inherit;
}
/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}
/*
    8. Create a root stacking context
  */
#root,
#__next {
    isolation: isolate;
}

* {
    transition: all 0.2s ease-in-out;
}

body {
    background-color: #e0e1dd;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 1.4vw;
    min-height: 100vh;
}

#wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 2vw;
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

#input {
    margin-top: 4vh;
    padding: 0.4%;
    padding-left: 1%;
    padding-right: 1%;
    background-color: #e0e0e0;
    border-radius: 50px;
    box-shadow:
        inset 4px 4px 10px #bcbcbc,
        inset -4px -4px 10px #ffffff;
    color: #4d4d4d;
    padding: 15px 40px;
    border: 2px solid rgb(206, 206, 206);
}

#input:hover {
    transform: translateZ(1000px)
    box-shadow:
        inset 2px 2px 5px #bcbcbc,
        inset -2px -2px 5px #ffffff,
        2px 2px 5px #bcbcbc,
        -2px -2px 5px #ffffff;
}

#equalSign {
    margin-top: auto;
    width: fit-content;
    font-size: 3vw;
}

#result {
    margin-top: 4vh;
    padding: 0.4%;
    padding-left: 1%;
    padding-right: 1%;
    background-color: #e0e0e0;
    border-radius: 50px;
    box-shadow:
        inset 4px 4px 10px #bcbcbc,
        inset -4px -4px 10px #ffffff;
    color: #4d4d4d;
    padding: 15px 40px;
    border: 2px solid rgb(206, 206, 206);
}

#result:hover {
    box-shadow:
        inset 2px 2px 5px #bcbcbc,
        inset -2px -2px 5px #ffffff,
        2px 2px 5px #bcbcbc,
        -2px -2px 5px #ffffff;
}

#title {
    margin: 3vh auto;
    width: fit-content;
    padding: 0.4%;
    padding-left: 1%;
    padding-right: 1%;
    border-radius: 10000px;
    background: #e0e0e0;
    box-shadow:
        20px 20px 60px #bebebe,
        -20px -20px 60px #ffffff;
    border: 2px solid rgb(206, 206, 206);
}