@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";
*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
:before,:after{--tw-content: ""}
html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}
body{margin:0;line-height:inherit}
header { position: sticky; top: 0; left: 0; width: 100vw; box-shadow: 0px 0px 3px rgba(0,0,0,0.4); background: #fff;}
nav{padding:1rem;}
img.w-24.h-auto { width: 7rem; margin: auto; display: block; }
footer{ background: #000; padding: 1rem; }
.footerTitle{ width: 100px; margin: auto; padding: 1rem 0 2rem; }
.footerSites{ display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; align-items: center; }
.app{ max-width: 1440px; margin: auto; padding:1.5rem;}
h2 { border-bottom: solid 1px #000; padding: 2rem 0 4rem; font-size: 2rem; color: #4d4d4d; }
h3 { margin-bottom: .5rem; font-size: 1.5rem; line-height: 2rem; color: #4d4d4d; border-bottom: solid 2px #ED1A3B; padding: 0 0 1rem; }
.data .label{display: block; padding: 1rem 0;}
.label span{ font-size: 1.1rem; color:#000; font-weight: bold; }
.label input[type="text"] { display: block; border: solid 1px #000; width: 100%; height: 34px; padding: 1rem; font-size: 1.2rem; }
.label input:focus{ outline: none; }
.ageCols { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 2rem; }
.ageCols { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 1rem; }
.ageCols select { border: solid 1px #000; height: 34px; background: transparent; }
.ageCols select:focus {outline: unset;}
.ageCols select .legend{color:#333;}
.selectors label{ display:block;}
.selectors input{display: none;}
.selectors input + span{position: relative;display: inline-block;}
.selectors input + span::before { content: ''; display: inline-block; border: solid 1px #cdcdcd; width: 36px; height: 20px; position: relative; border-radius: 20px; }
.selectors input + span::after { content: ''; position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; background: #cdcdcd; border-radius: 50%; transition: all .5s; }
.selectors input:checked + span::after { left: 17px; background: red; }
.selectors input:checked + span::before { border-color:#000; }

.interesContent,
.interesContent2 { padding-top:2rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
.item { border: solid 1px #cdcdcd; border-radius: 5px; box-shadow: 0px 0px 3px rgba(0,0,0,0.3); width: max-content; padding: 1rem; margin: auto; display: block; }
.itemImage,
.itemImage img{width: 100%}
.itemTitle{position: relative;}
.itemTitle span{width: 100%; text-align: center; display: block; padding-top:1rem}
.itemSelected{ display: none; position: absolute; top:10px; right: 0px; width: 30px; height: 30px; background: red; border-radius: 50%; }
.itemSelected svg { width: 23px; position: relative; height: 23px; fill: #fff; }
.itemSelector{display: none;}
.itemSelector:checked + .itemSelected{ display: flex; justify-content: center; align-items: center; }

.control { width: 100%; display: flex; justify-content: center; padding: 4rem; }
.btn { background: #ED1A3B; color: #fff; padding: .75rem; border-radius: 4px; font-size: 1rem; font-weight: bold; text-align: center;
width: 80%; max-width: 400px; min-width: 200px;}
.top2{padding-top: 2rem;}
@media (min-width:600px) {
    .interesContent,
    .interesContent2 { grid-template-columns: 1fr 1fr;}

}
@media (min-width:860px) {
    .interesContent { padding-top:2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
    .interesContent2 { padding-top:2rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
    .UserCols {
        display: flex;
        width: 100%;
        gap: 8rem;
    }
    .data{width: 30%}
    .interes{width: 70%}
    header{position: relative;box-shadow: unset;}
    .footerCols{
        display: flex;
        max-width: 1440px;
        margin: auto;
        justify-content: space-between;
    }
    .footerTitle{
        margin: unset;
    }
}
@media (min-width:1190px) {
    .interesContent { grid-template-columns: 1fr 1fr 1fr;}
    .interesContent2 { grid-template-columns: 1fr 1fr 1fr 1fr;}

}










































/***/