:root{
    --font-size: 16px;
    --h1--font-size: 28px;
    --h2--font-size: 22px;
    --radios--font-size:26px;
    --font--card-size: 24px;
    --container-width: 360px;
}

*{
    box-sizing: border-box;
}

html, body{
    margin:0px;
    padding:0px;
    width: 100%;
    height: 100%;
    
    background: #FFFFFF;

    text-align: center;
    
    color: #808080;
    font-family: "museo", serif;

    font-size: var(--font-size);

    font-weight: 400;

}

strong{
    font-family: "museo", serif;
    font-weight: 500;
    color:#163858;
}

a{
    color: #163858;
}

body{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

body > main{
    -webkit-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    align-self: auto;

    overflow-y: auto;
    width: 100%;
}

body > footer{
    -webkit-order: 0;
    order: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-self: auto;
    align-self: auto;

    color: #696969;

    width: 100%;

    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;

    padding:20px;

    p:first-child{
        text-align: left;
        display: none;
    }

    p:last-child{
        text-align: right;
                width: 100%;
    }

}

body > header{
    -webkit-order: 0;
    order: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-self: auto;
    align-self: auto;

    width: 100%;

    margin-top:16px;
    margin-bottom:16px;
}
header .logo{
    display: block;
    margin: auto auto;
    max-width: 100px;
    width: 90%;
    height: auto;
}

footer .menu{
    background: #ef7d05;
    a{
        padding:0px;
    }
    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;

    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;

    width: 100%;
    padding:16px;
    margin:0px;

    li{
        list-style: none;
    }

    img{
        display: block;
        height: 40px;
        width: auto;
    }

    img.active{
        filter: brightness(0) saturate(100%) invert(26%) sepia(64%) saturate(1421%) hue-rotate(155deg) brightness(100%) contrast(100%);
    }

}

h1{

    font-family: "aptos", sans-serif;

    display: block;
    font-size: var(--h1--font-size);
    padding-top:16px;
    padding-bottom:16px;
    margin:0px;
    color:#25476A;

}
h2{
    font-size: var(--h2--font-size);
    color: #257FC2;
}

form{
    text-align: left;

        width: fit-content;
        margin: auto auto;

    .radios-area > div{

        padding:16px;
        padding-top:0px;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-content: center;
        align-content: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .radios-area > div label{

        -webkit-order: -1;
        order: -1;
        font-size: var(--radios--font-size);
        font-weight: bold;
        padding: 8px;
        
    }

    input[type="text"],input[type="email"]{
        padding:8px;
        width: -webkit-fill-available;
        font-size: var(--font-size);
    }

}

.radios-area{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.btn{

        background: #25476A;
        color:#fff;
        padding: 16px 64px;
        border-radius: 36px;
        border:none;
        font-size: var(--font-size);
        text-decoration: none;
    
}

.container{
    max-width: var(--container-width);
    width: 90%;
    margin: auto auto;
    text-align: left;
}


.card{
    display: block;
    background: #25476A;
    color:#fff;
    padding: 16px 64px;
    width: 100%;
    margin-top: 36px;
    margin-bottom: 36px;
    border-radius: 36px;
    text-decoration: none;
    font-size: var(--font--card-size);
}


.pageImage{

    max-width: var(--container-width);
    width: 90%;
    margin: auto auto;
    margin-top:36px;
    margin-bottom:36px;

}

.container ul{
    text-align: left;
    li{
        padding-top:6px;
        padding-bottom:6px;
    }
}

.menu{


    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;

    .menu-item{

        border-radius: 8px;

        padding: 20px;
        color: #fff;
        font-weight: bold;
        background: #9C0751;
        
        aspect-ratio: 1 / 1;

        width: calc(50% - 20px);
        margin: 10px;

        text-decoration: none;
        text-align: left;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-content: center;
        align-content: center;
        -webkit-align-items: center;
        align-items: center;

        svg{
            width: 40px;
            height: 40px;

            -webkit-order: 0;
            order: 0;
            -webkit-flex: 0 1 auto;
            flex: 0 1 auto;
            -webkit-align-self: flex-end;
            align-self: flex-end;
        }

        p{
            -webkit-order: 0;
            order: 0;
            -webkit-flex: 0 1 auto;
            flex: 0 1 auto;
            -webkit-align-self: flex-start;
            align-self: flex-start;
            margin:0px;
            padding:0px;
            text-decoration: none;
        }

    }

}

.with-icon{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;

    svg{
        margin-right:12px;
    }
}

.rating-row{
  margin: 10px 0 14px 0;
}

.rating-row .rating-label{
  display:block;
  margin-bottom: 6px;
}

.stars{
  display:inline-flex;
  flex-direction: row-reverse; /* needed for the fill logic */
  gap:6px;
}

.stars input{ display:none; }

.stars label{ cursor:pointer; line-height:0; }

.stars label svg path{
  fill:none;
  transition: fill .15s ease;
}

.stars label:hover svg path,
.stars label:hover ~ label svg path{
  fill:#f9c004;
}

.stars input:checked ~ label svg path{
  fill:#f9c004;
}