@import url('https://fonts.googleapis.com/css2?family=Tiro+Bangla&display=swap');

* {
    color: rgb(39, 39, 39);
    font-family: Tiro Bangla;
}

body {
    background: linear-gradient(rgb(219, 219, 219),rgb(239, 239, 239));
    background-attachment: fixed;
    margin: 0px;
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  

#attrib {
    display: inline;
    float: right;
    margin: 0vw 2vw 1vw 0vw;
    bottom: 0vw;
    color: rgb(74,74,74);
    padding: 0px;
}

#att {
    text-decoration-line: none;
    color: rgb(74,74,74);
}

#att:hover {
    text-decoration:underline;
    animation: rainbow 3s linear infinite both;
}

@keyframes rainbow {
    0% {
      color: #1ff0ff;
    }
    25% {
      color: #b22cff;
    }
    50% {
      color: #ff2626;
    }
    75% {
      color: #ffc812;
    }
    100% {
      color: #52ff1d;
    }
  }

.pvbtn {
    float: right;
    margin: 0rem 0.5rem;
    padding: 0.8rem 0.7rem 0.5rem 0.7rem;
    background: rgb(26, 26, 26);
    color:rgb(224, 224, 224);
    border-radius: 0 0 1rem 1rem;
    font-size: 4vw;
    position: relative;
    user-select: none;
    cursor: pointer;
}

.pvbtn:hover {
    background: rgb(54, 54, 54);
}

nav {
    height: 18vw;
}

#heading {
    font-size: 8vw;
    margin: 4vw 0rem;
    user-select: none;
}

header {
    margin: 0vw 0vw 0vw 2vw;
}

.inputs {
    font-size: 6vw;
    padding: 0rem;
    line-height: 0rem;
    margin: 0vw 0vw 0vw 2vw;
}

.disc {
    margin: 4vw 0rem;
    color: rgb(74, 74, 74);
    user-select: none;
}

.i-box {
    margin: 4rem 0rem;
}

.r-box {
    margin: 4rem 0rem;
}

.t-box {
    margin: 4rem 0rem;
}

#iinp {
    padding: 0.5rem;
    font-size: 5.5vw;
    margin: 0rem;
    width: 70%;
    border-radius: 0.5rem;
    border: none;
}

#iinp:focus {
	animation: jello-vertical 0.9s both;
}
#rinp:focus {
	animation: jello-vertical 0.9s both;
}
#tinp:focus {
	animation: jello-vertical 0.9s both;
}
@keyframes jello-vertical {
    0% {
      transform: scale3d(1, 1, 1);
    }
    30% {
      transform: scale3d(0.75, 1.25, 1);
    }
    40% {
      transform: scale3d(1.05, 0.75, 1);
    }
    50% {
      transform: scale3d(0.85, 1.15, 1);
    }
    65% {
      transform: scale3d(1.00, 0.95, 1);
    }
    75% {
      transform: scale3d(0.95, 1.05, 1);
    }
    100% {
      transform: scale3d(1, 1, 1);
    }
  }
  
  
#rinp {
    width: 70%;
    padding: 0.5rem;
    font-size: 5.5vw;
    margin: 0rem;
    border-radius: 0.5rem;
    border: none;
}

#tinp {
    padding: 0.5rem;
    font-size: 5.5vw;
    margin: 0rem;
    width: 62%;
    border-radius: 0.5rem;
    border: none;
}

#perc {
    display: inline-block;
    margin: 0rem;
    position: relative;
    top: 0.5rem;
    font-size: 9vw;
    color: rgb(74, 74, 74);
    user-select: none;
}

#dol {
    display: inline-block;
    margin: 0rem;
    position: relative;
    top: 0.5rem;
    font-size: 11vw;
    color: rgb(74, 74, 74);
    user-select: none;
}

#y {
    display: inline-block;
    margin: 0rem;
    position: relative;
    top: 0.5rem;
    font-size: 6vw;
    color: rgb(74, 74, 74);
    user-select: none;
}

.output {
    font-size: 5.5vw;
    margin: 0vw 0vw 6vw 2vw;
}

#ft {
    user-select: none;
    color: rgb(74, 74, 74);
}

@media screen and (min-width: 600px) {
    .pvbtn {
        font-size: 3vw;
    }
    
    nav {
        height: 8vw;
    }
    
    #heading {
        font-size: 7vw;
        margin: 4vw 0rem;
    }
    
    .inputs {
        font-size: 4vw;
    }
    
    #iinp {
        font-size: 3vw;
    }
    
    #rinp {
        font-size: 3vw;
    }
    
    #tinp {
        font-size: 3vw;
    }
    
    #perc {
        font-size: 5vw;
    }
    
    #dol {
        font-size: 7vw;
    }
    
    #y {
        font-size: 4vw;
    }
    
    .output {
        font-size: 4.5vw;
    }
}

@media screen and (min-width: 850px) {  
    .disc {
        margin: 3vw 0rem;
        display:inline-block;
        width: 16ch;
        text-align: center;
    }
    
    #iinp {
        width: 30%;
    }
    
    #rinp {
        width: 30%;
    }
    
    #tinp {
        width: 25%;
    }
    
    #perc {
        font-size: 5vw;
    }
    
    #dol {
        font-size: 6vw;
    }
    
    #y {
        font-size: 3.6vw;
    }
    
    .output {
        font-size: 4.5vw;
    }
}

@media screen and (min-width: 950px) {
    #ft {
        display: inline-block;
    }
    #output {
        display: inline-block;
    }
}

@media screen and (min-width: 950px) {
    #ft {
        display: inline-block;
    }
    #output {
        display: inline-block;
    }

    @media screen and (min-width: 1050px) {
        .pvbtn {
            padding: 0.8rem 0.7rem 0.5rem 0.7rem;
            font-size: 1.5vw;
            margin: 0rem 1rem;
        }
        
        nav {
            height: 1vw;
        }
        
        #heading {
            font-size: 4.5vw;
            margin: 1rem 2rem 2vw 0rem;
        }
        
        .inputs {
            font-size: 2vw;
            margin: 0rem 0rem 0rem 1.5rem;
        }

        .i-box {
            margin: 1rem 0rem;
        }
        
        .r-box {
            margin: 1rem 0rem;
        }
        
        .t-box {
            margin: 1rem 0rem;
        }
        
        #iinp {
            padding: 1rem;
            font-size: 2vw;
            margin: 0rem;
            width: 30%;
        }
        
        #rinp {
            width: 30%;
            padding: 1rem;
            font-size: 2vw;
            margin: 0rem;
        }
        
        #tinp {
            padding: 1rem;
            font-size: 2vw;
            margin: 0rem;
            width: 30%;
        }
        
        #perc {
            font-size: 3vw;
        }
        
        #dol {
            font-size: 4vw;
        }
        
        #y {
            font-size: 2vw;
        }
        
        .output {
            font-size: 3.5vw;
            margin: 0rem 0rem 0rem 2rem;
        }
    }
}

@media screen and (min-width: 1800px) {
    .pvbtn {
        font-size: 1vw;
    }
}