body, html{
    position: relative;
    font-size: 16px;
    background-color: rgb(23, 1, 29) !important;
    overflow-x: hidden;
    
}




:root {
    --clr-neon: hsl(317 100% 54%);
    --clr-bg: hsl(323 21% 16%);
}




.navbar-brand {
/*
    padding-left: 20px;
    height: 100px;
    border-bottom: var(--clr-neon) 7px solid; 
  */  
  padding-left: 20px;

  border-bottom: var(--clr-neon) 7px solid; 
  position: relative;

}
.navbar-brand img{

    height: 65px;
    width: 70px;
    background-color: var(--clr-neon);
    padding:5px;
    margin-right: 15px;
    
    
}

.navbar-brand span{

    color: var(--clr-neon);
    font-weight: bold;
    font-size: 2.9rem;
    font-family: "Roboto Mono", monospace;
   
    
}
.navbar-brand span{
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.9em currentColor;
    
    text-shadow: 

    -160px 15px 192px var(--clr-neon),
    0 0 102px var(--clr-neon),
    0px 0 151px var(--clr-neon);
    
    ;
}

.navbar-brand span:hover,
.navbar-brand span:focus{
text-shadow: 

0 0 2px rgb(186, 144, 202),
0 0 2px rgb(186, 144, 202),
0 0 6px rgb(186, 144, 202),

-150px 0 42px var(--clr-neon),
0 0 82px var(--clr-neon),
0 0 92px var(--clr-neon),
0 0 102px var(--clr-neon),
0 0 151px var(--clr-neon);

;
}

.theNav button{
    background-color: var(--clr-neon);
    
    position: absolute;
    right: 10px;
    margin-top: 20px;
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
    box-shadow: inset 0 0 0.9em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);

}
.theNav button:hover,
.theNav button:focus {
  background-color: var(--clr-neon);
  box-shadow:  0 0 5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
 
}





.dropdown-menu li {
   margin-right: 29px;
   
}

.dropdown-menu li a {
    background-color: rgba(0, 255, 255, 0.562);
    
 }


 .dropdown:hover .dropdown-menu{
    display: block;
    
 }

ul{
    padding-right: 20px;


    

}

.navbar li a{
    color: var(--clr-neon);
    margin:  5px;
    padding: 10px;
    font-size: 1.5rem;

    border: var(--clr-neon) 0.125em solid;
    padding: 0.25em 1em;
    border-radius: 0.25em;
  
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
    box-shadow: inset 0 0 0.9em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
    position: relative;

}
.navbar li a:hover,
.navbar li a:focus {
  background-color: var(--clr-neon);
  box-shadow:  0 0 5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
 
}



.carousel a:visited{
    color: white  !important;

}

.theNav{
    
    
    position:absolute!important;
    top:0%; 
    z-index: 5;
   
}







/*Button/Character container*/


.buttonContainer{
    position:absolute; 
    bottom: 0;

   
    width: 100%;
    height: 100%;
    
  
  background-image: url("../../resurssit/img/robot.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0px 60px;
  

  margin-bottom: 0%;
    padding-bottom: 0%;

}

.joinContainer{
    position: absolute;
    top: 20%;
    left: 65%;
    transform: translateX(-65%);
    z-index: 3;
    


    font-family: "Roboto Mono", monospace;
    box-shadow: 0px 55px 20px -15px #0a023034;    
   
}

.buttonContainer h2{
    color: white;
    font-size: 4rem;
}

.buttonContainer button{
    background-color: rgb(173, 129, 218);
    margin: 35px;
}


/*Video/Main container*/
.videoContainer{
    position: relative; 
    width: 100%;
    height: 160vh;
    
    
    background-color: rgb(51, 156, 156);
    margin-top: 0;
    
}

video{
    margin-top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/*Carousel*/

.theCarousel{
    background-color: rgb(29, 24, 29);
    height: 40%;
    position: absolute;
    bottom: 50px;
    width: 70%;
    display: flex;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;

}

.carousel {
    width: 99.5%;
    height: 98%;

    margin-top: auto;
    margin-bottom: auto;
    
}

.carousel-inner{
    
    padding-left: 10%;
    padding-right: 10%;
    height: 100%;
    width: 100%;
    background-color: rgb(87, 34, 92);
}

.carousel-item {
    display: flex; /* Use flexbox for centering */
    justify-content: center ; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    height: 100%; /* Ensure it takes the full height of the carousel */
    width: 100%;
   
}
.carousel-item img {
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    padding-top: 5px;
    padding-bottom: 5px;
    


}

.carousel-caption{
    display: flex;
    justify-content: center;
    font-size: 2.3em;
    text-shadow: 2px 2px rgb(58, 51, 14);
    font-family: "Roboto";
    
    

   padding-bottom: 2%;
   text-shadow: 3px 3px 3px  rgb(129, 122, 129);
   font-weight: bold;

   border-radius: 8px;


}
.carousel-caption p{


   font-size: 2.1rem;
  
    margin: auto;
}

.carousel-caption a{
    color: rgb(241, 238, 245);
    text-shadow: 5px 3px 13px  rgb(20, 17, 20);
}

.carousel-caption h2 {
    font-size: 3rem;
}
/*
.industrial p{
    text-shadow: 5px 5px 5px  rgb(10, 8, 1);
    background-color: rgba(0, 0, 0, 0.096);

}
*/
@property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/*test*/
.theCarousel::after, .theCarousel::before{

    content:'';
    /*background-image: conic-gradient(red, blue, rgb(71, 206, 71), rgb(240, 57, 247), red);*/
    background-image: conic-gradient(from var(--angle), rgb(223, 32, 32), rgb(77, 77, 233), rgb(211, 211, 126), rgb(129, 190, 129), rgb(240, 57, 247), rgb(236, 11, 206), rgb(223, 32, 32));

    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    bottom: 0px;
    animation: 3s spin linear infinite;
    padding: 19px;
    
}
@keyframes spin{
    from{
        --angle: 0deg;
    }
    to{
        --angle:360deg;
    }
}



.theCarousel::before{
    filter: blur(1.5rem);
    opacity: 0.5;
}


.container{
    

    padding-bottom: 50px;
}

.card{
   
}

.newsContainer{
    background-color: rgb(75, 14, 82);
    min-height: 900px;
}


.news{
    color: rgb(213, 77, 255);
    font-size: 3rem;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.newsContainer .card{
    background-color: rgb(250, 245, 245);
    z-index: 6;
    height: 100%;
    width: 100%;
    color: rgb(219, 203, 219);
}
.card-body{
    background-color: rgb(47, 20, 51);
    height: 100%;
    margin: 0px 2px 0px 2px;
    background-color: rgb(85, 18, 119) !important;

}
.card img{
    margin: 2px 2px 0 2px;
    width: 98.5%;
    height: 100%;
}

.card:before, .card::after{

    content:'';
    /*background-image: conic-gradient(red, blue, rgb(71, 206, 71), rgb(240, 57, 247), red);*/
    background-image: conic-gradient(from var(--angle), rgb(223, 32, 32), rgb(77, 77, 233), rgb(211, 211, 126), rgb(129, 190, 129), rgb(240, 57, 247), rgb(236, 11, 206), rgb(223, 32, 32));

    position: absolute;
    z-index: -100;
    width: 100%;
    height: 100%;
    padding: 10px;
  
    animation: 3s spin linear infinite;
    
    
}


.card-footer{
    background-color: rgb(115, 60, 145) !important;
    margin: 0px 2px 2px 2px;
    color: white !important;
}

footer{

    height: 40px;
    width: 100%;
    background-color: var(--clr-neon);
    position: absolute;
    bottom: 0%;
    
   

}






/*SECOND page unique*/

.secondPage{
    background-image: url("../../resurssit/img/.jpg");/*REMEMBER! path is like this when uploading/(in live-server /resurssit etc works*/
    background-repeat: no-repeat;
    background-size: cover;
    /*background-position: 50% 40%;*/
    height: 100%;
    position: relative; 
    background-color: black;

}



#one:hover,
#one:focus{
text-shadow: 
/*
0 0 2px rgb(186, 144, 202),
0 0 2px rgb(186, 144, 202),
0 0 6px rgb(186, 144, 202),
*/
-70px 0 60px var(--clr-neon),
0 0 82px var(--clr-neon),
70px 0 60px var(--clr-neon),
0 0 102px var(--clr-neon),
0 0 151px var(--clr-neon);

;
}





/*THIRD page unique*/

.mainPage3{
    background-image: url("../../resurssit/img/bg3.png");/*REMEMBER! path is like this when uploading/(in live-server /resurssit etc works*/
    background-repeat: no-repeat;
    background-size: cover;
    /*background-position: 50% 40%;*/
    height: 160vh;
    width: 100%;
    position: relative; 
    background-position: top center;
}


#textArea{
    resize: vertical; 
    max-height: 400px !important;
}
 




/*Media queries*/

/*maybe, put px if needed*/
@media (max-width: 450){
    .theCarousel img{
        object-fit: cover;
        
    }


}
@media (min-width: 450px) and (max-width: 890px){
    .joinContainer{
        top: 35%;
        background-color: rgba(0, 0, 0, 0.068);
        border-radius: 3%;
    }


}


@media (max-width: 768px) { 
    ul{
        top: 110px;
        position: absolute;
        
        right: -20px;
    }

    .buttonContainer {
        background-size: cover;
        
    }


}




@media (max-width: 890px) { 
    .buttonContainer {
        background-size: cover;
        background-position: 68% 40px;
        
    }

    .theCarousel{
        background-color: red;
        width: 95%;
        height: 20%;
    }

    .industrial p {
        background-color: #ffffff00;
    }

}