@import url("fonts.css");

* {
  scrollbar-color: #202324 #454a4d;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #202324;
  border: 1px solid #202324;
}
::-webkit-scrollbar-thumb:hover {
  background: #454a4d;
}
::-webkit-scrollbar-thumb:active {
  background: #454a4d;
}
::-webkit-scrollbar-track {
  background: #454a4d;
  border: 0px none #ffffff;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

body {
    position: relative;
    background-color: #181a1b;
    min-height: 100vh;
}

body::before {
    content: "";
    background-image: var(--backgroundimg);
    background-attachment: fixed;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

p {
  font-size: 1.1rem;
  color: white;
}

h1, h2, h3, h4, h5, h6 {
    font-family: cynthonext, arial, sans-serif, serif;
    color: white;
}

h1{
    font-weight: bold;
}

a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: lightgray;
    text-decoration: underline;
}

.navbar-brand img {
    object-fit: cover;
    height: 72px;
}

.nav-item {
    padding: .25em;
    margin-right: .5em;
    background: -webkit-radial-gradient(0% 100%, circle, transparent 15%, darkgoldenrod 15%) no-repeat, -webkit-radial-gradient(100% 0%, circle, transparent 15%, darkgoldenrod 15%) no-repeat, -webkit-radial-gradient(0% 0%, circle, transparent 15%, darkgoldenrod 15%) no-repeat, -webkit-radial-gradient(100% 100%, circle, transparent 15%, darkgoldenrod 15%) no-repeat;
    background: radial-gradient(circle at 0% 100%, transparent 15%, darkgoldenrod 15%) no-repeat, radial-gradient(circle at 100% 0%, transparent 15%, darkgoldenrod 15%) no-repeat, radial-gradient(circle at 0% 0%, transparent 15%, darkgoldenrod 15%) no-repeat, radial-gradient(circle at 100% 100%, transparent 15%, darkgoldenrod 15%) no-repeat;
    background-position: 0% 100%, 100% 0%, 0% 0%, 100% 100%;
    background-size: 75% 75%;
    text-align: center;
}

.nav-link {
    color: white !important;
}

.server-status-inner {
  width: 100%;
  margin-left: .5em;
}

.server-status-inner::before {
  content: "";
  position: absolute;
  background-image: url("/public/images/widget/serverwidget.webp");
  background-position: center;
  top: 0; left: 0;
  width: 100%; height: 100%;
  filter: blur(3.5px);
}

.server-status-inner {
  position: relative;
  border-radius: 15px;
  padding: 5px;
}

.server-status-inner img,
.server-status-inner div {
    z-index: 1;
}

.server-offline,
.server-online {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    padding: unset;
}

.server-offline {
    background-color: red;
}

.server-online {
    background-color: green;
}

.server-infos {
  width: 75%;
}


@media screen and (max-width:992px) {
  .nav-item {
    background: none;
  }

  .navbar-collapse {
    border-bottom: 1px solid white;
  }

  .server-status-inner {
    width: 100%;
    margin: auto;
  }

  .server-logo {
    width: 50%;
    margin: auto;
  }

  .server-infos {
    width: 100%;
  }
}

/* Back to Top */

.back-to-top {
    font-size: 2.5em;
    position: fixed;
    bottom:10px;
    right:10px;
    z-index: 100;
	color: lightgray;
}

.back-to-top:hover {
    color: white;
}

@media only screen and (min-width: 992px) {
  .back-to-top {
    bottom:20px;
    right:20px;
    padding:1em;
  }
}

/* Footer */
.page-footer {
  background-color: #18191c;
}

.footer-links>li>a, .footer-copyright>a{
  color: royalblue;
}

.footer-links>li>a:hover, .footer-copyright>a:hover {
  color: #0056b3;
}

.footer-links > li > a > img {
    height: 1.5rem;
    width: 1.5rem;
}

.footer-copyright {
  color: white;
}

/* Teammembers */
.team_members {
    background-color: #707070;
    margin: auto;
    padding: 0;
    height: 14em;
    margin-bottom: 1em;
}

.team_members_image {
    padding: 1em 0em;
    text-align: center;
    background-color: #333;
}

.team_members:hover .team_members_image {
    background-color: royalblue;
}

.team_members_desc {
    padding: 1em;
}

.team_members_desc_inner p {
    margin-bottom: 0;
}

.team_members_desc_inner_title {
    color: #ccc;
    text-transform: uppercase;
    border-bottom: 1px solid #ccc;
}

.team_members_desc_inner.roles ul li {
    color: white;
}

.team_members_desc_inner.infos {
    display:none;
}

@media only screen and (min-width: 768px) {
    .team_members {
        background-color: #707070;
        margin-left: 1em;
    }
 }