:root {
    --cardscaling: 320px;
    --cardheader: 50px;
    --cardlower: 200px;
    --cardbigtext: 20px;
}

:root body:has(.pagecentered) {
    --cardscaling: 40vw;
    --cardheader: 5vw;
    --cardlower: 10vw;
    --cardbigtext: 2vw;
}

:root body[data-size="xs"],
:root body[data-size="s"] {
    --cardscaling: 100%;
    --cardheader: 10vw;
    --cardlower: 20vw;
    --cardbigtext: 4vw;
}

div.cardholder {
    width: var(--cardscaling);
    aspect-ratio: 1/1;
}

.cardholder {
    position: relative;
    vertical-align: top;
    width: auto;
    aspect-ratio: 0.67;
}

.cardholder {
    height: auto;
    background-color: transparent;    
}

.cardholder > .panelholder {
    aspect-ratio: 2.17 / 3.35;
    height: auto;
    width: 100%;
    cursor: pointer;
}

.card {
    aspect-ratio: 2.17 / 3.35;
    height: auto;
    width: auto;
    border-radius: var(--cardbigtext);
    cursor: pointer;
}

.card > span.lower,
.card > span.age,
.card {
    box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
    -moz-box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
    -webkit-box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
    border: 0.8px solid var(--bordercolor);
}

.card {
    background-image: url('/images/demo/woman1.jpg');
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.cardholder > .card {
    position: absolute;
    height: 100%;
    left: 50%;
    top: 50%;
    background-color: #f2f2f2;
    transform-origin: bottom center;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.pagecentered {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.card > span.header {
    width: 100%;
    height: var(--cardheader);
    background-color: rgba(255,255,255,0.34);    
}

.card > span.age {
    position:absolute;
    right: var(--cardbigtext);
    top: calc(var(--cardheader) - var(--cardbigtext));
    width: calc(2 * var(--cardbigtext));
    aspect-ratio: 1/1;
    height: auto;
    background-color: #fff;
    border-radius: 50%;
}

.card > span.header > span.name {
    position: relative;
    font-size: var(--cardbigtext);
    line-height: var(--cardbigtext);
    margin-left: calc((var(--cardheader) - var(--cardbigtext)) / 2.0);
    margin-top: calc((var(--cardheader) - var(--cardbigtext)) / 2.0);
}

.card > span.age > span {
    font-size: var(--cardbigtext);
    line-height: var(--cardbigtext);
    width: 80%;
    height: calc((100% - var(--cardbigtext)) / 2);
    margin: calc(var(--cardbigtext) / 2) 10%;
    text-align: center;
    position: relative;
}

.card > span.lower {
    position: absolute;
    bottom: calc(var(--cardbigtext) / 2);
    left: calc(var(--cardbigtext) / 2);
    width: calc(100% - var(--cardbigtext));
    height: var(--cardlower);
    max-height: 20%;
    border-radius: var(--cardbigtext);
    background-color: rgba(255,255,255,0.8);    
}

.cardholder[data-like="like"] > .card > span.header {
    background-color: #0f0;
}

.cardholder[data-like="dislike"] > .card > span.header {
    background-color: #f00;
}







.cardholder > ul.accelerator {
    display: flex;
    width: auto;
    height: 60px;
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%, 0%);
}

.cardholder > ul.accelerator {
    bottom: -25px;
    z-index: 1;
    display: none;
}

.cardholder:hover > ul.accelerator {
    display: flex;
}

.cardholder > ul.accelerator > li {
    height: 100%;
    aspect-ratio: 1/1;
    width: auto;
    float: left;
    border-radius: 50%;
    border: 0.8px solid var(--bordercolor);
    box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
    -moz-box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
    -webkit-box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
    margin-right: 20px;
    background-color: #f0f;
    cursor: pointer;
}

.cardholder > ul.accelerator > li:last-child {
    margin-right: 0px;
}

.cardholder > ul.accelerator > li > span.icon {
    width: 70%;
    aspect-ratio: 1/1;
    height: auto;
    position: relative;
    margin: 15%;
    -webkit-filter: invert(100%); filter: invert(100%);
}


.cardholder > .panelholder > section:first-of-type {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: 20px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.cardholder > .panelholder:has(> span.titlebar) > section:first-of-type {
    height: calc(100% - 100px);
}

.cardholder > .panelholder > section > section.bottom {
    position: relative;
    width: 100%;
}

.cardholder > .panelholder > section > section.heropic {
    position: relative;
    border-radius: var(--rounding);
    width: 100%;
    height: 100%;
    min-height: 0;
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.cardholder > .panelholder > section > section.heropic:not(.noimage) {
    box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
    -moz-box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
    -webkit-box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
    border: 0.8px solid var(--bordercolor);
    background-color: rgba(0,0,0,0.1);
}

.cardholder > .panelholder > section > section.heropic.noimage {
    background-image: url('/images/noimage.png');
    background-color: transparent;
    background-size: contain;

}