:root {
--teal-primary: hsl(180, 90%, 30%);
--teal-dark: hsl(197, 86%, 11%);
--padding-card: 1rem;
--gap-between-buttons: 1rem;
--dark-text:hsl(270, 42%, 75%)
}

.body{
    background:hsl(198, 74%, 6%);
    justify-content: center;
    color: rgb(41, 38, 41);
}



.container{
    border-radius: 20em;
    background-color: hsl(148, 57%, 45%);
    justify-content: center;

    display: flex;
    flex-wrap: wrap;
    
}

.footer{ 
    

}

.nav:hover{background-color: hsl(196, 100%, 71%);}
.nav{
    flex-flow: row;
    position-anchor: unset;
    background-color: hsl(225, 100%, 27%);
    justify-content: center;
    border-radius: 10em;
    transition: all 300ms ease-in;
      background: linear-gradient(265.27deg, hsla(152, 81%, 25%, 0.682), hsla(209, 66%, 35%, 0.682));  

}
.section-right{
    justify-content: right;
}

.main{
    flex-flow: row;
    position-anchor: unset;
    background-color: hsla(47, 88%, 20%, 0.416);
    justify-content: center;
    justify-self: center;
    border-radius: 10em;
    max-width: 1200px;
    min-width: auto;
    

}

ul{
    justify-content: right;
}
.li{
    gap: var(--gap-between-buttons);
}

.card-container {
display: flex;
gap: var(--gap-between-buttons);

}


.grey{
    background-color:rgb(22, 22, 22);
    border-color: aliceblue;


}
.body{
    background:rgb(40, 58, 85);
    justify-content: center;
    color: rgb(163, 159, 163);
}



.container{
    display: flex;
    flex-wrap: wrap;
}
.uwu{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10vh;
}
.card-container {
display: flex;
gap: var(--gap-between-buttons);

}

.card {
background:linear-gradient(10deg,rgba(0, 128, 128, 0.518),rgba(98, 158, 19, 0.918));;
padding: var(--padding-card);

border-color: rgba(0, 255, 255, 0.486);
text-decoration: none;
border-radius: 1.5rem;
transition: background-color 0.3s ease;
display: flex;
justify-content: center;
}

.block_card {
background:linear-gradient(10deg,rgba(0, 128, 128, 0.333),rgba(19, 158, 140, 0.464));;
padding: var(--padding-card);
display: flexbox;
border-color: rgba(0, 255, 255, 0.762);

text-decoration: none;
max-width:1000px;
border-radius: 1.5rem;
transition: background-color 0.3s ease;
color: rgb(163, 159, 163);
margin: 1rem;
justify-self: center;

}

.navbar {
background:linear-gradient(45deg,rgb(196, 194, 94),rgb(128, 119, 0));;
padding: var(--padding-card);
display: flexbox;
border-color: rgb(255, 230, 116);

text-decoration: none;
justify-content: right;

border-radius:11rem;
transition: background-color 0.3s ease;
color: rgb(163, 159, 163);

}
.card:hover {
background-color: hsl(174, 87%, 15%);
color: hsl(66, 100%, 80%);
}



.footer{
    justify-content: left;

    background: linear-gradient(10deg, rgb(0, 161, 126), rgb(160, 22, 141));}

.buttons{    justify-content: flex-end;}

.foreground{
    background: linear-gradient(10deg, rgba(61, 160, 89, 0.774), rgb(42, 122, 113));
    justify-content: center;

}