@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Amita&family=Ubuntu&family=Poppins&family=Kalnia&family=Kalam&family=Rubik+Bubbles&family=Comfortaa&family=Montserrat&display=swap');


* {
    margin: 0;
    padding: 0; 
    font-family: 'Comfortaa', sans-serif; 
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.container {
    background: linear-gradient(135deg, rgba(255,255,255,0.1),rgba(255,255,255,0)); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 510px;
    /* height: 373px; */
    padding: 25px 25px;
    border-radius: 15px; 
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37); */
}

.container h1 {
    font-family: 'Montserrat', cursive;
    font-size: 2.6rem; 
    font-weight: 600; 
    color: #fc3503;
    text-align: center;
    user-select: none;
    letter-spacing: 1px;
} 

.container h2 {
    font-family: 'Comfortaa', cursive;
    text-align: center;  
    color: #fc3503;
    font-weight: 700;
    font-size: 1.4rem;
    user-select: none;
    letter-spacing: 0.5px;
}

.task-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    padding: 2px 0 0 0;
}

#p1 {
    /* font-family: system-ui; */ 
    color: #fc3503;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
} 

.icons{
    color: black; 
}


.input-vals {
    display: flex; 
    justify-content: space-between; 

}

.inputs {
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

.user-input {
    width: 49%;
}

.user-input input {
    background: none; 
}


.inputs label {
    font-family: 'Comfortaa', sans-serif; 
    color: #fc3503; 
    font-weight: 600; 
} 

input::placeholder {
    font-size: 1rem; 
    transform: translateY(-5px); 
    color: rgba(252, 53, 3, 0.795);
} 

input::content {
    padding-bottom: 20px;
}

.inputs:first-child {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inptsss {
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
    gap: 10px;
}

.inptsss div {
    display: flex;
    flex-direction: column; 
    width: 100%;
    gap: 10px;
}

.inptsss #type1, #type2 {
    border: none; 
    color: rgb(252, 53, 3);
    background-color: transparent;
}

#small {
    font-size: 13px;
}

#result,
#inputValue {
    height: 40px;
    font-size: 25px;
    border: 1px solid black;
    border-left: none;
    border-right: none;
    border-top: none;
    outline: none;
    padding: 0 10px; 
    font-weight: 600; 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#result:focus,
#inputValue:focus {
    height: 40px;
    font-size: 25px;
    border: 1px solid rgb(130, 130, 255);
    border-left: none;
    border-right: none;
    border-top: none;
    outline: none;
    padding: 0 10px;
}

.button {
    display: flex; 
    justify-content: center; 
}

#btn {
    height: 45px; 
    width: 50%;
    font-size: 1.4rem; 
    font-family: 'Comfortaa', cursive; 
    letter-spacing: 1px;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(255,255,255,0.1),rgba(255,255,255,0)); 
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(10px);
    color: rgb(252, 53, 3);
    border-bottom: solid black 1px;
    border-top: none;
    border-left: none;
    border-right: solid black 1px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0px 5px 7px 0px black;
    transition: all 0.3s;
}

#btn:hover{
    transform: translateY(3px);
    box-shadow: 0px 2px 7px 0px black;
}

#btn:active {
    height: 45px;
    font-size: 1.2rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(255,255,255,0.1),rgba(255,255,255,0)); 
    color: rgb(252, 53, 3);
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.resultss {
    display: flex;
    flex-direction: column;
    width: 49%;
}

#type1, #type2 {
    height: 40px;
    font-size: 25px;
    border: 1px solid black !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    outline: none;
    padding: 0 10px; 

}

#type1:focus,
#type2:focus {
    height: 41px;
    font-size: 25px;
    border: 1px solid black;
    border-left: none;
    border-right: none;
    border-top: none;
    outline: none;
    padding: 0 10px;
}

label {
    font-size: 17px;
    font-family: -webkit-pictograph;
    color: rgb(252, 53, 3);
}

.footer {
    height: 5vh;
    width: 25vw;
    position: absolute;
    bottom: 0px; 
    margin-bottom: 10px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.3),rgba(255,255,255,0)); 
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(10px);
}

.footer p {
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif
}


.footer p a {
    text-decoration: none;
    color: white; 
}

.footer p a:hover {
    font-size: 1.1rem; 
    color: blue;
}



@media only screen and (max-width: 575px) {
     .container {
        transform: scale(0.95);
        width:360px;
    }
    .inptsss div{
        width:48%;
    }
}

@media only screen and (max-width: 425px) {
    .container {
        transform: scale(0.9);
    }
}

@media only screen and (max-width: 340px) {
    .container {
        transform: scale(0.8);
    }
}

.background-image {
    margin: 0;
    padding: 0;
    background: url(bgimg.jpg)  center / cover no-repeat fixed;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}