@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&family=Poppins:ital,wght@0,400;0,700;1,400&display=swap');
@import url(header.css);
@import url(form.css);
@import url(button.css);

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


body {
    background-color: #00010a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%232f2f2f' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.blur-layer {
    position: relative;
    display: block;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    /* background-image: */
    background-image:
        radial-gradient(at 74% 100%, #054152 0px, transparent 50%),
        radial-gradient(at 10% 0%, #06303c 0px, transparent 50%),
        radial-gradient(at 100% 100%, #00b46396 0px, transparent 40%),
        radial-gradient(at 100% 0%, #00b46371 0px, transparent 40%);
}

.merge-header-calculator {
    width: 90vw;
    height: 92lvh;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 10vw;
    /* background-color: red; */
}

#container {
    height: 72%;
    width: 100%;
    border: 1.4px solid #ffffff4d;
    border-radius: 32px;
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    gap: 22px;
    text-align: center;
    background: #3e3e3e30;
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 12px #ffffff14;
    background: linear-gradient(180deg,rgba(243,238,255,0) 0%,rgba(243,238,255,.05) 100%),rgba(147,130,255,.04);
    
}

#container textarea {
    font-family: "Kode Mono", monospace;
}

/* #plus {
    position: absolute;
    top: 9%;
    right: 9%;
    width: 300px;
    transform: rotateY(180deg) rotateZ(35deg);
} */

.input-section {
    height: 64%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    /* background-color: aqua; */
}

.output-section {
    height: 36%;
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: start;
    gap: 22px;
    /* background-color: rgb(255, 98, 98); */
}
.output-section-btn{
    display: flex;
    flex-direction: column;
    height: 100%;
    /* background-color: red; */
    justify-content: center;
    align-items: center;
}

.fill-ip-section {
    height: 100%;
    width: 64%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    /* background-color: antiquewhite; */
    gap: 22px;
}

.operation-section {
    height: 100%;
    width: 36%;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
    /* flex-wrap: wrap; */
    /* padding: 25px 10px 10px 10px; */
    gap: 22px;
    /* background-color: red; */
}


/* Change window for phone */
@media (max-width: 1108px) {
    .merge-header-calculator {
        flex-direction: column;
        align-items: center;
        justify-content: start;
        padding-top: 10px;
    }

    #container {
        margin: 10px;
    }

    .header p {
        font-size: 2.1rem;
    }
    .merge-header-calculator{
        gap: 0;
    }
    .blur-layer {
        height:150vh;
    }

}


/* fixing the scroll bar */
 /* width */
 ::-webkit-scrollbar {
    width: 1px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }