style.css

    @import url('https://fonts.googleapis.com/css2?family=Anton&family=Chelsea+Market&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
*{
    box-sizing:border-box;
}
body {
    background-color:black;
    margin:0;
}
body:before{
    content:" ";
    width:80%;
    height:80%;
    position:fixed;
    background-size:80%;
    background-color:transparent;
    background-repeat:no-repeat;
    z-index:-2;
    background-image:url("https://i.pinimg.com/originals/24/1c/34/241c343b3ea096a651f0db708070d00f.gif");
    background-position:50% 50%;
    opacity:0.5;
}
.overall_cover{
    width:100vw;
    height:100vh;
    position:fixed;
    background-color:transparent; background-image:url("https://i.pinimg.com/originals/7d/b6/a5/7db6a534485b92e268643a18bd2326b9.gif");
    background-size:cover;
    opacity:0.5;
    background-position:50% 50%;
    z-index:-1;
}
.top{
    width:100%;
    height:20px;
}


.searchbar{
    width:80%;
    margin:0 auto;
    height:10px;
    margin-top:0px;
    padding:10px;
    display:flex;
    align-items: center;
    justify-content: center;
}
input[type="text"]{
    width:100%;
    height:35px;
    border-radius:10px 0 0 10px;
    border-style:none;
    outline:none;
    padding:0 10px;
    font-family: 'Patrick Hand', cursive;
}
button{
    font-size:25px;
    height:35px;
    display:flex;
    align-items: center;
    border-style:none;
    justify-content: center;
    border-radius:8px;
    font-weight:0 !important;
}
.result{
    height:calc(100vh - 85px);
    width:calc(100% - 20px);
   /* background-color:#073d49ff;*/
    margin:0px auto 10px auto;
    border-radius:8px;
    backdrop-filter:blur(1px) opacity(0.5);
    position:relative;
    overflow:scroll;
    padding:10px;
    color:white;
}
.top1{
    height:calc(100vh - 85px);
    width:calc(100% - 20px);
    top:75px;
    /*background-color:#073d49;*/
    left:10px;
    border-radius:10px;
    backdrop-filter:blur(1px) opacity(0.5);
    position:fixed;
    overflow:scroll;
    padding:10px;
    color:white;
    background-color:white;
    opacity:0.1;
}
#atomic_name{
    font-size:25px;
    text-align:center;
    width:auto;
    font-family: 'Chelsea Market', cursive;
    padding:0 10px;
    border-bottom:solid;
}
#properties{
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0 10px;
}
#property_name{
    width:100%;
    font-family: 'Patrick Hand', cursive;
    text-transform:capitalize;
    overflow:scroll;
}
.property_value{
    font-family: 'Open Sans Condensed', sans-serif;
    width:100%;
    text-align:right;
    overflow:scroll;
}
.swet{
    width:50% !important;
    font-size:5px;
}
/*Loader code goes here --------------------------*/

.loader_container{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100vw;
    background-color:#031e1b;
}
.loader_sub{
    height:150px;
    width:150px;
    background-color:transparent;
    margin-top:calc(50vh - 150px);
    margin-left:calc(50vw - 75px);
    position:relative;
}
.loader_sub > div{
    height:5px;
    width:150px;
    position:absolute;
    bottom:0;
    border-radius:50px;
    animation:animate1 1s ease-out infinite;
    background:linear-gradient(90deg, transparent ,#09444b);
    background-repeat:no-repeat;
}
.loader_s > div{
    height:4px !important;
    width:130px !important;
}
#loader_1{
    transform-origin:50% 50%;
    transform:rotate(180deg);
}
#loader_2{
    transform:rotate(-60deg);
    transform-origin:0% 50%;
}
#loader_3{
    transform:rotate(60deg);
    transform-origin:100% 50%;
}

@keyframes animate1{
    0%{
        background-size:0% 100%;
    }
    100%{
        background-size:100% 100%;
    }
    
}
.loader_text{
    height:20px;
    width:100vw;
    background-color:#091f2e;
    position:fixed;
    margin-top:50px;
    text-align:center;
    font-size:30px;
    letter-spacing:5px;
}
.loader_text::before{
    color:white;
    content:"Loading";
    animation:animate2 2s infinite;
}

@keyframes animate2{
    0%{
        content:"Loading";
    }
    25%{
        content:"Loading.";
    }
    50%{
        content:"Loading..";
    }
    75%{
        content:"Loading...";
    }
    100%{
        content:"Loading...";
    }
    
}