MediaWiki:Common.css

/* CSS placed here will be applied to all skins */


/*** GENERAL APPEARANCE ***/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --font: montserrat;
  --color-bg: #0e2126;
  --color-bg-darker: #0c181b;
  --color-theme: #17373f;
  --color-link: #4a7e8b;

  --img-bg-top:url(https://wiki.beastsofbermuda.com/images/thumb/c/c7/Loading_screen_1_LAND_AND_SKY_sky_edited%282%29.png/2400px-Loading_screen_1_LAND_AND_SKY_sky_edited%282%29.png);
  --img-bg-bottom:url(https://wiki.beastsofbermuda.com/images/thumb/4/4e/Loading_screen_2_WATER_DEEP_water_edited%281%29.png/2400px-Loading_screen_2_WATER_DEEP_water_edited%281%29.png);
}

*,
*:before,
*:after {
    box-sizing: border-box;
    word-break: break-word;
    text-wrap: pretty;
    transition: all .16s ease;
}
html,
body {
    margin: 0;
    font: 16px/1.6 var(--font)!important;
    text-align: justify;
    box-sizing: border-box;
}

img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
}
a,
u,
strike {
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
a {
    font-weight: bold;
    color: var(--color-link)!important;
}
i,
em {
    letter-spacing: .5px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font) !important;
  font-weight: 600;
}

/*** CSS ***/

@media screen {
  h1, h2, h3, h4, h5, h6 {
  border-bottom: 3px solid;
  }
}

body, #mw-head{
  background: var(--color-bg)!important;
}

/*** TOP ***/

#mw-head {
  padding-inline: 20px 3%;
}

#mw-head li {
  background: var(--color-bg-darker)!important;
}

#p-personal li {
  padding: 5px 10px;
  border-radius: 10px;
}

#left-navigation div.vectorTabs li.selected, #right-navigation div.vectorTabs li.selected {
  background-image: linear-gradient(var(--color-theme) 0,var(--color-bg-darker) 80%) !important;
}

#left-navigation div.vectorTabs, #right-navigation div.vectorTabs {
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  background: transparent !important;
}

/*** MENU LEFT ***/

div#mw-panel div.portal div.body {
  margin: 0 !important;
}

#mw-panel {
  padding: 0 !important;
}

#mw-panel ul {
  gap: 5px;
  display: grid;
}

#mw-panel li {
  background: var(--color-bg-darker);
  border-radius: 20px;
  padding: 10px !important;
}

#mw-navigation div#mw-panel div.portal {
  border: none!important;
}

div#mw-panel div.portal h3 {
  color: #fff!important;
  border-bottom: 2px solid!important;
  margin-bottom: 16px!important;
}

@media screen {
  #mw-panel .portal .body {
    background: transparent;
  }
}

/*** PAGES ***/

.mw-body {
  background: var(--color-theme)!important;
  margin-right: 2%;
  border-radius: 20px;
  border: none!important;
}