@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

:root{
    --dark-blue: hsl(220, 85%, 25%);
    --light-blue: hsl(208, 80%, 75%);
}

.home{
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.playerSelection, .shotInsertion{
    display: grid;
    grid-template-columns: 1.25fr minmax(0, 450px);
    gap: 4rem;
}


.selectedPlayer{
    width: 100%;
}

.selectedPlayer img{
    border-radius: 1rem;
}

.selectedPlayer{
    position: relative;
}

.selectedPlayer.selected::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, var(--light-blue) 0%, rgba(255,255,255,0) 30%);
    z-index: 2;
    border-radius: 1rem;
}

.selectedPlayer .playerImg{
    position: relative;
    width: 100%;
}

.selectedPlayer .playerImg img{
    width: 100%;
}

.row-player{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.statistiskGrid{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
}

.row-goals-foot{
    width: 90%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.row-goals-foot .col{
    text-align: center;
    width: 100%;
}

.row-goals-foot .col .image{
    position: relative;
    width: 100%;
}

.row-goals-foot .col .image img{
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.shirtNumber{
    --offset: 1.5rem;
    position: absolute;
    top: var(--offset);
    right: var(--offset);
    font-family: 'Oswald', sans-serif;
    font-size: 4rem;
    z-index: 3;
}

h6{
    font-size: 1.75rem;
    color: var(--dark-blue);
}

.btn-primary{
    background-color: var(--dark-blue);
    background-color: var(--light-blue);
    border-color: var(--light-blue);
}

.btn-primary:hover{
    --light-blue: hsl(208, 80%, 65%);
    background-color: var(--light-blue);
    border-color: var(--light-blue);
}

.canvas{
    width: 100%;
}

.canvas canvas{
    height: 85vh;
    aspect-ratio: 585/900;
}