MediaWiki:Common.css

.flex-container { display: flex; height: 4rem; justify-content:space-around; margin: 0.2rem; } .flex-container > div { background-color: transparent; border: none; box-shadow: none; padding: 0.2rem; }

.flex-container > div:hover { top: 0; left: 0; transform: scale(1); }

.flex-container .mainbutton .mainbutton a{	flex-grow: 1; }

.mainbuttona { width: 16.5rem; }

.mainbuttonb { width: 12.3rem; }

.mainbuttonc { width:9.8rem; }

.mainbuttond { width:12.3rem; } .mainbuttone { width:9.8rem; }

.mainbutton a { display: inline-block; color: white; font-size:1.5rem; position: relative; border-radius:0.3rem; box-shadow: 0.25rem 0.25rem 0.25rem #a7a09c; font-family: Cambria, serif; text-align: center; width: 100%; text-decoration: none; padding: 1rem 0; line-height: 1; }

.mainbutton1 a{ background-color:#3a5472; border:0.175rem solid #2d4766; }

.mainbutton2 a{ background-color:#45668b; border:0.175rem solid #355477; }

.mainbutton3 a{ background-color:#947e79; border:0.175rem solid #7b6763; }

.mainbutton4 a{ background-color:#897470; border:0.175rem solid #73605c; }

.mainbuttond a{	font-size:1.25rem; padding: 0.5rem 0; }

.mainbuttone a{	font-size:1.25rem; padding: 0.5rem 0; }

.mainbutton a:hover { position: relative; top: 0.25rem; left: 0.15rem; transform: scale(0.99); }

@media screen and (max-width:1100px) { .flex-container { height: 3.3rem; }

.mainbutton a { font-size: 1rem; padding: 0.9rem 0; } .mainbuttond a{    font-size:0.9rem;

padding: 0.5rem 0; }

.mainbuttone a{   font-size:0.9rem;

padding: 0.5rem 0; } }

@media screen and (max-width:900px) { .flex-container { height: 2.9rem; } .mainbutton a { font-size: 0.6rem; padding: 0.8rem 0; } .mainbuttond a{    font-size:0.6rem; padding: 0.5rem 0; }

.mainbuttone a{   font-size:0.6rem; padding: 0.5rem 0; } }

@media screen and (max-width:750px) { .flex-container { height: 2.5rem; }

.mainbutton a { font-size: 0.5rem; padding: 0.7rem 0; } .mainbuttond a{    font-size:0.5rem; padding: 0.45rem 0; }

.mainbuttone a{   font-size:0.5rem; padding: 0.45rem 0; } }

@media screen and (min-width:2000px) { .flex-container { height: 4rem; } .mainbutton a { font-size: 1.3rem; padding: 1rem 0; } .mainbuttond a{    font-size:1.1rem;

padding: 0.5rem 0; }

.mainbuttone a{   font-size:1.1rem;

padding: 0.5rem 0; } }

@media screen and (min-width:3000px) { .mainbutton a { font-size: 1rem; padding: 1rem 0; } .mainbuttond a{    font-size:0.9rem;

padding: 0.65rem 0; }

.mainbuttone a{   font-size:0.9rem;

padding: 0.65rem 0; } }