.headerContainer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 70vh;
    max-height: 100vh;
}

#bgGrid {
    position: fixed;
    will-change: transform;
    background-size: 2.5rem 2.5rem;
    background-image: linear-gradient(90deg,rgba(0,0,0,.133) 1px,transparent 0),linear-gradient(180deg,rgba(5,5,5,.133) 1px,transparent 0);
    z-index: -2

}
#bgGrid,#blurGrid {
     inset: 0;
     height: 100vh;
}
#blurGrid {
    background:radial-gradient(circle,hsla(0,8%,95%,.6) 0,hsla(0,11%,96%,.97) 90%,var(--background) 100%);
    z-index:-1;
}
@media screen and (max-width: 600px) {
    #bgGrid {
        background-size:1.5rem 1.5rem
    }
}


.heroSection{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
}

.heroSection > h1{
    font-size: 20px;
}



.urlConatiner{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-direction: row;
}

.tictactoeImageConatiner{
    margin-bottom: 2rem;
}

/*.tictactoeButton{*/
/*    font-size: 16px;*/
/*    border: none;*/
/*    background-color: transparent;*/
/*    cursor: pointer;*/
/*}*/


.urlConatiner > div {

    padding: 8px 12px;
    border-radius: 5px;
    margin-top: 2rem;
}

/*--light-green: #22C55E;*/
/*--light-yellow: #FFC107;*/
/*--light-blue: #3B82F6;*/
/*--green: #2E865F;*/


.tictactoeUrlConatiner{
    background-color: var(--light-green);
    box-shadow: 0 .7065919983928324px .7065919983928324px -.625px #00000026,0 1.8065619053231785px 1.8065619053231785px -1.25px #00000025,0 3.6217592146567767px 3.6217592146567767px -1.875px #00000023,0 6.8655999097303715px 6.8655999097303715px -2.5px #00000020,0 13.646761411524492px 13.646761411524492px -3.125px #0000001b,0 30px 30px -3.75px #0000000d;
}

.tictactoeUrlConatiner:hover{
    background-color: var(--green);
    color: white;
    cursor: pointer;
}


.githubUrlConatiner{
    background-color: var(--light-yellow);
    box-shadow: 0 .7065919983928324px .7065919983928324px -.625px #00000026,0 1.8065619053231785px 1.8065619053231785px -1.25px #00000025,0 3.6217592146567767px 3.6217592146567767px -1.875px #00000023,0 6.8655999097303715px 6.8655999097303715px -2.5px #00000020,0 13.646761411524492px 13.646761411524492px -3.125px #0000001b,0 30px 30px -3.75px #0000000d;
}

.githubUrlConatiner:hover{
    background-color: var(--green);
    color: white;
    cursor: pointer;
}