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

a{font-size: 0.85vw;}p{font-size: 0.85vw;}strong{font-size: 1vw;}
h1{font-size: 2vw;}h2{font-size:1.5vw;}h3{font-size:1.3vw;}h4{font-size:1.1vw;}h5{font-size: 0.9vw;}h6{font-size:0.7vw;}

iframe{
    width: 100%;
    height: 20vw;
}
.conten{
    margin-bottom: 2vw;
}
.carousel-item img{
    height: 600px!important;
    width: 100%!important;
    border-radius: 1vh;
    object-fit: fill!important;
}
.breadcrumb-item{
    color: white!important;
}
.breadcrumb-item + .breadcrumb-item::before{
    color: hsl(216, 85%, 35%)!important;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='hsl(216, 85%, 35%)'/%3E%3C/svg%3E")!important;
}
.sm-border{
    border: 1px solid hsla(0, 0%, 100%, 0.1)!important;
    box-shadow: 0 0 16px 5px rgba(255,255,255,0.1)!important;
}
.carouisel-caption{
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 1vh;
}
hr{
    border-top: 4px solid rgba(255, 255, 255, 0.1)!important;
}
.carousel{
    box-shadow: 0 -5px 46px 5px rgba(255,255,255,0.1)!important;
    border-radius: 1vh;
}
.box{
    box-shadow: 0 0 16px 5px rgba(0, 0, 0, 0.1)!important;
    border-radius: 0vh!important;
    padding: 1vh;
    margin: 1vh!important;
    display: block;
    font-family: "Roboto", sans-serif;
}
.card-subtitle{
    color: rgba(0, 102, 161, 0.993)!important;
}
.card{
    /* Discord ... */
    background-color: #1e1e1e!important;
    border: 1px solid lab(43.19% 0 -0.01 / 0.247)!important;
    color: white!important;
    border-radius: 0vh!important;
    transition: transform 0.3s, box-shadow 0.3s!important;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
}
.top{
    position: absolute;
    top: 1vh;
    left: 90%;
    transform: translateX(-50%);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 16px 5px rgba(255,255,255,0.1)!important;
}
.bg-img{
    background-image: url('/img/bild2.jpg');
    background-size:cover;
    background-repeat: no-repeat;
    border: 0!important;
    box-shadow: 0 -5px 16px 5px rgba(255,255,255,0.1)!important;
}
.online-badge{
    position:absolute;
    top: 0.2vh;
    right: 0.2vw;
    border: 1px solid hwb(96 0% 0% / 0.5);
    height: 3vh;
    width: 3vw;
    background: #0bb40b;
    color: white;
    border-radius: 0.3vh;
    display:block;
    font-size: 1.5vh;
    text-align: center;
    padding: 0.3vh 0.3vw;
}
.text-green{
    color: hsl(134, 99%, 49%)!important;
}
.bg-dark{
    color: white!important;
}
.bg-dark1{
    background-color: #121212!important;
    color: rgba(255, 255, 255, 0.87)!important;
}
footer{
    position: fixed;
    bottom: 0vh;
    width: 100vw;
}
.small-alert{
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    display: block;
    margin-top: 1rem!important;
    background-color: #f8d7da;
    color: hwb(354 84% 0%);
    border: 1px solid hsla(354, 100%, 66%, 0.692);
    animation: fadeIn 0.5s ease-in-out;
    border-radius: 0.50rem;
    width: 20vw;
    margin: 0 auto;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;

}
.badge{
    border-radius: 0!important;
}
.card-header{
    border-radius: 0!important;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
.outline-danger{
    border: 1px solid #bb0c0c!important;
    color: white!important;
}
form{
    color: white!important;
}
.form-control, .form-select{
    background-color: #1e1e1e!important;
    border: 1px solid #333!important;
    color: white!important;
}
.new-alert{
    max-width: 100%;
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
    padding: 0.2vw;
    border: 1 solid rgba(0,0,0,0.3);
    border-radius: 0.5vw;
}
input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.5)!important;
    opacity: 1; /* Firefox */
}
 /* COLORS */
 .discord-bg{
    background-color: #5865F2!important;
    color: white!important;
}
.discord-bg:hover{
    background-color: #4752C4!important;
    color: white!important;
}
.discord-border{
    border: 1px solid hsla(235, 86%, 65%, 0.726)!important;
    color: white!important;
}
.discord-border:hover{
    border: 1px solid hsla(235, 86%, 65%, 0.726)!important;
    color: white!important;
}
.discord-text{
    color: #5865F2!important;
}
.discord-btn{
    background-color: #5865F2!important;
    color: white!important;
    border: 1px solid hsla(235, 86%, 65%, 0.726)!important;
}
.gold{
    color: gold!important;
}
.bg-infot{
    background-color: hsla(204, 78%, 41%, 0.315)!important;
    color: white!important;
}