:root
{
    --box_shadow: 0 0 8px 1px rgb(0, 0, 0, 0.3);
}
::-webkit-scrollbar-track
{
    background: blue;
}

#teams-intro
{
    background-image: url('/img/data.jpg');background-size: 100%;;
}


.hidden {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    max-width: max-content;
    margin: 0; 
    padding: 0 1% 0 0;
    border-right: 5px solid rgb(10, 166, 214);
    transition: all 1s;
}
.show 
{
    animation: typewriter 3s steps(40, end) .5s both 1, cursore .5s step-end .5s infinite;
}

@keyframes cursore {
    from, to {
        border-color:rgba(255, 255, 255, 0.036) ;
    }
    50% {
        border-color: rgb(14, 173, 194);
    }
}

@keyframes typewriter {
    0% {width: 0;}
    100% {width: 100%}
}

#acq
{
    width: 90%;margin: 0 auto;;
    height: 50vh;
    display: flex;justify-content: center;
    margin: 0 auto;align-items: center;
}

#acq figure
{
    width: 35%;position: relative;;
    height: 100%;margin: 0 2%;
    background-image: url('/img/NS.DLPI.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


#acq section
{
    width: 40%;
    color: var(--color);
    padding: 1% 0;
}

#acq section h1
{
    padding: 2% 0;
    margin: 0 auto;font-size: 2vw;
}

#acq section article
{
    font-size: .8vw;
    text-align: justify;
    line-height: 120%;
}

#acq ul 
{
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 2% 0;
}
#acq li
{
    list-style-type: none;
    padding: 1% 2%;
    margin-inline: 1%;;
    font-size: 1vw;
    display: flex;
    align-items: center;
    color: var(--color);
    line-height: 120%;
    border-radius: 10px;;
    margin-block: .5%;
    box-shadow:0 0 6px .1px rgba(0, 0, 0, 0.23);
}

#grid{
    position: relative;
    width: 100%;
    height: 80vh;
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content: center;
   
    overflow: hidden;
}
#grid-cnt
{
    width: 30%;
    height: 45%;
    margin-inline: 1%;
    display: grid;
    place-items: center;
    box-shadow: var(--box_shadow);
    border-radius: 20px;;
}

#grid-cnt section
{
    text-align: center;
    width: 80%;
    color: white;
}

#grid-cnt h1{
    font-size: 1.2vw;
    text-align: center;
    padding: 2% 0;
}

#grid-cnt article
{
    font-size: 1vw;
    line-height: 120%;
}










@media only screen and (max-width: 900px)
{

    #data-intro 
    {
    height: 70vh;
    }

    #data-intro div
    {
        width: 98%;
        color: white;
        margin: 0 auto;
    }
    
    #data-intro div section
    {
        width: 90%;
    }
    #data-intro div section h1{
        font-size: 250%;
        color: rgb(0, 183, 255);
    }
    
    #data-intro div section article
    {
        font-size: 90%;
        line-height: 120%;
        text-align: justify;
    }
    .hidden {
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        max-width: max-content;
        margin: 0; 
        padding: 0 1% 0 0;
        border-right: 5px solid rgb(10, 166, 214);
        transition: all 1s;
    }
    .show 
    {
        animation: typewriter 3s steps(40, end) .5s both 1, cursore .5s step-end .5s infinite;
    }
    
    @keyframes cursore {
        from, to {
            border-color:rgba(255, 255, 255, 0.036) ;
        }
        50% {
            border-color: rgb(14, 173, 194);
        }
    }
    
    @keyframes typewriter {
        0% {width: 0;}
        100% {width: 100%}
    }
    
    #acq
    {
        width: 100%;
        height: fit-content;
        display: block;
        margin: 2% auto;
    }

    
#acq figure
{
    width: 96%;margin: 0 auto;
    height: 400px;
}
    
    #acq section
    {
        width: 95%;
        margin: 0 auto;
        color: var(--color);
        padding: 1% 0;
    }
    
    #acq section h1
    {
        padding: 5% 0;font-size: 100%;
    }
    
    #acq section article
    {
        font-size: 90%;
    }
    #acq ul 
    {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        align-items: center;
        justify-content: center;
        padding: 5% 0;
    }
    #acq li
    {
        list-style-type: none;
        padding: 1% 2%;
        margin-inline: 1%;;
        font-size: 85%;
        display: flex;
        align-items: center;
        color: var(--color);
        line-height: 120%;
        border-radius: 10px;;
        margin-block: .8%;
        box-shadow:0 0 6px .1px rgba(0, 0, 0, 0.23);
    }
    
    #grid{
        position: relative;
        width: 100%;
        height: auto;
        display: block;
        overflow:hidden;
        background: var(--color);
    }
    #grid-cnt
    {
        width: 100%;
        height: 45%;
        padding: 0;
        display: block;
        border-radius: 0;
        background: var(--color);
        border-bottom: .1px solid white;
        box-shadow: none;
    }
    
    #grid-cnt section
    {
        text-align: justify;
        width: 90%;
        margin: 0 auto;
        color: white;
        padding: 5% 0;
    }
    #grid-cnt h1{
        font-size: 120%;
        text-align: start;
        padding: 5% 0;
    }
    
    #grid-cnt article
    {
        font-size: 80%;
        line-height: 120%;
    }
    


}