/* CSS Document */
/* Import Google web fonts */
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Source+Sans+Pro&M+PLUS+Rounded+1c:wght@500&display=swap');

/* whole background */
body {
    background-color:#3571a0;
    background-image: linear-gradient(-135deg, #35517d, #5bb6cd); background-attachment: fixed; background-repeat: no-repeat;
    -webkit-user-select:none; -moz-user-select:none; user-select:none; 
    font-family: 'Source Sans Pro', sans-serif;
}



/* title */
.titleBarBgd { 
    background-color: rgba(255,255,255,0.7); 
    padding-top: 3em !important;
}
h1 {
    font-family:"Julius Sans One"; color:#366; 
}
.subtitle {color:#366; }
.logoImg {
    width: 16%; height: auto; max-width: 120px; border: solid 1px #ffffff;
}




/* menu */
.menuContainer { 
    background-color: rgba(255,255,255,1); 
    color:#366; 
    margin-top: -4.5rem;
}

h2 {
    font-family:'M PLUS Rounded 1c', sans-serif; color:#366; 
}
.menuText { 
    cursor: pointer; font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.2em !important;
}
.menuImg {
    width: 70%; height: auto; max-width: 200px; 
}





/* content */

.contentBox {
    background-color: rgba(255,255,255,1); 
    font-family: 'Source Sans Pro', sans-serif;
    margin-top: -4rem;
}

.legend {
    line-height: 2rem; 
    font-weight: bold;
}

video {
    max-width: 720px; width: 100%; height: auto;
    background-color: black;
}

i {margin-right: 10px;}

video:focus { outline: none !important; }



/* Element style */
.ele_alkali_metals {
    background-color: rgba(253,235,130,0.85);
    color: rgb(154,49,13);
}
.ele_alkali_earth_metals {
    background-color: rgba(190,254,165,0.85);
    color: rgb(4,107,19);
}
.ele_transition_metals {
    background-color: rgba(255,127,252,0.85);
    color: rgb(106,0,102);
}
.ele_other_metals {
    background-color: rgba(192,175,239,0.85);
    color: rgb(55,0,101);
}
.ele_other_nonmetals {
    background-color: rgba(128,232,230,0.85);
    color: rgb(0,104,103);
}
.ele_halogens {
    background-color: rgba(232, 185, 128, 0.85);
    color: rgb(104, 61, 0);
}
.ele_noble_gases {
    background-color: rgba(255,162,165,0.85);
    color: rgb(155,0,9);
}
.ele_lanthanide {
    background-color: rgba(163,194,252,0.85);
    color: rgb(9,51,101);
}
.ele_actinide {
    background-color: rgba(162, 202, 166, 0.85);
    color: rgb(25,36,26);
}
.ele_unknown {
    background-color: rgba(200,200,200,0.85);
    color: rgb(55,55,55);
}