#app {
    background: var(--bgcolor);
    height: 100vh;
    font-family: 'Montserrat', sans-serif;
    animation: fullfade 1s linear;
}

/* @keyframes fullfade {
    30% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} */

.toggle {
    width: 30px;
    height: 30px;
}

.toggle svg {
    width: 100%;
    padding: 0;
    margin: 0;
    fill: var(--secondarycolor)
}

.theme-1 {
    --bgcolor: #121e30;
    --gradientcolor1: #132033;
    --gradientcolor2: #101b2b;
    --shadow1: #070c13;
    --shadow2: #1d304d;
    --primarycolor: #5274a7;
    --secondarycolor: #92baf7;
    --optionbg: #1d304d;
    --placeholder: #445c80;
    transition: all 140ms ease-in-out;
}

.theme-2 {
    --bgcolor: #d1d1d1;
    --gradientcolor1: #e0e0e0;
    --gradientcolor2: #bcbcbc;
    --shadow1: #545454;
    --shadow2: #ffffff;
    --primarycolor: #5a5a5a;
    --secondarycolor: #333333;
    --optionbg: #b6b6b6;
    --placeholder: #616161;
    transition: all 140ms ease-in-out;
}

a {
    text-decoration: none;
}

.neumorph {
    cursor: pointer;
    border-radius: 4px;
    background: linear-gradient(145deg, var(--gradientcolor1), var(--gradientcolor2));
    box-shadow:  2px 2px 4px var(--shadow1), -2px -2px 4px var(--shadow2);
}

.real {
    color: var(--primarycolor); 
    font-weight: 400;
}

#moeda {
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    color: var(--primarycolor); 
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

#dropBtn svg {
    width: 20px;
    fill: var(--secondarycolor);
    transition: all 100ms ease-in-out;
}

#dropBtn::selection svg {
    transform: rotate(0deg);
    transition: all 100ms ease-in-out;
}

.dropoff {
    display: none;
}

.dropdown {
    position: relative;
}

.dropon {
    width: 90%;
    height: 20rem;
    overflow-y: scroll;
    display: inline-block !important;
    color: var(--secondarycolor) !important;
    background: var(--shadow2) !important;
    position: absolute; 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    text-align: center;
    border-radius: 4px;
}

.dropon::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.option {
    /* padding:  10px; */
    
    border-top: 1px solid rgba(121, 160, 243, 0.1)
}

.dropon::-webkit-scrollbar {
    /* display: none; */
    width: 4px;
  }

.dropon::-webkit-scrollbar-track {
    background: transparent;
}

.dropon::-webkit-scrollbar-thumb {
    background: var(--primarycolor);
  }

.input input {
    width: 100%;
    background: transparent;
    outline: none;
}

.input svg {
    width: 25px;
    fill: var(--secondarycolor);
    padding: 6px;
    font-size: 19px;
    border-radius: 6px;
    background: linear-gradient(145deg, var(--gradientcolor1), var(--gradientcolor2));
    box-shadow:  1px 1px 2px var(--shadow1), -1px -1px 2px var(--shadow2);
}

#quotation {
    color: var(--secondarycolor);
}

.input svg:active {
    border-radius: 6px;
    background: var(--bgcolor);
    box-shadow: inset 1px 1px 2px var(--shadow1), inset -1px -1px 2px var(--shadow2);
}

.secondary-color {
    color: var(--secondarycolor);
    font-weight: 400;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
     margin: 0;
}

#n::placeholder {
    font-weight: 500;
    color: var(--placeholder);
}

#resetBtn {
    margin: 0 auto;
}

#status svg {
    fill: var(--secondarycolor);
    width: 25px;
}

#resetBtn svg {
    width: 25px;
    fill: none;
    stroke: var(--secondarycolor);
    stroke-width: 2;
}

#result {
    font-weight: 800;
	text-transform: uppercase;
    border-radius: 8px;
    text-shadow:  4px 4px 7px var(--shadow1), -4px -4px 7px var(--shadow2);
}

#btnResult:hover {
    color: var(--primarycolor);
}

#btnResult svg {
    width: 25px;
    fill: var(--secondarycolor)
}