.header, .footer {
  background-color: rgb(0, 0, 255);
  ;
}

.content {
  background-color: rgba(50, 50, 255, 0.5);
  color: white;
}

.content .summary-box {
  box-shadow:  0.3vw 0.4vh 0.6vh 0px rgba(0,0,0,0.4);
  background-color: rgba(50, 50, 255, 0.5);
  color: white;

}

header .header .logo {
  background-image: url(../../inverted_logo.png);
}

.left .element-summary-box,.right .element-summary-box, .element-summary-box-radioactive{
  box-shadow:  0.3vw 0.4vh 0.6vh 0px rgba(0,0,0,0.4);
  background-color: rgba(50, 50, 255, 0.5);
  color: white;
}

.content table{
  box-shadow:  0.3vw 0.4vh 0.6vh 0px rgba(0,0,0,0.4);
  background-color: rgba(50, 50, 255, 0.5);
  color: white;

}

.content h1, .content a{
  color: white;
}

.content h2 {
  font-size: clamp(1.5rem,2vh + 1rem,2.5rem);
  color: white;
  font-weight: bold;
}


.Groups .dropbtn:hover, .History .dropbtn:hover, .Home .dropbtn:hover, .footer .dropbtn:hover{
  background-color: rgba(0,0,225, 1);

}

.Groups .dropbtn, .History .dropbtn, .Home .dropbtn, .footer .dropbtn{
  color: white;

}

.dropdown-content-Groups, .dropdown-content-History{
  background-color: rgba(0,0,225, 1);
}

.dropdown-content-Groups a, .dropdown-content-History a{
  color: white;
}

a:hover{
  color: rgb(200,0,200);
}

#helium .right .element-picture-box{
    background-image: url("Helium/element.png");
}


#neon .left .element-picture-box{
    background-image: url("Neon/element.png");
}

#argon .right .element-picture-box{
    background-image: url("Argon/element.png");
}

#krypton .left .element-picture-box{
    background-image: url("Krypton/element.png");
}

#xenon .right .element-picture-box{
    background-image: url("Xenon/element.png");
}