.bg-fullPage{
    background: #000000
}
.bg-primaryLight{
    background: rgba(18, 18, 18, 0.3);    
}

.background-light{
    background-color: #edf2f79e;
}

.pointer{
    cursor: pointer;
}

.boxShadow{
    box-shadow: 0px -1px 6px 0px #636365;
    
}

.border-b-1{
    border-bottom: 1px solid #c0bfbf;
}
.height-100{
    height: 100vh;
}

button{
    background-image: linear-gradient(to right, #bd0505 0%, #ff1914 100%);
}


.roundBackground{
    background-color: #0e00ff75;
    height: 100vh;
    width: 100vw;
    z-index: -1;
    border-bottom-left-radius: 47%;
    border-bottom-right-radius: 47%;
}

.posAbs{
    position: absolute;
}

.posRel{
    position: relative;
}

.bg-secondaryLight{
    /* background: #f4f3fd; */
    background-color: white;
}

.big-text {
    font-size: 16vw;
    color: #9b9b9d57;
    user-select: none;
}

.bg-primaryDark {
    background: #040421db;
}

.border-shadow-left {
    box-shadow: -7px 0px 12px 0px #adacb6b0;
}
.border-shadow-right{
        box-shadow: 7px 0px 12px 0px #adacb6b0;
}

.subheading{
    text-align: center;
    width: inherit;
    font-size: 5em;
    font-weight: bold;
}

.highlight {
    background-color: #06a7b1;
    /* background-image: linear-gradient(to right, #06a7b1 0%, #262a3a 100%); */
}


@media (prefers-color-scheme: dark){
    .bg-fullPage{
        background-color: red;
    }
}

@media only screen and (max-width: 600px) {
    body{
        max-width: 100vw;
    }
    .big-text {
        font-size: 15vw;
        margin-top: 100%;
    }

    .height-100{
        min-height: 100vh;
        height: fit-content;
    }
    .subheading{
        font-size: 2em;
    }
}

/* carosule */
.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
}
.carousel-item {
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
    display: block;
}
.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
    color: #2b6cb0;  /*Set to match the Tailwind colour you want the active one to be */
}