@charset "utf-8";

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI, sans-serif;
}

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

    background:
    radial-gradient(circle at top left,
    rgba(255,182,217,.8),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(167,211,255,.8),
    transparent 35%),
    #d9c0eb;
	transition: 0.3s;
}


.bg-circle{
    position:absolute;
    border-radius:50%;
    filter:blur(40px);
}

.circle1{
    width:300px;
    height:300px;
    background:#ffb8d8;
    top:-50px;
    left:-50px;
}

.circle2{
    width:350px;
    height:350px;
    background:#a8d8ff;
    bottom:-100px;
    right:-100px;
}

.calculator{

    width:360px;
    padding:30px;
    border-radius:35px;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.3);
    box-shadow:
    0 8px 32px rgba(0,0,0,.1);
    position:relative;
    z-index:10;
}

.display input{

    width:100%;
    height:90px;
    border:none;
    outline:none;
    border-radius:25px;
    background:rgba(255,255,255,.25);
    backdrop-filter:blur(10px);
    text-align:right;
    padding-right:25px;
    font-size:48px;
    color:#4b4152;
    box-shadow:
    inset 2px 2px 8px rgba(255,255,255,.4),
    inset -2px -2px 8px rgba(0,0,0,.05);
}

.buttons{

    margin-top:25px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

button{

    height:65px;
    border:none;
    border-radius:20px;
    cursor:pointer;
    font-size:20px;
    color:#4b4152;
    background:rgba(255,255,255,.28);
    backdrop-filter:blur(8px);
    box-shadow:
    5px 5px 12px rgba(0,0,0,.08),
    -3px -3px 10px rgba(255,255,255,.3);

    transition:.3s;
}

button:hover{

    transform:translateY(-3px);
    box-shadow:
    8px 8px 18px rgba(0,0,0,.12);
}

.equal{

    grid-column:span 2;
    background:
    linear-gradient(
    135deg,
    #f5b5d7,
    #d7a7f7
    );

    color:white;
    font-weight:bold;
}

#themeBtn {
    position: absolute;
	width: 50px;
	height: 50px;
    top: 30px;
    right: 50px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-radius: 50%;
}

.dark{

    background:#181824;
	transition: 0.3s;

}
.fa-sun{
	color: white;
}