html{
--clr-welcome-highlight:#a89494;
--title-emphasis-spacing:0.28ch;
}
html.light{
--clr-welcome-highlight:#9d6b4f;
}
h1>span{
color:var(--clr-welcome-highlight);
letter-spacing:var(--title-emphasis-spacing);
}
#content{
width:100%;
max-width:80vw;
margin:auto;
}
#badges-p img,
#cliques-p img,
#badges-qr{
image-rendering:pixelated;
}
#badges-p>a,
#cliques-p>a{
outline:none;
}
#badges-p>a>img,
#cliques-p>a>img{
-webkit-transition:0.2s -webkit-transform ease;
transition:0.2s -webkit-transform ease;
-o-transition:0.2s transform ease;
transition:0.2s transform ease;
transition:
0.2s transform ease,
0.2s -webkit-transform ease;
position:relative;
}
#badges-p>a:hover>img,
#badges-p>a:focus>img,
#cliques-p>a:hover>img,
#cliques-p>a:focus>img{
-webkit-transform:scale(1.3);
-ms-transform:scale(1.3);
transform:scale(1.3);
z-index:9999;
position:relative;
}
#badges-p,
#badges-p *,
#cliques-p,
#cliques-p *{
text-decoration:none;
}
.center{
text-align:center;
}
#badges textarea{
width:50%;
background-color:var(--clr-bg-nav);
color:var(--clr-text-primary);
min-height:5em;
resize:vertical;
padding:0.5em;
line-height:1;
}
#ad{
border:none;
max-width:100%;
}
.h-card{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
gap:1.25em;
background-color:var(--clr-bg-submenu);
padding:1.5rem 2rem;
font-family:var(--fonts);
color:var(--clr-text-primary);
margin:2rem auto;
-webkit-transition:background-color 0.3s ease;
-o-transition:background-color 0.3s ease;
transition:background-color 0.3s ease;
border:1px solid var(--clr-border-submenu);
}
.h-card img{
-webkit-box-ordinal-group:3;
-ms-flex-order:2;
order:2;
width:180px;
height:180px;
max-width:35%;
max-height:100%;
aspect-ratio:1/1;
-o-object-fit:cover;
object-fit:cover;
-webkit-transition:-webkit-transform 0.3s ease;
transition:-webkit-transform 0.3s ease;
-o-transition:transform 0.3s ease;
transition:transform 0.3s ease;
transition:
transform 0.3s ease,
-webkit-transform 0.3s ease;
cursor:not-allowed;
-ms-flex-negative:0;
flex-shrink:0;
}
.h-card img:hover{
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);
transform:rotate(180deg);
}
.h-card>div{
-webkit-box-ordinal-group:2;
-ms-flex-order:1;
order:1;
-webkit-box-flex:2;
-ms-flex-positive:2;
flex-grow:2;
min-width:0;
}
.h-card p{
margin-bottom:1rem;
font-size:1rem;
line-height:1.5;
}
.h-card .p-note{
font-size:1.1em;
background-color:var(--clr-bg-nav);
border-left:2px dotted var(--clr-sublist-arrow);
padding:1rem 1.5rem;
margin-top:0.5rem;
}
@media (max-width:900px){
.h-card{
display:block;
padding:1rem 1.5rem;
}
.h-card img{
float:none;
display:block;
margin:0 auto 1rem;
width:60vw;
max-width:280px;
height:auto;
}
.h-card>div{
-webkit-box-ordinal-group:1;
-ms-flex-order:0;
order:0;
-webkit-box-flex:unset;
-ms-flex-positive:unset;
flex-grow:unset;
}
}
#status{
text-align:center;
max-width:800px;
width:100%;
margin:auto;
}
#status>div{
margin:0.5em auto;
}