/* Adjusts to any size window <3 */
@import url('https://killa-rebell.de/fonts/css.css');

:root {
    --c1: hsl(219, 79%, 66%);
    --c2: hsl(319, 100%, 60%);
    --c3: hsl(266, 49%, 25%);
    --c4: hsl(60, 82%, 58%);
    --c6: hsl(213, 96%, 11%);
    --c5: hsl(0, 67%, 55%);
    --c2hsl: 319, 100%, 60%;
    --accentColor: #FFF;
    --font: 'Karla', sans-serif;
    --delay: .3s;
    --footer_background_color: #0d1135;
    --footer_text_color: #fff;
    --footer_link_text_color: #007BFF;
}

@property --outrun {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}

@keyframes outrun {
    to {
        --outrun: 1;
    }
}

html {
    height: 100vh;
}

html::before {
    scroll-behavior: smooth;
    content: "";
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    filter: brightness(1.125);
    animation: outrun 0.6s linear infinite;
    --lgDepth: url("data:image/svg+xml;utf8,<svg width=\"1808\" height=\"230\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M904 -46 L-3616 230 M904 -46 L-3254.4 230 M904 -46 L-2892.8 230 M904 -46 L-2531.2000000000003 230 M904 -46 L-2169.6000000000004 230 M904 -46 L-1808 230 M904 -46 L-1446.4 230 M904 -46 L-1084.8000000000002 230 M904 -46 L-723.2 230 M904 -46 L-361.6 230 M904 -46 L0 230 M904 -46 L361.6 230 M904 -46 L723.2 230 M904 -46 L1084.8000000000002 230 M904 -46 L1446.4 230 M904 -46 L1808 230 M904 -46 L2169.6000000000004 230 M904 -46 L2531.2000000000003 230 M904 -46 L2892.8 230 M904 -46 L3254.4 230 M904 -46 L3616 230 M904 -46 L3977.6000000000004 230 M904 -46 L4339.200000000001 230 M904 -46 L4700.8 230 M904 -46 L5062.400000000001 230 M904 -46 L5424 230\" stroke=\"cornflowerblue\" stroke-width=\"2\" vector-effect=\"non-scaling-stroke\" /></svg>") left bottom / 100% 40% no-repeat;
    --outrun: 0;
    --pos: var(--outrun, 0);
    --distance: 0.5%;
    --hor: 60%;
    --l0: var(--hor) + 0 * 0 * var(--distance) + (((0 + 1) * (0 + 1) * var(--distance) - 0 * 0 * var(--distance)) * var(--pos));
    --l1: var(--hor) + 1 * 1 * var(--distance) + (((1 + 1) * (1 + 1) * var(--distance) - 1 * 1 * var(--distance)) * var(--pos));
    --l2: var(--hor) + 2 * 2 * var(--distance) + (((2 + 1) * (2 + 1) * var(--distance) - 2 * 2 * var(--distance)) * var(--pos));
    --l3: var(--hor) + 3 * 3 * var(--distance) + (((3 + 1) * (3 + 1) * var(--distance) - 3 * 3 * var(--distance)) * var(--pos));
    --l4: var(--hor) + 4 * 4 * var(--distance) + (((4 + 1) * (4 + 1) * var(--distance) - 4 * 4 * var(--distance)) * var(--pos));
    --l5: var(--hor) + 5 * 5 * var(--distance) + (((5 + 1) * (5 + 1) * var(--distance) - 5 * 5 * var(--distance)) * var(--pos));
    --l6: var(--hor) + 6 * 6 * var(--distance) + (((6 + 1) * (6 + 1) * var(--distance) - 6 * 6 * var(--distance)) * var(--pos));
    --l7: var(--hor) + 7 * 7 * var(--distance) + (((7 + 1) * (7 + 1) * var(--distance) - 7 * 7 * var(--distance)) * var(--pos));
    --l8: var(--hor) + 8 * 8 * var(--distance) + (((8 + 1) * (8 + 1) * var(--distance) - 8 * 8 * var(--distance)) * var(--pos));
    --l9: var(--hor) + 9 * 9 * var(--distance) + (((9 + 1) * (9 + 1) * var(--distance) - 9 * 9 * var(--distance)) * var(--pos));
    --lgh: linear-gradient(transparent 0px var(--hor), var(--c1) var(--hor) calc(var(--hor) + 2px), transparent calc(var(--hor) + 2px));
    --lg0: linear-gradient(transparent 0px calc(var(--l0)), var(--c1) calc(var(--l0)) calc(var(--l0) + 2px), transparent calc(var(--l0) + 2px));
    --lg1: linear-gradient(transparent 0px calc(var(--l1)), var(--c1) calc(var(--l1)) calc(var(--l1) + 2px), transparent calc(var(--l1) + 2px));
    --lg2: linear-gradient(transparent 0px calc(var(--l2)), var(--c1) calc(var(--l2)) calc(var(--l2) + 2px), transparent calc(var(--l2) + 2px));
    --lg3: linear-gradient(transparent 0px calc(var(--l3)), var(--c1) calc(var(--l3)) calc(var(--l3) + 2px), transparent calc(var(--l3) + 2px));
    --lg4: linear-gradient(transparent 0px calc(var(--l4)), var(--c1) calc(var(--l4)) calc(var(--l4) + 2px), transparent calc(var(--l4) + 2px));
    --lg5: linear-gradient(transparent 0px calc(var(--l5)), var(--c1) calc(var(--l5)) calc(var(--l5) + 2px), transparent calc(var(--l5) + 2px));
    --lg6: linear-gradient(transparent 0px calc(var(--l6)), var(--c1) calc(var(--l6)) calc(var(--l6) + 2px), transparent calc(var(--l6) + 2px));
    --lg7: linear-gradient(transparent 0px calc(var(--l7)), var(--c1) calc(var(--l7)) calc(var(--l7) + 2px), transparent calc(var(--l7) + 2px));
    --lg8: linear-gradient(transparent 0px calc(var(--l8)), var(--c1) calc(var(--l8)) calc(var(--l8) + 2px), transparent calc(var(--l8) + 2px));
    --lg9: linear-gradient(transparent 0px calc(var(--l9)), var(--c1) calc(var(--l9)) calc(var(--l9) + 2px), transparent calc(var(--l9) + 2px));
    background: var(--lgDepth),
        var(--lgh),
        var(--lg0),
        var(--lg1),
        var(--lg2),
        var(--lg3),
        var(--lg4),
        var(--lg5),
        var(--lg6),
        var(--lg7),
        var(--lg8),
        var(--lg9),
        var(--mtn) center 60% / min(75vh, 75vw) no-repeat,
        var(--mtn2) center 60% / min(75vh, 75vw) repeat-x,
        linear-gradient(transparent 20%, var(--c5) 60%, var(--c3) 60% 70%, hsla(var(--c2hsl), 0.75), transparent 150%),
        repeating-linear-gradient(90deg, transparent 0px 2px, var(--c3) 3px 4px),
        radial-gradient(circle at center, transparent min(45vh, 45vw), hsla(var(--c2hsl), 0.75) min(65vh, 65vw), var(--c3) 120%),
        linear-gradient(transparent 30vh,
            var(--c5) 30vh 30.2vh,
            transparent 30.2vh 35.2vh,
            var(--c5) 35.2vh 36vh,
            transparent 36vh 40vh,
            var(--c5) 40vh 41.6vh,
            transparent 41.6vh 45.1vh,
            var(--c5) 45.1vh 48.6vh,
            transparent 48.6vh 52.5vh,
            var(--c5) 52.5vh 57.5vh,
            transparent 57.5vh),
        radial-gradient(circle at center, var(--c4) min(45vh, 45vw), transparent min(45vh, 45vw)),
        linear-gradient(var(--c5) 60%, var(--c3) 60%, var(--c2) 150%);
}


body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font);
  background: radial-gradient(ellipse at bottom, var(--bgColor) 0%, var(--bgColor2) 100%);
  background-image: url('bkg.png');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  animation: 1s ease-out var(--delay) 1 transitionAnimation;
  animation-fill-mode: forwards;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}


#profilePicture,
#profilePicture img {
    position: relative;
    width: 74px;
    height: 74px;
    display: block;
    margin: 40px auto 20px;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}

#userName {
    color: var(--accentColor);
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.25;
    display: block;
    font-family: var(--font);
    width: 100%;
    text-align: center;
    text-decoration: none;
}

#links {
    max-width: 675px;
    width: 100%;
    display: block;
    margin: auto;
    margin-top: 10px;
}

.link {
    position: relative;
    background-color: transparent;
    color: var(--accentColor);
    border: solid var(--accentColor) 2px;
    border-radius: 10px;
    font-size: 1rem;
    text-align: center;
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    padding: 10px;
    /* 17px */
    text-decoration: none;
    /* transition: all .25s cubic-bezier(.08, .59, .29, .99); */
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .link:hover {
        background-color: var(--accentColor);
        color: var(--bgColor);
    }
}

.link:active {
    background-color: var(--accentColor);
    color: var(--bgColor);
}

#hashtag {
    position: relative;
    padding-bottom: 20px;
    color: var(--accentColor);
    font-size: 1rem;
    display: block;
    font-family: var(--font);
    width: 100%;
    text-align: center;

    /*  animation   */
    overflow: hidden;
    background: linear-gradient(90deg, var(--bgColor), var(--accentColor), var(--bgColor));
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear var(--delay) infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
}


/*-------------------------animations-----------------------*/
@keyframes transitionAnimation {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes animate {
    0% {
        background-position: -500%;
    }

    100% {
        background-position: 500%;
    }
}

@keyframes animStar {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-2000px);
    }
}

@media (hover: hover) {
    .popup-close:hover {
        background-color: var(--accentColor);
        color: var(--bgColor);
    }
}

.popup-close:active {
    background-color: var(--accentColor);
    color: var(--bgColor);
}

.button {
    position: relative;
    border: none;
    outline: none;
    color: white;
    background: linear-gradient(-45deg, #041423, #0D3B66, #007BFF, #0D3B66, #041423);
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Gruppo', sans-serif;
    transition: all .2s ease-out;
}

.button:before {
    position: absolute;
    content: '';
    top: -4px;
    left: -4px;
    height: calc(100% + 8px);
    width: calc(100% + 8px);
    border-radius: 6px;
    z-index: -1;
    opacity: 1;
    background: linear-gradient(90deg, #041423 0%, #007BFF 25%, #041423 50%);
    background-size: 400%;
    transition: opacity 1s ease-in-out;
    animation: animate 20s linear infinite;
}

.button:hover {
    transform: scale(1.1);
    color: #FFFFFF;
    opacity: 1;
    transition: all .3s ease-in-out;
}

.button:active {
    background: none;
    color: #FFFFFF;
    transform: scale(1);
    transition: all .3s ease-in-out;
}

@keyframes animate {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

.card {
    max-width: 675px;
    width: 80%;
    display: block;
    margin: 20px auto 20px;
    margin-top: 10px;
    background: rgb(9, 13, 30);
    background: linear-gradient(180deg, rgb(13 59 102) 0%, rgb(7 36 63) 100%);
    border-radius: 12px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.123);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition-duration: .5s;
    margin-right: 20px;
    margin-left: 20px;
}

.profileImage {
    background: linear-gradient(to right, rgb(54, 54, 54), rgb(32, 32, 32));
    margin-top: 20px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.329);
}

.textContainer {
    width: 100%;
    text-align: center;
    padding: 5px;
    /* display: flex; */
    flex-direction: column;
    gap: 10px;
}

.name {
    font-size: 1.5em;
    font-weight: 600;
    color: white;
    letter-spacing: 0.5px;
}

.profile {
    font-size: 1em;
    color: rgb(194, 194, 194);
    letter-spacing: 0.2px;
}

.verified {
    width: 18px;
    height: 18px;

}

.footer {

    align-items: center;
}

footer {
    background: #041423;
    width: 100%;
    color: white;
    height: 50px;
    text-align: center;
}

/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 999;
    /* Sit on top */
    padding-top: 10px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 99%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: rgb(39 39 39 / 92%);
    margin: auto;
    color: white;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.live {
color:white;
background:red;
border-radius: 5px;
border: 2px;
border-color:red;

min-width: 50px;
position: relative;
	flex: auto;
	display: inline-block;
	text-decoration:bold;
	    font-size: 16px;
    font-weight: 700;
    font-family: 'Gruppo', sans-serif;
}
.live2 {
	top:10px;
	width:50%;
	position: relative;
	flex: auto;
	display: inline-block;
}
.floating-share-button {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 998;
}

.Btn {
  width: 100px;
  height: 35px;
  background: linear-gradient(-45deg, #041423, #0D3B66, #007BFF, #041423);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 5px 5px 0px #4dc6d93d;
  background-size: 400% 400%;
  opacity:0.8;
}

.svgContainer {
  width: 45px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.svgContainer svg {
  width: 16px;
}

.svgContainer svg path {
  fill: white;
}

.textContainer2 {
  width: 100px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

.Btn:hover {
  animation: gradient 5s ease infinite;
}
/* Button's gradient animation */
@keyframes gradient {
  0% {
    background-position: 0 40%;
  }

  40% {
    background-position: 100% 40%;
  }

  100% {
    background-position: 0 40%;
  }
}