:root {
    --prime:rgb(162, 55, 162);
    --dark: rgb(77, 77, 104);
    --light:rgb(133, 133, 164);
}

body{
    color: white;
    margin:0;
}

.title-container{
    display: flex;
    align-items: center;
     justify-content: space-between; 
}
.title-container img{
    width: 200px;
}


.container {
    max-width: 1024px;
    margin: 0 auto;
}

section {
    padding: 2rem;
}

section.header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

section.prime {
    background-color: var(--prime);
}


section.dark {
    background-color: var(--dark);
}

section.light {
    background-color: var(--light);
}

section h2{
    color:var(--prime);
}

h5{
    font-size: 14px; 
}


.flex {

    display: flex;
}

.flex.items-center {
    align-items: center;
}

.container.flex {
    width: 100%;
}

.col {
    width:100%
}
  



  @media (max-width: 540px) {
    .container.flex {
        width: 100%;
        flex-direction: column;
    }
    .title-container{
        flex-direction: column-reverse;
    }
  }
  @media (max-width: 340px) {
    *{
        font-size:12px;
    }
  }