body{padding:0;margin:0;background:none;font-family:'Roboto';color:#452134;overflow:hidden}

*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-track{border-radius:0px;background-color:#F9D3E2}
*::-webkit-scrollbar-thumb{border-radius:0px;background-color:#F894B0}

.is-hidden{display:none}
a{color:inherit;text-decoration:none}
i{display:none}
#text-box p, #link-box a, #link-box span::after, font{text-shadow:2px 1px 1px #FFF, 1px -2px 0 #FFF, -1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px 0px 0 #FFF, 0px 2px 0 #FFF, -2px 0px 0 #FFF, 0px -2px 0 #FFF, 2px 2px 2px #DD658B00}
main{height:570px;margin-top:8px;padding:0 4px 0 7px;overflow-y:scroll}
#MemberProfiles{margin-top:-8px;padding-right:4px;display:flex;flex-wrap:wrap;justify-content:space-between}
#card-member, #icon-box, #text-box, #link-box{border:2px solid #FF69B4}
#card-member{
width:300px;height:178px;
margin-top:8px;
background-image:url('img_tartan-clovers-club/fondo-card.gif');
font-size:14px;text-align:center
}
#card-member:last-of-type{margin-bottom:8px}
#icon-box{
width:100px;height:100px;
margin-top:8px;
position:relative;left:9px;
&:hover{border:2px solid transparent;
filter:drop-shadow(1px 1px 0px #FF69B4) drop-shadow(-1px -1px 0px #FF69B4) drop-shadow(-1px 1px 0px #FF69B4) drop-shadow(1px -1px 0px #FF69B4)}
}
#icon-box img:hover{
width:100px;
-webkit-mask-image:url('img_tartan-clovers-club/heart-.png');
-webkit-mask-size:100%;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center
}
#icon{width:100px;height:100px;object-fit:cover;background-color:#F7B5CE}
#text-box{
width:165px;height:100px;
margin-top:-104px;margin-left:122px;
& b{font-weight:900}
& p{
width:150px;margin:auto;
font-weight:400;
text-align:center;
position:relative;top:50%;
transform:translateY(-50%);
}
}
#link-box{
width:278px;height:45px;
margin:auto;margin-top:8px;
font-weight:600;
& p{margin:4px auto;text-align:center;
&::before{content:'| '} &::after{content:' |'}}
& span{&::before{content:'Oficial Member of '} 
&::after{color:#FF69B4;content:'Tartan Clovers Club'}}
& a{
color:#FF69B4;text-decoration:none;
&:hover{color:#02A5DC}}
& font{color:#FF69B4}}

#search-section{
width:627px;margin:auto;
display:flex;justify-content:space-between
}

.extra-content, .button{text-transform:uppercase}

input[type='text']{
width:510px;
padding:5px 10px;
background-color:#FFFFFF;
font:600 14px 'Rubik';
text-transform:uppercase;
border:2px solid #02A5DC;
border-radius:15px
}
input[type='text']:focus{border-color:#FF69B4;color:#452134;outline:none}

.button{
width:fit-content;height:fit-content;
padding:6px 12px;
background-color:#FF69B4;
font:700 15px 'Rubik';
color:#FFFF00;
border:none;border-radius:15px;
&:hover{background-color:#02A5DC;color:#FFAFD7;cursor:pointer}
}

.extra{position:relative;display:inline-block}
.extra-content{
min-width:280px;margin-top:5px;
padding:5px 10px;
background-color:#02A5DC;
font-size:14px;font-weight:800;
color:#FFFF00;
display:none;
position:absolute;
border-radius:10px;
box-shadow:0px 2px 5px 0px rgba(0,0,0,0.2);
z-index:10
}
.extra:hover .extra-content {display:block}