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


*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

:root{
    --primary-color:#F7DD43;
    --primary-color-border-date:#746615;
    --background-image:url(./assets/background.svg);
    --card-fill-color:#1D1C19;
}

body.blue{
    --primary-color:#338AF3;
    --primary-color-border-date:#338AF3;
    --card-fill-color:#202024;
    --background-image:url(./assets/background.svg);

    
}
body.green{
    --primary-color:#047C3F;
    --primary-color-border-date:#047C3F;
    --background-image:url(./assets/background-green.svg);
    --card-fill-color:#1A1F1B;
}
body.yellow{
    --primary-color:#F7DD43;
    --primary-color-border-date:#746615;
    --background-image:url(./assets/background-yellow.svg);
    --card-fill-color:#1D1C19;
}
ul{
    list-style:none;
}
ul.color-select{
    display:flex;
    gap:20px;
    justify-content: center;
    transform: translateY(25px);
    
    
}
ul.color-select li{
    width:20px;
    height:20px;
    border-radius: 100%;
}
ul.color-select li:hover{
    transform: scale(1.1);
}

ul.color-select li:nth-child(1){
    background-color:#338AF3;
}
ul.color-select li:nth-child(2){
    background-color: #047C3F;
}
ul.color-select li:nth-child(3){
    background-color:#F7DD43
}

body{
    background-image: var(--background-image);
    background-color: #121214;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  
}
body *{
    font-family: 'Roboto', sans-serif;
}
#content{
    width:fit-content;
    margin:auto;
    padding-top:52px;
    
    
    
}

#cards{
    display:flex;
    flex-direction: column;
    gap: 32px;
}

header{
    margin-bottom: 63px;
    text-align: center;
}
.card {
    
    text-align: center;
    padding: 32px 23px;
    background: var(--card-fill-color);
    border-bottom: 2px solid var(--primary-color);
    border-radius: 6px;
}
.card h2 { 
    display:flex;
    gap:16px;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--primary-color-border-date);
    padding: 8px 16px;
    border-radius: 6px;
    width:fit-content;
    margin-inline: auto;
    margin-bottom: 53px;
    color:#F7DD43;
  
    
    
}
.card h2 span{
    font-size: 14px;
    text-transform: uppercase;
    color: #E1E1E6;}

.card ul{
    display:flex;
    flex-direction: column;
    gap:24px;
    width:270px;
}
.card ul li{
    display: flex;
    
    justify-content: space-between;
    align-items: center;
    
}
.card ul li+li{
    padding-top:24px;
    /* margin-top:24px; */
    border-top:1px solid #323238;
    
}
.card ul li strong{
    color:#E1E1E6;
    font-size: 36px;
    font-weight: 900px;
    line-height: 125%;
    
}

.card{
    opacity:0;
    animation: show 3s forwards
}

.card ul li img:hover,
.card ul li strong:hover{
    transform: scale(1.1);
}

.card ul li img,
.card ul li strong{
    transition: transform 0.5s;
}

@keyframes show {
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}

@media(min-width:700px){
    #cards{
        flex-direction:row;
        flex-wrap: wrap;
        max-width: 670px;
    }
}