/*////////////////////////////////////////////////////////////////////////////
// Version 1.1 Signed by Sid @ BENTO on 2025-09-09 T 08:05:40 -06:00
// Authentication (do not edit) $kMAAmoM7$
//////////////////////////////////////////////////////////////////////////////
//
// Copyright (c) 2025 by Sid Paral. All rights reserved
//
// Permission to use, copy, modify, and distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
//
//////////////////////////////////////////////////////////////////////////////
//
// face2.css
//
////////////////////////////////////////////////////////////////////////////*/
:root {
--face-color-break: #AAA;
--face-color-fore-text: #000;
-face-color-back-body: #EFD;
--face-color-back-body: #EFD;
--face-color-back-bottom: #CCA;
--face-color-link-reg: #009;
--face-color-link-vis: #339;
--face-color-link-hov: #066;
--face-color-link-act: #F66;
--face-padding: 1.0vmin;
--face-line-size: 0.2rem;
--face-button-radius: 0.5rem;
--face-thumb-radius: 0.5rem;
--face-border-radius: 1.0rem;
--face-line-radius: calc(0.5 * var(--face-line-size));
--face-font-size-text: 0.9rem;
--face-font-size-cap: 0.8rem;
--face-wait-progress: 0%;
--face-limit-tight2: 30rem;
--face-limit-tight1: 35rem;
--face-limit-small: 50rem;
--face-bounce-max: 0.25rem;
}
* { box-sizing: border-box; }
body { background-color: var(--face-color-back-body);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
color: var(--face-color-fore-text);
margin: 0;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
-font-family: Tahoma, Verdana, "Bitstream Vera Sans", "DejaVu Sans", Geneva, Arial, sans-serif;
font-size: var(--face-font-size-text);
text-align: justify;
position: static;
padding: 0;
}
a { text-decoration: none; }
a:link { color: var(--face-color-link-reg); }
a:visited { color: var(--face-color-link-vis); }
a:hover { color: var(--face-color-link-hov);
text-decoration: underline;
}
a:active { color: var(--face-color-link-act); }
/****************************************************************************/
.base {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: var(--face-padding);
gap: var(--face-padding);
background-image: linear-gradient(to bottom,
var(--face-color-back-body),
var(--face-color-back-bottom));
}
/****************************************************************************/
.hrochnet { max-width: 50vw;
max-height: 6vh;
width: 20rem;
height: auto;
}
.amjo-p,
.amjo-l,
.gall,
.faces { display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: var(--face-padding);
}
.amjo-p-mask {
position: relative;
-mask-image: url('amjo-2.svg');
mask-image: url('data:image/svg+xml;utf8,');
mask-size: 100% 100%;
mask-mode: alpha;
}
.amjo-l-mask {
position: relative;
-mask-image: url('amjo-1.svg');
mask-image: url('data:image/svg+xml;utf8,');
mask-size: 100% 100%;
mask-mode: alpha;
}
.amjo-p-pic {
position: relative;
z-index: 1;
max-height: 30vh;
height: auto;
width: auto;
max-width: 95dvw;
}
.amjo-l-pic {
position: relative;
z-index: 1;
max-height: 15vh;
height: auto;
width: auto;
max-width: 95dvw;
}
.photo-pic {
position: relative;
z-index: 1;
max-height: 12vh;
height: auto;
width: auto;
max-width: 90dvw;
}
.photo,
.face { position: relative; }
.face-pic {
position: relative;
z-index: 1;
max-width: 20vw;
max-height: 15vh;
width: auto;
height: auto;
}
.amjo-p-pic:hover,
.amjo-l-pic:hover,
.photo-pic:hover,
.face-pic:hover {
animation: bobbing 3s linear 1;
}
.presents,
.also,
.ofby {
font-size: 2.5vmin;
}
sub,
sup { font-size: 0.6em; }
.bottomref {
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
height: 3rem;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: var(--face-padding);
}
.bottomlinx { display: block;
font-size: calc(0.5rem + 0.7vw);
}
/****************************************************************************/
@media screen and not (min-aspect-ratio: 12/10)
{
.wide-only { display: none; }
}
@media screen and (min-aspect-ratio: 12/10)
{
.narrow-only { display: none; }
.bottomlinx { font-size: 1.0rem; }
}
/****************************************************************************/
@keyframes bobbing
{
0.0% { transform: translateY(calc(var(--face-bounce-max) * +0.000)); }
2.5% { transform: translateY(calc(var(--face-bounce-max) * +0.624)); }
5.0% { transform: translateY(calc(var(--face-bounce-max) * +0.779)); }
7.5% { transform: translateY(calc(var(--face-bounce-max) * +0.486)); }
10.0% { transform: translateY(calc(var(--face-bounce-max) * +0.000)); }
12.5% { transform: translateY(calc(var(--face-bounce-max) * -0.378)); }
15.0% { transform: translateY(calc(var(--face-bounce-max) * -0.472)); }
17.5% { transform: translateY(calc(var(--face-bounce-max) * -0.295)); }
20.0% { transform: translateY(calc(var(--face-bounce-max) * -0.000)); }
22.5% { transform: translateY(calc(var(--face-bounce-max) * +0.230)); }
25.0% { transform: translateY(calc(var(--face-bounce-max) * +0.287)); }
27.5% { transform: translateY(calc(var(--face-bounce-max) * +0.179)); }
30.0% { transform: translateY(calc(var(--face-bounce-max) * -0.000)); }
32.5% { transform: translateY(calc(var(--face-bounce-max) * -0.139)); }
35.0% { transform: translateY(calc(var(--face-bounce-max) * -0.174)); }
37.5% { transform: translateY(calc(var(--face-bounce-max) * -0.108)); }
40.0% { transform: translateY(calc(var(--face-bounce-max) * -0.000)); }
42.5% { transform: translateY(calc(var(--face-bounce-max) * +0.084)); }
45.0% { transform: translateY(calc(var(--face-bounce-max) * +0.105)); }
47.5% { transform: translateY(calc(var(--face-bounce-max) * +0.066)); }
50.0% { transform: translateY(calc(var(--face-bounce-max) * +0.000)); }
52.5% { transform: translateY(calc(var(--face-bounce-max) * -0.051)); }
55.0% { transform: translateY(calc(var(--face-bounce-max) * -0.064)); }
57.5% { transform: translateY(calc(var(--face-bounce-max) * -0.040)); }
60.0% { transform: translateY(calc(var(--face-bounce-max) * +0.000)); }
62.5% { transform: translateY(calc(var(--face-bounce-max) * +0.031)); }
65.0% { transform: translateY(calc(var(--face-bounce-max) * +0.039)); }
67.5% { transform: translateY(calc(var(--face-bounce-max) * +0.024)); }
70.0% { transform: translateY(calc(var(--face-bounce-max) * -0.000)); }
72.5% { transform: translateY(calc(var(--face-bounce-max) * -0.019)); }
75.0% { transform: translateY(calc(var(--face-bounce-max) * -0.024)); }
77.5% { transform: translateY(calc(var(--face-bounce-max) * -0.015)); }
80.0% { transform: translateY(calc(var(--face-bounce-max) * -0.000)); }
82.5% { transform: translateY(calc(var(--face-bounce-max) * +0.011)); }
85.0% { transform: translateY(calc(var(--face-bounce-max) * +0.014)); }
87.5% { transform: translateY(calc(var(--face-bounce-max) * +0.009)); }
90.0% { transform: translateY(calc(var(--face-bounce-max) * +0.000)); }
92.5% { transform: translateY(calc(var(--face-bounce-max) * -0.007)); }
95.0% { transform: translateY(calc(var(--face-bounce-max) * -0.009)); }
97.5% { transform: translateY(calc(var(--face-bounce-max) * -0.005)); }
100.0% { transform: translateY(calc(var(--face-bounce-max) * -0.000)); }
}