@keyframes blinker{
    0% {
        opacity: 0;
    }

    50% {
        opacity: 100;
    }

    100% {
        opacity: 0;
    }
}

@keyframes scroll{
    0%{
        translate: 0%;
    }

    100%{
        translate: -50%;
    }

}

*{
    padding: 0px;
    margin: 0px;

    box-sizing:border-box;

    filter:blur(0.3px);

}

body{

    background: var(--main-color);

    color: var(--accent-color1);

    font-family: text-font;

    
}

.wrapper{

    padding-left: 5px;
    padding-right: 5px;

    margin-left: 10%;
    margin-right:10%;

    max-width: 80vw;
    min-height:100vh;



    
}

.content-wrapper{

    padding: 0px;
    margin:0px;

    text-wrap: balance;

}

.content-header{
    padding:5px;
    margin: 0px;

    background: var(--accent-color1);

    color: var(--main-color);
    font-size: 2vw;
    text-shadow: 1px 0px 5px #022bf7cb;

    width: 100%;
}

.content-box{

    border-style:double;
    border-color:var(--accent-color1);
    border-width: 3px;

    

}

.content-text{

    padding: 2px;

    font-family: text-font;
    font-size:1.2vw;
    text-shadow: 1px 0px 5px var(--accent-color1);


}

.grid-container{

    display:grid;
    grid-template-columns: repeat(12, 1fr[col-start]);
    grid-template-rows: repeat(12,1fr[row-start]);
    column-gap: 5px;
    justify-items: stretch;
    align-items: stretch;
    justify-content:stretch;
    align-content:stretch;

    max-height: 100vh;

}

.header{

    display:flex;
    flex-direction:row;
    align-items:center;

    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 5%;

    max-width: 80vw;

    grid-area: header;
    grid-area: 1/1/3/13;

    background: var(--accent-color1);

}

.page-header{

    padding-top:2%;
    padding-bottom:2%;

    font-family: header-font;
    font-size: 4vw;
    color: var(--main-color);
    text-shadow: 1px 0px 5px #022bf7cb;;


}

.list-items{
    list-style-type:none;

    padding: 0px;
    margin:0px;
}

.col-1{

    grid-area: col-1;
    grid-area: 3/1/12/3;

    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:flex-start;
    align-content:stretch;
    row-gap:2%;


}

#what-up{

    width:100%;
    height: 60%;

}

#what-up-content-box{

    height: 100%;

    overflow-y: scroll;

}

#what-up-content{

    padding: 0px 5px;
    margin: 0px;

    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    row-gap:15px;
    justify-content: start;
    



}

#to-do{

    width:100%;
    height: 35%;
    

}

#to-do-content-box{

    padding: 0px 5px;

}

.col-2{
    grid-area: col-2;
    grid-area:3/3/12/10;

    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);


}

#nav-map-canvas{
    
    width: 100%;
    height: 100%;
    
    grid-area: 1/2/11/7;
    
}

#nav-map{
    
    width: 100%;
    height: 95%;
    
    border-style:double;
    border-color:var(--accent-color);
}

#label-box{
    width:100%;
    height: 100;

    grid-area: 1/8/2/10;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

#label{
    font-family: header-font;
    font-size: 4vmin;
    
}

#nav-bar-con{
    grid-area: 3/8/11/10;
}

 


.col-3{

    grid-area: col-3;
    grid-area: 3/10/12/13;

    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:flex-start;
    align-content:stretch;
    row-gap:2%;


}

#updates{

    width:100%;
    max-height: 60%;
    min-height: 60%;

}

#updates-content-wrapper{

    width: 100%;
    max-height: 90%;
    overflow-y: scroll;

}

.update{

    width:100%;

    margin-bottom: 1%;
    padding: 1%;

    background: var(--accent-color1);
    color: var(--main-color);

    border-style:double;
    border-width:1%;
    border-color:var(--main-color);

}

footer{

    grid-area: 12/1/13/13;
    height: 80%;
    width: 100%;

    background: var(--main-color);
    border: double var(--accent-color1);

}

#ticket-banner{
    width: 100%;
    padding: 2px;

    display: flex;
    flex-direction: column;
    

    overflow-x: hidden;
}

#ticker-label-text{
    animation: blinker 2s infinite;

    color: var(--accent-color1);
    padding: 4px;
    font-size: 1vw;
}

#ticker-box{
    width: max-content;
    display: flex;
    flex-direction: row;
}

.ticker-text-wrapper{
    width: max-content;
    display: flex;
    flex-direction: row;

    overflow-x:visible;
}

#1{
    width: max-content;
}

#2{
   width: max-content; 
}