@import url('https://fonts.googleapis.com/css?family=Bungee+Hairline|Lato:300');

.hero-img{
    max-width:192px;
}

.modal-content {
    /*background-color: transparent !important;*/
    /*background: transparent !important;*/
    background-image: radial-gradient(1600px at 70% 120%, #212750 10%, #020409 100%);
}
.btn-primary {
    background-color: #020409;
    border-color: #15d2c8;
}
.btn-primary:hover{
    background-color:#a930dc;
}
.btn-close {
    background-color: #15d2c8;
}
.custom-tooltip {
    --bs-tooltip-bg: #a930dc;
    --bs-tooltip-color: #15d2c8;
}
.cus-hov-btn {
    font-family: "Bungee Hairline";
    font-weight: bolder;
    color: white;
    cursor: pointer;
    position: relative;
    padding: 10px 20px;
    margin-bottom: 160px;
    background: transparent;
    font-size: 22px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: all 0.7s;
    border-image: linear-gradient(to right, #15d2c8, #00bfec, #00a5ff, #007dff, #a930dc);
}

.cus-hov-btn:after, .cus-hov-btn:before {
    content: " ";
    width: 20px;
    height: 20px;
    position: absolute;
    border: 0px solid #fff;
    transition: all 0.3s;
}

    .cus-hov-btn:after {
        top: -1px;
        left: -1px;
        border-top: 5px solid #15D2C8;
        border-left: 5px solid #15D2C8;
        /*border-top: 5px solid #A930DC;*/
        /*border-left: 5px solid #A930DC;*/
    }

    .cus-hov-btn:before {
        bottom: -1px;
        right: -1px;
        border-bottom: 5px solid #15D2C8;
        border-right: 5px solid #15D2C8;
    }

.cus-hov-btn:hover {
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.cus-hov-btn:hover:before, .cus-hov-btn:hover:after {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}


.scale-in-left1 {
    -webkit-animation: scale-in-left 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.5s both;
    animation: scale-in-left 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.5s both;
}
.scale-in-left2 {
    -webkit-animation: scale-in-left 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.7s both;
    animation: scale-in-left 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.7s both;
}
.scale-in-left3 {
    -webkit-animation: scale-in-left 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.9s both;
    animation: scale-in-left 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.9s both;
}
@-webkit-keyframes scale-in-left {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        opacity: 1;
    }
}

@keyframes scale-in-left {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        opacity: 1;
    }
}

@keyframes flip-forward {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }

    100% {
        transform: perspective(1000px) rotateY(720deg);
    }
}
@keyframes custom-float {
    0% {
        transform: translateY(0);
    }

    45% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}
.cus-flo {
    position: relative;
    animation: custom-float 2s ease-in-out 2s infinite;
}
.cus-fli {
    display: inline-block; 
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; 
    -webkit-animation: flip-forward 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 1s both;
    animation: flip-forward 1s cubic-bezier(0.68, -0.20, 0.27, 1.45) 1s both;
}
html {
    font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}



a {
    text-decoration: none;
}
.main-container * {
    color: white;
}

.page {
    height: 100%;
    background-color: transparent;
}

.main-page-content {
    background-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

    .main-page-content h1 {
        font-family: "Bungee Hairline";
        font-size: 60px;
    }

    .main-page-content h2 {
        font-family: "Lato";
        font-size: 16px;
        letter-spacing: 2px;
    }

/*iframe {
    position: absolute;
    top: -100%;
}*/

.universe {
    z-index: -10000;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: contrast(120%);
    background-color: black;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

.universe-container {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(1600px at 70% 120%, #212750 10%, #020409 100%);
}

.content {
    width: inherit;
    height: inherit;
}

#universe {
    width: 100%;
    height: 100%;
}

/*#footer {
    position: absolute;
    bottom: 0px;
    height: 300px;
    width: 100%;
}*/

#scene {
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -800px;
    z-index: 100000;
}

/* THE UNIVERSE. Code adapted from https://codepen.io/Acuetouag/pen/vOgmza */