TO FIX THE UI, REPLACE THE CODE IN "css.css" with this below
#u817{
display:block;
vertical-align:top
}
#u894-4{ ----type of drug font
text-shadow:1px 1px 3px rgba(0,0,0,.43);
box-shadow:none;
background-color:transparent;
font-size:20px;
line-height:24px;
text-align:left;
color:#fff;
font-family:chivo,sans-serif;
font-weight:400;
font-style:italic
}
#u793-4{
box-shadow:none;
background-color:transparent;
line-height:27px;
font-size:32px;
text-align:left;
font-family:chivo,sans-serif;
font-weight:900
}
#u851{
background-color:#fff;
opacity:.78;
border-radius:20px
}
#u798-4,#u801-4,#u804-4,#u839-4{ ---growth rate water food
text-shadow:1px 1px 3px rgba(0,0,0,.43);
box-shadow:none;
background-color:transparent;
font-size:18px;
line-height:24px;
text-align:right;
color:#fff;
font-family:chivo,sans-serif;
font-weight:400;
font-style:italic
}
#u857,#u860,#u863,#u879{
background-color:#ddd;
opacity:.47;
border-radius:20px
}
#u836-4,#u866-4,#u869-4,#u872-4{
box-shadow:none;
background-color:transparent;
font-size:18px;
line-height:22px;
text-align:left;
font-family:chivo,sans-serif;
font-weight:400;
font-style:italic
}
#u882,#u885,#u888,#u891{
background-clip: text;
border-radius:20px;
animation: sweep 0.8s ease-in infinite;
animation-delay: 3s;
}
@keyframes sweep {
0% {
background-position: -100px 0;
}
100% {
background-position: 100% 100%;
}
}
html{
min-height:100%;
min-width:100%;
user-select: none;
-ms-text-size-adjust:none
}
body,div,p{
margin:0;
padding:0;
border-width:0;
border-style:solid;
border-color:transparent;
-webkit-transform-origin:left top;
-ms-transform-origin:left top;
-o-transform-origin:left top;
transform-origin:left top;
background-repeat:no-repeat
}
img{
border:0;
border-style:solid;
-webkit-transform-origin:left top;
-ms-transform-origin:left top;
-o-transform-origin:left top;
transform-origin:left top
}
body{
font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
text-align:left;
font-size:14px;
line-height:17px;
word-wrap:break-word;
text-rendering:optimizeLegibility;
-moz-font-feature-settings:'liga';
-ms-font-feature-settings:'liga';
-webkit-font-feature-settings:'liga';
font-feature-settings:'liga'
}
.colelem{
display:inline;
float:left;
clear:both
}
.clearfix:after{
content:"\0020";
visibility:hidden;
display:block;
height:0;
clear:both
}
[data-whatinput=mouse] :focus,[data-whatinput=touch] :focus{
outline:0
}
.grpelem{
display:inline;
float:left
}
p{
max-height:1000000px
}
.colelem100,.verticalspacer{
clear:both
}
@media screen and (-webkit-min-device-pixel-ratio:0){
body{
text-rendering:auto
}
}
#information{
position: absolute;
top: 30vh;
left: 10vw;
width: 40%;
height: 28%;
}
#buttons {
position: absolute;
display: flex;
bottom: 0px;
flex-wrap: wrap;
width: 70%;
justify-content: center;
width: 358px;
height: 50px;
}
#button:hover {
opacity: 1.0;
position: relative;
padding: 5px;
font-size: 15px;
margin-top: 5px;
font-weight: 700;
height: 15px;
margin-left: 5px;
border: 2px solid #FFFFFF;
color:#6dba4c;
transition: 0.2s;
}
#button {
position: relative;
padding: 5px;
font-size: 15px;
margin-top: 5px;
font-weight: 700;
height: 15px;
margin-left: 5px;
opacity: 0.5;
border: 2px solid #FFFFFF;
color:white;
transition: 0.2s;
}
#pu817{
z-index:18;
width:.01px;
margin-left:40px
}
#u817{
z-index:18;
margin-bottom:-4px;
position:relative;
margin-right:-10000px
}
#pu894-4{
z-index:49;
width:.01px;
margin-right:-10000px;
margin-top:17px;
margin-left:83px
}
#u894-4{
z-index:49;
width:88px;
min-height:13px;
position:relative
}
#u793-4{
z-index:2;
width:206px;
min-height:22px;
top:-2px;
margin-bottom:-2px;
position:relative
}
#u851{
z-index:28;
width:358px;
height:1px;
margin-top:10px;
position:relative
}
#pu798-4{
z-index:6;
width:.01px;
margin-left:2px;
margin-top:19px
}
#u798-4{
z-index:6;
width:88px;
min-height:13px;
position:relative;
margin-right:-10000px
}
#u836-4{
z-index:20;
width:100px;
min-height:13px;
position:relative;
margin-right:-10000px;
margin-top:2px;
left:297px
}
#u879{
z-index:44;
width:196px;
height:4px;
position:relative;
margin-right:-10000px;
margin-top:11px;
left:94px
}
#u882{
z-index:45;
width:0px;
height:4px;
position:relative;
margin-right:-10000px;
margin-top:11px;
left:94px
}
#pu801-4{
z-index:10;
width:.01px;
margin-left:12px
}
#u801-4{
z-index:10;
width:78px;
min-height:13px;
position:relative;
margin-right:-10000px
}
#u857{
z-index:29;
width:196px;
height:4px;
position:relative;
margin-right:-10000px;
margin-top:10px;
left:84px
}
#u866-4{
z-index:32;
width:100px;
min-height:13px;
position:relative;
margin-right:-10000px;
margin-top:1px;
left:287px
}
#u885{
z-index:46;
width:0px;
height:4px;
position:relative;
margin-right:-10000px;
margin-top:10px;
left:84px
}
#pu804-4{
z-index:14;
width:.01px;
margin-left:21px
}
#u804-4{
z-index:14;
width:69px;
min-height:13px;
position:relative;
margin-right:-10000px
}
#u860{
z-index:30;
width:196px;
height:4px;
position:relative;
margin-right:-10000px;
margin-top:10px;
left:75px
}
#u869-4{
z-index:36;
width:100px;
min-height:13px;
position:relative;
margin-right:-10000px;
margin-top:1px;
left:278px
}
#u888{
z-index:47;
width:0px;
height:4px;
position:relative;
margin-right:-10000px;
margin-top:10px;
left:75px
}
#pu839-4{
z-index:24;
width:.01px;
margin-left:33px
}
#u839-4{
z-index:24;
width:57px;
min-height:13px;
position:relative;
margin-right:-10000px
}
#u863{
z-index:31;
width:196px;
height:4px;
position:relative;
margin-right:-10000px;
margin-top:10px;
left:63px
}
#u872-4{
z-index:40;
width:100px;
min-height:13px;
position:relative;
margin-right:-10000px;
left:266px
}
#u891{
z-index:48;
width:0px;
height:4px;
position:relative;
margin-right:-10000px;
margin-top:10px;
left:63px
}
.button {
outline: none;
border: none;
}
body{
position:relative;
min-width:1716px
}
/* Proccesing Table */
#processingTable {
height: 224px;
width: 554px;
position: absolute;
scale: 1.3;
top: 30vh;
left: 10vw;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
@keyframes pulse {
0% {
box-shadow:0 0 6px rgba(255, 255, 255,.33),0 0 6px rgba(255,255,255,.33);
}
50% {
box-shadow:0 0 13px rgba(255, 255, 255,.63),0 0 13px rgba(255,255,255,.63);
}
100% {
box-shadow:0 0 6px rgba(255, 255, 255,.33),0 0 6px rgba(255, 255, 255,.33);
}
}
#u1670-4{
box-shadow:none;
background-color:transparent;
line-height:25px;
font-size:21px;
font-family:chivo,sans-serif;
font-weight:900;
font-style:italic
}
#u1625-4{
background-color:transparent;
line-height:38px;
font-size:32px;
color:#fff;
font-family:chivo,sans-serif;
font-weight:900;
font-style:italic
}
#u1694{
border-width:0;
border-color:transparent;
background-color:#1f1f1f;
opacity:.45;
border-radius:10px
}
#u1700{
border-width:0;
border-color:transparent;
border-radius:10px
}
#u1713{
animation: pulse 2s infinite;
border-width:0;
border-color:transparent;
background-color:#1f1f1f;
opacity:.63;
border-radius:10px
}
#u1767-4{
text-shadow:0 0 1px rgba(255,255,255,.62),0 0 1px rgba(255,255,255,.62);
box-shadow:none;
background-color:transparent;
line-height:26px;
font-size:22px;
text-align:right;
color:#fff;
font-family:chivo,sans-serif;
font-weight:400;
font-style:italic
}
#gradient {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 300px;
}
#u1785{
box-shadow:0 3px 8px rgba(0,0,0,.5);
background-color:rgba(31, 31, 31, 0.6);
outline: none;
border: none;
color: white;
font-weight: 700;
border
text-align: center;
border-radius:10px 0 0 10px
}
#u1770{
box-shadow:1px 1px 8px rgba(0,0,0,.24);
border-radius:0 10px 10px 0;
background-size: 200% 100%;
background-position: right bottom;
border: none;
opacity: 0.5;
transition: all .2s ease-out;
}
#u1770:hover {
opacity: 1.0;
}
#delete:hover {
opacity: 1.0;
}
#delete {
width: 29px;
height: 29px;
color: white;
font-size: 20px;
font-weight: 700;
text-align: center;
border-radius: 10px;
line-height: 30px;
margin-left: 175px;
opacity: 0.5;
transition: all .2s ease-out;
}
#u1773-4{
text-shadow:0 0 1px rgba(255,255,255,.62),0 0 1px rgba(255,255,255,.62);
box-shadow:none;
background-color:transparent;
line-height:19px;
font-size:16px;
text-align:center;
color:#fff;
font-family:chivo,sans-serif;
font-weight:400;
font-style:italic
}
#u1734,#u1749,#u1758,#u1776{
box-shadow:2px 2px 8px rgba(0,0,0,.67);
border-radius:10px
}
#u1714,#u1731,#u1737,#u1750,#u1759,#u1777{
background-color:transparent
}
#u1740-4,#u1751-4,#u1760-4,#u1778-4{
box-shadow:none;
background-color:transparent;
line-height:22px;
font-size:18px;
text-align:right;
color:#fff;
font-family:chivo,sans-serif;
font-weight:400;
font-style:italic
}
#u1670-4{
z-index:6;
width:547px;
min-height:19px;
margin-left:7px;
position:relative
}
#u1625-4{
z-index:2;
width:547px;
min-height:19px;
margin-left:7px;
top:-6px;
margin-bottom:-6px;
position:relative
}
#pu1694{
z-index:10;
width:.01px;
margin-left:7px;
margin-top:4px
}
#u1694{
z-index:10;
width:475px;
height:9px;
position:relative;
margin-right:-10000px
}
#u1700{
z-index:11;
width:0px;
height:9px;
position:relative;
margin-right:-10000px
}
#pu1713{
z-index:12;
width:.01px;
margin-top:13px
}
#u1713{
z-index:12;
width:118px;
height:118px;
position:relative;
margin-right:-10000px;
left:364px
}
#u1714{
z-index:13;
width:98px;
position:relative;
margin-right:-10000px;
margin-top:10px;
left:374px
}
#u1767-4{
z-index:33;
width:44px;
min-height:13px;
margin-bottom:-6px;
position:relative;
margin-right:-10000px;
margin-top:78px;
left:58px
}
#u1731{
z-index:14;
width:356px;
padding-bottom:7px;
position:relative;
margin-right:-10000px
}
#ppu1734{
z-index:0;
width:.01px;
margin-right:-10000px;
margin-top:4px;
width: 333px;
min-height: 126px;
margin-left:7px
}
#ingrediants {
width: 333px;
display: grid;
grid-template-columns: 80px 80px 80px 80px;
}
#pu1734{
z-index:15;
width:.01px;
margin-left:2px
}
#u1734{
z-index:15;
width:75px;
height:75px;
animation: pulse 2s infinite;
position:relative;
margin-right:-10000px
}
#u1737{
z-index:16;
width:75px;
height: 75px;
position:relative;
margin-right: 4px;
margin-top: 4px;
}
#u1740-4{
z-index:17;
width:38px;
min-height:13px;
margin-bottom:-7px;
position:relative;
margin-right:-10000px;
margin-top:46px;
left:27px
}
#u1749{
z-index:21;
width:75px;
height:75px;
position:relative;
margin-right:-10000px;
left:80px
}
#u1750{
z-index:22;
width:61px;
position:relative;
margin-right:-10000px;
margin-top:8px;
left:87px
}
#u1751-4{
z-index:23;
width:38px;
min-height:13px;
margin-bottom:-7px;
position:relative;
margin-right:-10000px;
margin-top:46px;
left:27px
}
#u1758{
z-index:27;
width:75px;
height:75px;
position:relative;
margin-right:-10000px;
left:161px
}
#u1759{
z-index:28;
width:61px;
position:relative;
margin-right:-10000px;
margin-top:8px;
left:167px
}
#u1760-4{
z-index:29;
width:38px;
min-height:13px;
margin-bottom:-7px;
position:relative;
margin-right:-10000px;
margin-top:46px;
left:27px
}
#pu1785{
z-index:48;
position: relative;
margin-top: 12px;
}
#u1785{
z-index:48;
width:70px;
height:29px;
text-align: center;
position:relative;
margin-right:-10000px
}
#u1770{
z-index:37;
width:99px;
padding-bottom:4px;
position:relative;
margin-right:-10000px;
left:70px
}
#u1773-4{
z-index:38;
width:89px;
min-height:13px;
position:relative;
margin-right:-10000px;
margin-top:5px;
left:5px
}
#pu1776{
z-index:42;
width:.01px;
margin-right:-10000px;
margin-top:4px;
margin-left:250px
}
#u1776{
z-index:42;
width:75px;
height:75px;
position:relative;
margin-right:-10000px
}
#u1777{
z-index:43;
width:61px;
position:relative;
margin-right:-10000px;
margin-top:7px;
left:7px
}
#u1778-4{
z-index:44;
width:38px;
min-height:13px;
margin-bottom:-7px;
position:relative;
margin-right:-10000px;
margin-top:46px;
left:27px
}
/* Animation */
.slide-right {
-webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-right {
0% {
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slide-right {
0% {
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}