/* GLOBAL CSS STARTS HERE */
html {
    width: 100%;
    overflow-x: hidden;
}
/* Set height to 100% for body and html to enable the background image to cover the whole page: */
body {
    height: 100vh;
    width: 100%;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    overflow: hidden;
    overflow-x: hidden;
    /*display: -webkit-box;
    display: flex;*/
    font-family: 'Anton', sans-serif;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
}

body.started, html.started {
    height: auto;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    /*display: -webkit-box;
    display: flex;*/
    font-family: 'Anton', sans-serif;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
}

h1 {
    margin-bottom: 10px;
}

h2 {
    font-weight: 700 !important;
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
}
p {
    margin-top: 20px;
    word-break: break-word;
}

a {
    text-decoration: none;
    color: #fff;
}
  
.bgimg {
    /* Background image */
    /*background-image: url('/w3images/forestbridge.jpg');*/
    background: rgb(2,0,36);
    background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(52,9,121,1) 30%, rgba(132,0,255,1) 100%); 
    /* Full-screen */
    height: 100%;
    /* Center the background image */
    background-position: center;
    /* Scale and zoom in the image */
    background-size: cover;
    /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
    position: relative;
    /* Add a white text color to all elements inside the .bgimg container */
    color: white;
    /* Add a font */
    font-family: "Courier New", Courier, monospace;
    /* Set the font-size to 25 pixels */
    font-size: 25px;
}

/* GLOBAL CSS END */
  
/* BIO BOX / GRID CSS START */

.container{
    max-width: 100%!important;
}

/* Position text in the middle */
.middle {
    text-align: center;
    align-items: center;
    display: grid;
}

.middle-inner {
    height: 100%;
    align-items: center;
    display: grid;
    padding: 50px 0;
}

.bio {
    border-radius: 10px;
    background-color:rgba(33, 37, 41, 0.3);
    opacity: 0;
    align-items: center;
    display: grid;
    padding: 15px 15px 0px 15px;
    margin-bottom: 15px;
}

.bio.active {
    opacity: 1;
}

@media screen and (max-width: 991px) {
    p {
        font-size: 14px;
    }

    .accordion-trigger {
        font-size: 18px;
    }
}

@media screen and (min-width:992px){
    .row {
        height: 31.6%;
    }

    /* Position text in the top-left corner */
    .bio.topleft {
        margin-top: 15px;
        margin-top: 15px;
        transition: all 1s ease-in;
    }

    .bio.topmiddle {
        margin-top: 15px;
        transition: all 1s ease-in;
        transition-delay: 0.5s;
    }

    .bio.topright {
        margin-top: 15px;
        margin-top: 15px;
        transition: all 1s ease-in;
        transition-delay: 1s;
    }
    
    /* Position text in the bottom-left corner */
    .bio.bottomleft {
        margin-bottom: 15px;
        transition: all 1s ease-in;
        transition-delay: 1.5s;
    }

    .bio.bottommiddle {
        margin-bottom: 15px;
        transition: all 1s ease-in;
        transition-delay: 2s;
    }

    .bio.bottomright {
        margin-bottom: 15px;
        transition: all 1s ease-in;
        transition-delay: 2.5s;
    }
}

@media screen and (min-width: 1480px) {
    .bio {
        height: 33vh;
    }
}

/* BIO BOX / GRID CSS END */

/* FUNCTION ACCORDION CSS START */
.accordion-trigger {
    margin-top: 15px;
    cursor: pointer;
    color: #007bff;
}

.accordion-trigger.triggered {
    opacity: 0;
    cursor: default;
    transition: all 1s ease-in;
}

/*
.accordion-trigger.triggered.after {
    opacity: 1;
    transition: all 1s ease-in;
}
*/
  
/* Star animation CSS starts here */
  
#night {
    position: absolute;
    width: 100vw;
    height: 100vh;
    -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
}
  
.shooting_star {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 2px;
    background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
    border-radius: 999px;
    -webkit-filter: drop-shadow(0 0 6px #699bff);
            filter: drop-shadow(0 0 6px #699bff);
    -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
            animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}
.shooting_star::before, .shooting_star::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    height: 2px;
    background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
    -webkit-transform: translateX(50%) rotateZ(45deg);
            transform: translateX(50%) rotateZ(45deg);
    border-radius: 100%;
    -webkit-animation: shining 3000ms ease-in-out infinite;
            animation: shining 3000ms ease-in-out infinite;
}
.shooting_star::after {
    -webkit-transform: translateX(50%) rotateZ(-45deg);
            transform: translateX(50%) rotateZ(-45deg);
}
.shooting_star:nth-child(1) {
    top: calc(50% - -2px);
    left: calc(50% - 78px);
    -webkit-animation-delay: 5387ms;
            animation-delay: 5387ms;
}
.shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after, .shooting_star:nth-child(1)::after {
    -webkit-animation-delay: 5387ms;
            animation-delay: 5387ms;
}
.shooting_star:nth-child(2) {
    top: calc(50% - -109px);
    left: calc(50% - 257px);
    -webkit-animation-delay: 9998ms;
            animation-delay: 9998ms;
}
.shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after, .shooting_star:nth-child(2)::after {
    -webkit-animation-delay: 9998ms;
            animation-delay: 9998ms;
}
.shooting_star:nth-child(3) {
    top: calc(50% - -172px);
    left: calc(50% - 165px);
    -webkit-animation-delay: 2788ms;
            animation-delay: 2788ms;
}
.shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after, .shooting_star:nth-child(3)::after {
    -webkit-animation-delay: 2788ms;
            animation-delay: 2788ms;
}
.shooting_star:nth-child(4) {
    top: calc(50% - -9px);
    left: calc(50% - 72px);
    -webkit-animation-delay: 1035ms;
            animation-delay: 1035ms;
}
  .shooting_star:nth-child(4)::before, .shooting_star:nth-child(4)::after, .shooting_star:nth-child(4)::after {
    -webkit-animation-delay: 1035ms;
            animation-delay: 1035ms;
}
.shooting_star:nth-child(5) {
    top: calc(50% - -81px);
    left: calc(50% - 174px);
    -webkit-animation-delay: 444ms;
            animation-delay: 444ms;
}
.shooting_star:nth-child(5)::before, .shooting_star:nth-child(5)::after, .shooting_star:nth-child(5)::after {
    -webkit-animation-delay: 444ms;
            animation-delay: 444ms;
}
.shooting_star:nth-child(6) {
    top: calc(50% - -179px);
    left: calc(50% - 222px);
    -webkit-animation-delay: 9486ms;
            animation-delay: 9486ms;
}
.shooting_star:nth-child(6)::before, .shooting_star:nth-child(6)::after, .shooting_star:nth-child(6)::after {
    -webkit-animation-delay: 9486ms;
            animation-delay: 9486ms;
}
.shooting_star:nth-child(7) {
    top: calc(50% - 173px);
    left: calc(50% - 125px);
    -webkit-animation-delay: 4924ms;
            animation-delay: 4924ms;
}
.shooting_star:nth-child(7)::before, .shooting_star:nth-child(7)::after, .shooting_star:nth-child(7)::after {
    -webkit-animation-delay: 4924ms;
            animation-delay: 4924ms;
}
.shooting_star:nth-child(8) {
    top: calc(50% - -62px);
    left: calc(50% - 183px);
    -webkit-animation-delay: 6162ms;
            animation-delay: 6162ms;
}
.shooting_star:nth-child(8)::before, .shooting_star:nth-child(8)::after, .shooting_star:nth-child(8)::after {
    -webkit-animation-delay: 6162ms;
            animation-delay: 6162ms;
}
.shooting_star:nth-child(9) {
    top: calc(50% - 154px);
    left: calc(50% - 58px);
    -webkit-animation-delay: 5054ms;
            animation-delay: 5054ms;
}
.shooting_star:nth-child(9)::before, .shooting_star:nth-child(9)::after, .shooting_star:nth-child(9)::after {
    -webkit-animation-delay: 5054ms;
            animation-delay: 5054ms;
}
.shooting_star:nth-child(10) {
    top: calc(50% - 43px);
    left: calc(50% - 229px);
    -webkit-animation-delay: 5216ms;
            animation-delay: 5216ms;
}
.shooting_star:nth-child(10)::before, .shooting_star:nth-child(10)::after, .shooting_star:nth-child(10)::after {
    -webkit-animation-delay: 5216ms;
            animation-delay: 5216ms;
}
.shooting_star:nth-child(11) {
    top: calc(50% - -97px);
    left: calc(50% - 176px);
    -webkit-animation-delay: 6424ms;
            animation-delay: 6424ms;
}
.shooting_star:nth-child(11)::before, .shooting_star:nth-child(11)::after, .shooting_star:nth-child(11)::after {
    -webkit-animation-delay: 6424ms;
            animation-delay: 6424ms;
}
.shooting_star:nth-child(12) {
    top: calc(50% - 165px);
    left: calc(50% - 256px);
    -webkit-animation-delay: 1210ms;
            animation-delay: 1210ms;
}
.shooting_star:nth-child(12)::before, .shooting_star:nth-child(12)::after, .shooting_star:nth-child(12)::after {
    -webkit-animation-delay: 1210ms;
            animation-delay: 1210ms;
}
.shooting_star:nth-child(13) {
    top: calc(50% - -56px);
    left: calc(50% - 15px);
    -webkit-animation-delay: 8246ms;
            animation-delay: 8246ms;
}
.shooting_star:nth-child(13)::before, .shooting_star:nth-child(13)::after, .shooting_star:nth-child(13)::after {
    -webkit-animation-delay: 8246ms;
            animation-delay: 8246ms;
}
.shooting_star:nth-child(14) {
    top: calc(50% - 193px);
    left: calc(50% - 200px);
    -webkit-animation-delay: 9261ms;
            animation-delay: 9261ms;
}
.shooting_star:nth-child(14)::before, .shooting_star:nth-child(14)::after, .shooting_star:nth-child(14)::after {
    -webkit-animation-delay: 9261ms;
            animation-delay: 9261ms;
}
.shooting_star:nth-child(15) {
    top: calc(50% - -190px);
    left: calc(50% - 118px);
    -webkit-animation-delay: 4847ms;
            animation-delay: 4847ms;
}
.shooting_star:nth-child(15)::before, .shooting_star:nth-child(15)::after, .shooting_star:nth-child(15)::after {
    -webkit-animation-delay: 4847ms;
            animation-delay: 4847ms;
}
.shooting_star:nth-child(16) {
    top: calc(50% - -147px);
    left: calc(50% - 239px);
    -webkit-animation-delay: 7823ms;
            animation-delay: 7823ms;
}
.shooting_star:nth-child(16)::before, .shooting_star:nth-child(16)::after, .shooting_star:nth-child(16)::after {
    -webkit-animation-delay: 7823ms;
            animation-delay: 7823ms;
}
.shooting_star:nth-child(17) {
    top: calc(50% - -148px);
    left: calc(50% - 33px);
    -webkit-animation-delay: 4179ms;
            animation-delay: 4179ms;
}
.shooting_star:nth-child(17)::before, .shooting_star:nth-child(17)::after, .shooting_star:nth-child(17)::after {
    -webkit-animation-delay: 4179ms;
            animation-delay: 4179ms;
}
.shooting_star:nth-child(18) {
    top: calc(50% - 69px);
    left: calc(50% - 153px);
    -webkit-animation-delay: 4431ms;
            animation-delay: 4431ms;
}
.shooting_star:nth-child(18)::before, .shooting_star:nth-child(18)::after, .shooting_star:nth-child(18)::after {
    -webkit-animation-delay: 4431ms;
            animation-delay: 4431ms;
}
.shooting_star:nth-child(19) {
    top: calc(50% - 6px);
    left: calc(50% - 176px);
    -webkit-animation-delay: 3677ms;
            animation-delay: 3677ms;
}
.shooting_star:nth-child(19)::before, .shooting_star:nth-child(19)::after, .shooting_star:nth-child(19)::after {
    -webkit-animation-delay: 3677ms;
    animation-delay: 3677ms;
}
.shooting_star:nth-child(20) {
    top: calc(50% - -73px);
    left: calc(50% - 282px);
    -webkit-animation-delay: 6626ms;
    animation-delay: 6626ms;
}
.shooting_star:nth-child(20)::before, .shooting_star:nth-child(20)::after, .shooting_star:nth-child(20)::after {
    -webkit-animation-delay: 6626ms;
    animation-delay: 6626ms;
}
  
@-webkit-keyframes tail {
    0% {
        width: 0;
    }
    30% {
        width: 100px;
    }
    100% {
        width: 0;
    }
}
  
@keyframes tail {
    0% {
        width: 0;
    }
    30% {
        width: 100px;
    }
    100% {
        width: 0;
    }
}
@-webkit-keyframes shining {
    0% {
        width: 0;
    }
    50% {
        width: 30px;
    }
    100% {
        width: 0;
    }
}
@keyframes shining {
    0% {
        width: 0;
    }
    50% {
        width: 30px;
    }
    100% {
        width: 0;
    }
}
@-webkit-keyframes shooting {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    100% {
        -webkit-transform: translateX(400px);
        transform: translateX(400px);
    }
}
  @keyframes shooting {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    100% {
        -webkit-transform: translateX(400px);
        transform: translateX(400px);
    }
}
@-webkit-keyframes sky {
    0% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    100% {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
    }
}
@keyframes sky {
    0% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    100% {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
    }
}
  
/* Star animation CSS end */
/* CSS END */