@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono|IBM+Plex+Sans:700|IBM+Plex+Serif:700|Vidaloka&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BioRhyme:wght@400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
    background-color: #17212B!important;
    color: #fff;
  /*  background-image: url("gfx/bg.webp");
    background-attachment: fixed;
    background-size: cover;
    background-position: center; */
    padding: 0;
    margin: 0;
}
.bg-dark {background-color: #17212B!important;}
nav.navbar {max-height: 56px;}
a.navbar-brand {font-family: 'BioRhyme', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"!important; font-weight: 800;}
a {color: rgb(23, 162, 184);}
.nav-profile-img {
    width: 34px;
    border: 1px solid #fff;
    background-color: #ccc;
}
h1, h2, h3 {
        font-family: 'Sofia Sans',system-ui,'BioRhyme', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 800;
}

p {
    font-family: 'Sofia Sans', "IBM Plex Mono", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.2em;
}

h1.title {
    font-family: 'IBM Plex Mono SemiBold', 'BioRhyme', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 800;
    font-size: 7vw;
    line-height: 6vw;
    text-transform: uppercase;
    margin: 15% 0 15% 0;
}

h2.title {
    font-size: 3vw;
    line-height: 3vw
}

h3.title {
    font-size: 2.5vw;
    line-height: 5vw;
    color: #474a4d;
}

.backGroundLogo {
    position: relative;
    display: block;
    width: 100%;
    height: 70vh;
    background-color: #17212B!important;
    overflow: hidden;
    padding: 0;
    margin: 0;
}


.foreGround {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 90vh;
    background-color: transparent;
    overflow-clip: hidden;

    display: flex;
    justify-content: center;
    align-items: center;

}
.foreGround .card {margin: 55vh 0 0 0; background-color: rgba(0,0,0,0.3);}

@keyframes pulse_animation {
    0% { transform: scale(1); filter: blur(0.02em); color: #202F3D;}

    80% { transform: scale(4); filter: blur(0.08em); color: #fff;}
    100% { transform: scale(1); filter: blur(0.02em); color: #202F3D;}
}

.pulse {
    display: inline-block;
    animation-name: pulse_animation;
    animation-duration: 8s;
    transform-origin:50% 50% 0;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    filter: blur(0.02em);
    color: #202F3D;
}

.l1 {animation-delay: 0s;}
.l2 {animation-delay: 1s;}
.l3 {animation-delay: 2s;}
.l4 {animation-delay: 3s;}
.l5 {animation-delay: 4s;}
.l6 {animation-delay: 5s;}
.l7 {animation-delay: 6s;}