/*           my css file is a mess             */
/*    at least it's only 200 lines of mess     */


* { margin:0; padding:0; font-family: 'quicksand' !important; }
.hidden { display:none; }
.not-hidden { display:block !important; }
.hide { height:0 !important; }
.margin-4px { margin-left: 8px; margin-right: 8px; }
.margin-60px { margin-left:60px; margin-right:60px; }
.margin-100px { margin-left:100px; margin-right:100px; }
/* .small-margin-top { margin-top: 30px; } */
.body-background { background-color: rgb(250, 238, 223);  }
.responsive-margin { margin-left:clamp(30px, 9vw, 160px); margin-right:clamp(30px, 9vw, 160px); }
.very-small-margin { margin:10px; }
.small-margin { margin:20px; }
.small-margin-bottom { margin-bottom: 20px;  }
.very-small-margin-top { margin-top: 10px; }
.small-margin-top { margin-top: 10px; }
.padding-top { padding-top: 20px; }
.very-small-margin-bottom { margin-bottom: 10px; }
.vertical-center-margin { margin-top: auto; margin-bottom: auto; }
.title { font-size: clamp(30px, 6vw, 40px); }
.margin-center { margin:0 auto; }
.filter-elements-text { margin:auto; bottom: 0; left:0; transform: translate(0%,-50%); }

.margin-right-auto {margin-right:auto;}
.margin-bottom { margin-bottom: 30px; }
.margin-vertical-center { margin-top:auto; margin-bottom:auto; }
.width-zero { width:0px; }
.left-absolute { left:0; }
.space-between { justify-content: space-between; }
.align-start { align-items:center; }
.align-stretch { align-items: stretch; }

.min-width-text { min-width: 80px; }

.size { font-size: 12px;}

.img-wrapper-clear { max-width: 20px;  max-height: 20px; bottom:6px; right:0px; z-index: 100;  cursor: pointer;}
.img-wrapper-clear img { width: 100%;  height: 100%; }

.img-wrapper-icon { max-width: 20px;  max-height: 20px; bottom:6px; left:-30px; z-index: 100; }
.img-wrapper-icon img { height:100%; width:100%;}

.margin-left-auto { margin-left: auto; }
.background-red { background-color: red; }
#Empty-Database { font-size: 20px; }
.width-view { width: 60px; }
.width-phase { max-width: 140px; }
.flex-one { flex:1; }
.relative { position:relative; }
.absolute { position:absolute; }
.position-of-view-buttons { right:0; bottom:15px;}
.font-size-phase { font-size: 24px; }
.bohr-img-wrapper { max-height: 140px; max-width: 140px; mix-blend-mode: multiply; position: absolute; bottom:0px; right:30px;}
.bohr-img-wrapper img { height:100%; width:100%; }
.bohr-img-wrapper:hover { transform: scale(120%); transition: all 0.1s ease-in; }

.button {padding:10px 0px;  cursor:pointer; }
.child { 
    box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.1); outline:1px rgba(78, 14, 226, 0.127) solid; margin-bottom: 24px; overflow: hidden; border-radius: 5px ; background-color: rgb(255, 255, 255); 
}
/* .logo-wrapper { max-width: 40px; max-height: 40px; }
.logo-wrapper img { width:100%; height:100%; } */
.logo { left:0; top:20px; mix-blend-mode: multiply; height:clamp(60px, 10vw, 160px); width:clamp(60px, 10vw, 160px);}

.child:hover { background-color: white; cursor: pointer; }
.child-thumbnail-max-width { max-width: 125px; }
.Card-CSS { position:relative;  background-color:#FFFDD0 !important; }
.absolute-symbol { position:absolute; font-weight:500; color:black; background-color: #fffffff6; padding:6px 8px 6px 6px; width:42px; height:32px; border-radius: 0px 0px 6px 0px; text-align: center;}
.extra-info { height: 272px; overflow: hidden; transition: all 0.45s ease-in-out; display:flex; position:relative; background-color:#fffddf !important; }
.extra-info-para { padding-top:8px; padding-bottom:8px; margin-left: 12px; margin-right: 12px; font-size: clamp(14px, 3.25vw,20px);}
/* .Extra-Info-Div { font-size: 50px; } */
.cpk-hex { min-width: 125px; width:125px; height:100%; outline:1px rgba(78, 14, 226, 0.127) solid; display:flex; justify-content: center; align-items: center; text-align: center; }
.symbol-style { color:#fff; font-size: 37px; width:100%; padding:30px; background-color: rgba(0, 0, 0, 0.199) !important;}
/* .Img-Wrapper { width:160px; height:160px; overflow: hidden; outline:1px rgba(78, 14, 226, 0.127) solid;}
 */
 /* .learn-more { margin-top:10px; font-size: 18px; padding:4px; background-color:antiquewhite; } */
 /* .Card-CSS:hover > .absolute-symbol { display: none; }
 .extra-info:hover ~ .Card-CSS > .absolute-symbol { display: none; } */

.Img-Wrapper {  width: 125px; outline:1px rgba(78, 14, 226, 0.127) solid; }
.Img-Wrapper-no-outline { outline:none !important; }
.Img-Wrapper img { width:100%; height:100%; object-fit:cover; }
.highlight {  color:black !important; outline:1px solid black !important; opacity:1 !important;  }
.Name-Style { font-weight: 100; margin:0 0 8px 0; font-size:clamp(24px, 3.4vw, 30px); }
.summary-style { padding:2px; font-size: clamp(13px, 1.6vw, 15px);}
.flex-column-div { padding-top:12px; padding-bottom:12px; margin-left: 12px; margin-right: 12px; flex:1;}

.four-px-padding { padding-left:4px; padding-right:4px; }
.margin-top { margin-top:20px; }
.text-align-center { text-align: center; }
.flex-center { justify-content: center; align-items: center; }
.flex { display:flex; }
.column { flex-direction: column; }
.flex-one { flex:1; }
.flexwrap { flex-wrap: wrap; }


.margin-left-very-small { margin-left: 9px; }
.margin-left-small { margin-left: 10px; }
.margin-right-small { margin-right:10px; }
.titlesize { font-size: clamp(24px,4.5vw,44px); }
.increase-up-a-bit { line-height: 14px; }
.shrink-image { width: 42px; }
.border-button { border-radius: 8px; opacity: 0.5; outline:1px solid rgba(0, 0, 0, 0.393);}
.grey { opacity:0.25; }
.relative { position:relative; }
#over-filter-red-border { background-color:rgb(250, 238, 223); }
/* .outline-light-red {  outline:rgb(255, 172, 172) 2px solid !important; outline-offset: -7px; } */
.justify-center { justify-content:center; }
.align-center { align-items: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
/* background-color: rgb(255, 235, 235 */
.view-buttons { cursor:pointer; outline:none !important; }
.border-radius-left-guy { height:80px; border-radius: 3px 0 0 3px; }
.border-radius-right-guy { height:80px; border-radius: 0 3px 3px 0; }
.middle-guy-button {height:80px; border-left: 0px !important; border-right: 0px !important; }

#not-found { color:red; margin:0 auto; width:300px; text-align: center;}
#not-string { color:red; margin:0 auto; width:300px; text-align: center;}
/* .bigger { max-width: 63px !important; max-height: 63px !important; } */
.max-width-view-buttons { max-width: 50px; max-height: 36px;}
.max-width-view-buttons img { width: 100%; height:100%; object-fit:cover;}


.contact-div { padding:20px 0 40px 0; }

.grid-container{
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 125px);
    /* grid-auto-rows: 202px; */
    column-gap: 20px;
    align-items: start;
    justify-content: center;
}
.grid-content{
    /* display:flex;
    align-items: center; */
    /* max-height: 210px; */
    box-shadow: none !important;
    outline: 2px solid rgba(78, 14, 226, 0.127) !important;   
}
.grid-content:hover { cursor:auto; }
.grid-content div .Img-Wrapper img{
    object-fit: cover; 
}
.grid-content div .Img-Wrapper{    
    height:129px; 
}
.grid-content .Card-CSS .flex-column-div .Name-Style { font-size: 17px !important;  text-align: center; }
.grid-content .Card-CSS .flex-column-div {  height:73px; padding-bottom: 4px; }

.List-view-category { font-size:clamp(19px, 1.8vw, 21px); margin-left: 8px;filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.1));}
.List-view-atomic-mass { font-size:clamp(19px, 1.8vw, 21px); margin-left: 10px;filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.1)); }
.List-view-symbol { font-size:clamp(20px, 1.8vw, 25px); margin-left: 6px;filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.1)); }
.List-view-number { font-size:clamp(20px, 1.8vw, 28px); text-align: left; margin-right: 10px;filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.1));}
.list .Card-CSS .flex-column-div .Name-Style { font-size:clamp(19px, 1.8vw, 29px) !important; filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.1));}

.list .Card-CSS { cursor:auto; }
.list .Card-CSS .flex-column-div { align-items:center; padding:22px 0; text-align: center; }


@font-face {
    font-family: "Quicksand";
    src: url(../fonts/Quicksand-VariableFont_wght.ttf);
}


@media screen and (max-width: 1160px) {
    #column-on-small-screen {
        flex-direction: column;
    }

    .remove-margin-on-small-screen {
        margin-left:0 !important;
        margin-right:0 !important;
        justify-content: center !important;
    }

    .position-of-view-buttons {
        bottom:50px;
    }
}
@media screen and (max-width: 920px) {
    .list .Card-CSS .flex-column-div {
        flex-wrap: wrap;
        padding:14px 0;
        justify-content: center;
    }
}

@media screen and (max-width: 750px) {
    .max-width-view-buttons {
        margin:0 0 8px 0;
    }
    .position-of-view-buttons {
        display:block !important;
    }
}
@media screen and (max-width: 700px) {
    .bohr-img-wrapper {
        display:none !important;
    }
}
/* 
@media screen and (max-width: 460px) {
    .logo {
        display:none !important;
    }
} */