/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
:root{
color-scheme: light dark;
--backgroundColor: light-dark(rgba(243 236 218 / 90%), rgba(16 18 27 / 90%));
--textColor: light-dark(rgba(0 0 0 / 90%), rgba(255 255 255 / 90%));
--borderColor: light-dark(rgba(0,0,0,0.25), rgba(255,255,255,0.25));
--backgroundScrollbar: light-dark(rgba(1 2 3 / 40%), rgba(255 253 253 / 57%));
--borderContrastColor: light-dark(rgba(0,0,0,0.5), rgba(255,255,255,0.5));
--backgroundCode: light-dark(rgba(0,0,0,0.125), rgba(255,255,255,0.1));
--borderInactive: light-dark(rgba(250 250 250 / 99%), rgba(243 243 243 / 5%));
--borderActive: light-dark(rgba(255 255 255 / 99%), rgba(243 243 243 / 40%));
--rgbOrange: 255, 153, 51;
--rgbBlue: 51, 153, 255;
--rgbPurple: 131, 83, 168;
--maxWidth: 1920px;
--cutOffMinNum: 380;
--cutOffMinFull: 380px;
--cutOffMaxNum: 1300;
--text-color: light-dark( rgba(0 0 0 / 90%), rgba(255 255 255 / 90%) );
--scrollbar-bg: light-dark( rgb(1 2 3 / 40%), rgb(255 253 253 / 57%) );
--theme-bg-color: light-dark( rgb(255 255 255 / 31%), rgba(32 48 64 / 90%) );
--card-bg-color: light-dark( rgb(255 255 255), rgb(64,64,64) );
}
:root {
&:has(input[name="rv3dayNight"]) {
color-scheme: light;
--svgTargetBlank: url('data:image/svg+xml,\
')
}
&:has(input[name="rv3dayNight"]:checked) {
color-scheme: dark;
--svgTargetBlank: url('data:image/svg+xml,\
')
}
}
*, *:before, *:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
min-height: 100%;
width: 100%;
}
body {
/* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
font-family: CoreSansDS25Light,sans-serif;
font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
background-color: var(--theme-bg-color);
text-align: center;
}
hr.fancy { border: 0; height: 1px; float:none; clear:both; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); margin:24px 0;}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
a {
position: relative !important;
color: rgba(255,153,51,0.9) !important;
text-decoration: none !important;
background-image: linear-gradient(to right, rgba(255,153,51,0.9) 50%, rgba(128,128,128,0.5) 50%);
background-size: 200% 2px;
background-repeat: no-repeat;
background-position: 100% 100%;
transition: background-position .4s;
}
a:hover{
background-position: 0 100%;
}
a[target=_blank]
{
background-image: var(--svgTargetBlank),
linear-gradient(to right, rgba(255,153,51,0.9) 50%, rgba(128,128,128,0.5) 50%);
padding-right: 2.5rem;
background-repeat: no-repeat;
background-position: right 0.5rem center, 100% 100%;
background-size: 1.6rem, 200% 1px;
display: inline-block;
line-height: 1.7;
}
a[target=_blank]:hover {
background-position: right 0.5rem center, 0 100% !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#rv3MMbar{
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;
position: sticky;
top: 0;
left: 0;
right: 0;
width: 100%;
padding: 0 6px;
display: flex;
align-items: center;
height: 44px;
background-color: rgba(37,38,40,.21);
background-image: radial-gradient(circle at 25%,hsla(0,0%,100%,.2),rgba(50,50,50,.2) 80%);
backdrop-filter: blur(4px);
z-index: 1000;
}
#rv3MMbar .logo{
background-image: url(/m/rv3.png);
background-repeat: no-repeat;
background-size: 34px auto;
background-position: center;
background-color: rgba(255,255,255,0.25);
width: 92px;
height: 34px;
border-radius: 4px;
cursor: pointer;
}
#rv3MMbar .mainTitle{
text-transform: capitalize;
font-weight: bold;
white-space: nowrap;
text-shadow: 1px 1px 1px light-dark(#fff, #000);
margin-left: 6px;
}
#rv3MMbar .toolbar{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
width: 100%;
}
#rv3MMbar .toolbar .btn{
text-align: center;
margin: 0 0.25rem;
border-radius: 6px;
/* border: 1px solid #ccc; */
padding: 0.1rem 0.25rem;
}
#rv3MMbar .toolbar .btn img,
#rv3MMbar .toolbar .btn svg{
width: 32px;
height: 32px;
vertical-align: middle;
}
#rv3MMbar .toolbar .btn:hover{
background-color: #F5F5F5;
background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#rv3dayNight{
--hue:223;
background-color: hsl(210,90%,70%);
box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0), 0.125em 0.125em 0.25em hsla(var(--hue),90%,10%,0.2);
/* background: linear-gradient(45deg, rgba(224,193,17,1) 0%,rgba(102,181,249,1) 100%); */
width: 64px;
height: 32px;
border-radius: 1rem;
display: inline-block;
user-select: none;
position: relative;
}
#rv3dayNight.night{}
#rv3dayNight input[type='checkbox']{
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
#rv3dayNight input[type='checkbox']:after{
content:"";
position: absolute;
top: 2px;
left: 2px;
width: 28px;
height: 28px;
border-radius: 28px;
background-color: #fff;
transition: left 0.4s ease-in-out;
}
#rv3dayNight input[type='checkbox']:before{
background: linear-gradient(45deg, rgba(224,193,17,1) 0%,rgba(102,181,249,1) 100%);
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 28px;
}
#rv3dayNight input[type='checkbox']:checked:after{
left: 34px;
}
#rv3dayNight input[type='checkbox']:checked:before{
background: linear-gradient(135deg, rgba(32,64,192,1) 0%,rgba(152,64,192,1) 100%);
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 28px;
}
.svgIcon{
position: absolute;
left: 40px;
top: 7px;
width: 18px;
height: 18px;
}
.svgIcon.dark{
left: 4px;
}
.btnSVG{
display: inline-block;
width: 32px;
height: 32px;
margin: 4px;
border-radius: 16px;
vertical-align: middle;
background-color: #52a8e8;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #52a8e8), color-stop(100%, #377ad0));
background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0);
background-image: -moz-linear-gradient(top, #52a8e8, #377ad0);
background-image: -ms-linear-gradient(top, #52a8e8, #377ad0);
background-image: -o-linear-gradient(top, #52a8e8, #377ad0);
background-image: linear-gradient(top, #52a8e8, #377ad0);
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
color: #fff;
}
.btnSVG svg{fill: #ffffff;}
.btnSVG:hover{
background-color: #3e9ee5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9ee5), color-stop(100%, #206bcb));
background-image: -webkit-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: -ms-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: -o-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
box-shadow: inset 0 1px 0 0 #62b1e9;
cursor: pointer;
}
.btnSVG.transparent{
background-color: unset !important;
background-image: unset !important;
box-shadow: inset 0 1px 0 0 #ddd, 0 1px 2px 0 #ccc;
}
.btnSVG.transparent:hover{
background-color: rgba(255,255,255,1) !important;
background-image: unset !important;
}
.btnSVG.transparent svg{fill: light-dark( rgba(0,0,0,0.5), rgba(255,255,255,0.7)) ;}
.btnSVG.transparent:hover svg{fill: rgba(0,0,0,0.9);}
.btnInline {
background-color: #52a8e8;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #52a8e8), color-stop(100%, #377ad0));
background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0);
background-image: -moz-linear-gradient(top, #52a8e8, #377ad0);
background-image: -ms-linear-gradient(top, #52a8e8, #377ad0);
background-image: -o-linear-gradient(top, #52a8e8, #377ad0);
background-image: linear-gradient(top, #52a8e8, #377ad0);
border-top: 1px solid #4081af;
border-right: 1px solid #2e69a3;
border-bottom: 1px solid #20559a;
border-left: 1px solid #2e69a3;
border-radius: 4px;-webkit-border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
color: #fff;
padding: 4px 16px;
text-align: center;
text-shadow: 0 -1px 1px #3275bc;
-webkit-background-clip: padding-box;
margin: 4px;
font-size:1em;
}
.btnInline.chat{
font-size: calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
padding: 8px 32px;
}
.btnInline.glyph{
border-radius: 50%;-webkit-border-radius: 50%;
height: 32px;
line-height: 1;
font-size:24px;
padding: 0;
text-align: center;
width: 32px;
vertical-align: middle;
}
.btnInline:hover {
background-color: #3e9ee5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9ee5), color-stop(100%, #206bcb));
background-image: -webkit-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: -ms-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: -o-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
border-top: 1px solid #2a73a6;
border-right: 1px solid #165899;
border-bottom: 1px solid #07428f;
border-left: 1px solid #165899;
-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
box-shadow: inset 0 1px 0 0 #62b1e9;
cursor: pointer;
text-shadow: 0 -1px 1px #1d62ab;
}
.btnInline:active,
.btnInline.active {
background: #3282d3;
border: 1px solid #154c8c;
border-bottom: 1px solid #0e408e;
-webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
text-shadow: 0 -1px 1px #2361a4;
-webkit-background-clip: padding-box;
}
.btnInline[disabled],
.btnInline[disabled]:hover,
.btnInline[disabled]:active,
.redBtn[disabled],
.redBtn[disabled]:hover,
.redBtn[disabled]:active {
background-color: #dadada;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dadada), color-stop(100%, #f3f3f3));
background-image: -webkit-linear-gradient(top, #dadada, #f3f3f3);
background-image: -moz-linear-gradient(top, #dadada, #f3f3f3);
background-image: -ms-linear-gradient(top, #dadada, #f3f3f3);
background-image: -o-linear-gradient(top, #dadada, #f3f3f3);
background-image: linear-gradient(top, #dadada, #f3f3f3);
border-top: 1px solid #c5c5c5;
border-right: 1px solid #cecece;
border-bottom: 1px solid #d9d9d9;
border-left: 1px solid #cecece;
-webkit-box-shadow: none;
box-shadow: none;
color: #8f8f8f;
cursor: not-allowed;
text-shadow: 0 -1px 1px #ebebeb;
}
.btnInline::-moz-focus-inner {
border: 0;
padding: 0; }
.btnInline .glyph {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.btnInline .glyph.info {
background-image:url('media/btn-info.png');
}
.btnInline .glyph.back {
background-image:url('media/btn-back.png');
}
.btnInline:hover .glyph.info{
background-image:url('media/btn-info-hover.png');
}
.btnInline svg{fill: #ffffff;}
.btnInline.orange{
background: rgb(232,168,82);
background: -moz-linear-gradient(top, rgba(232,168,82,1) 0%, rgba(208,122,55,1) 100%);
background: -webkit-linear-gradient(top, rgba(232,168,82,1) 0%,rgba(208,122,55,1) 100%);
background: linear-gradient(to bottom, rgba(232,168,82,1) 0%,rgba(208,122,55,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8a852', endColorstr='#d07a37',GradientType=0 );
border-top: 1px solid rgb(175,129,64);
border-right: 1px solid rgb(163,105,46);
border-bottom: 1px solid rgb(154,85,32);
border-left: 1px solid rgb(163,105,46);
box-shadow: inset 0 1px 0 0 rgb(235,185,114), 0 1px 2px 0 #b3b3b3;
}
.btnInline.orange:hover{
background: rgb(229,158,62);
background: -moz-linear-gradient(top, rgba(229,158,62,1) 0%, rgba(203,107,32,1) 100%);
background: -webkit-linear-gradient(top, rgba(229,158,62,1) 0%,rgba(203,107,32,1) 100%);
background: linear-gradient(to bottom, rgba(229,158,62,1) 0%,rgba(203,107,32,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e59e3e', endColorstr='#cb6b20',GradientType=0 );
}
.btnInline.orange:active,
.btnInline.orange.active {
background: rgb(140,76,21);
border: 1px solid rgb(140,76,21);
border-bottom: 1px solid rgb(142,64,14);
-webkit-box-shadow: inset 0 0 6px 3px rgba(181,87,22,1), 0 1px 0 0 white;
box-shadow: inset 0 0 6px 3px rgba(181,87,22,1), 0 1px 0 0 white;
text-shadow: 0 -1px 1px rgb(164,97,35);
}
#rv3privacy{
position: fixed;
background-color: var(--card-bg-color);
border-radius: 4px;
display: none;
grid-template-columns: 48px 9fr 32px;
grid-gap: 8px;
align-items: center;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
min-width: 280px;
top:4rem;
left: 8px;
padding: 0 0.5vmax;
text-align: left;
}
#rv3privacy.signalIt{
display: grid;
}
#rv3privacy .icon{
position: relative;
width:48px;
height:48px;
box-shadow: inset 0 0 2rem #fff;
border-radius: 1rem;
}
#rv3privacy .icon img{
opacity:0;
position: absolute;
top:0;
left:0;
width:48px;
height:48px;
animation: imageAnimation 15s linear infinite 0s;
}
#rv3privacy .icon img:nth-child(1){
}
#rv3privacy .icon img:nth-child(2){
animation-delay: 5s;
}
#rv3privacy .icon img:nth-child(3){
animation-delay: 10s;
}
@keyframes imageAnimation { 0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#rv3privacy p{padding: 1vmax;border-left: 1px solid #ccc;}
#rv3blueprint{
background-image:url("media/grid.png"), radial-gradient(ellipse at center, hsl(230,100%,80%) 0%,hsl(230,100%,60%) 100%);
text-align:center;
display: block;
position: fixed;
top: 40%;
right:50%;
bottom:50%;
left:50%;
width:0;
height:0;
overflow:hidden;
transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
}
#rv3blueprint.active{
top:0%;
right:0%;
bottom:0%;
left: 0%;
width:100%;
height: 100%;
overflow-x: hidden;
overflow-y:auto;
transition: all 0.6s ease-in;
-webkit-transition: all 0.6s ease-in;
}
#rv3blueprint.done{
background-color: rgb(51,153,255);
background-image: radial-gradient(rgba(0,0,255,0.05), rgba(0,0,0,0.025) 25px, rgba(0,0,0,0.2) 26px, transparent 26px),
radial-gradient(transparent 25px, rgba(176,196,222,0.4) 25px, rgba(176,196,222,0.4) 26px, transparent 26px),
radial-gradient(transparent 50px, rgba(176,196,222,0.25) 50px, rgba(176,196,222,0.25) 51px, transparent 51px),
radial-gradient(rgba(176,196,222,0.5), rgba(176,196,222,0) 50px),
radial-gradient(transparent 25px, rgba(135,206,250,0.35) 25px, rgba(135,206,250,0.35) 26px, transparent 26px) !important;
background-size: 200px 200px;
background-position: -75px -45px, 0 0, 20px 50px, 25px 55px, 50px 125px;
width: 300px;
height: 200px;
border-radius: 1rem;
padding: 1rem;
margin: -150px;
color: rgba(255,255,255,0.9);
text-shadow: 1px 1px 3px #333;
}
#rv3blueprint.done p{
position: absolute;
bottom: 1rem;
text-align: left;
width: calc(100% - 2rem);
}
#rv3blueprint.done p span.ctrl{
display: block;
text-align: right;
}
.vookie{
position:relative;
top: 50%;
transform: translateY(-50%);
transition:all 0.2s ease;
background-color: rgba(0,0,0,0.15);
padding: 3rem 0;
}
.vookie.final{
background-color: unset;
padding: 0;
}
.vookie .text{
/* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
font-size: calc(18px + (32 - 18) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
text-shadow:
1px 1px 0 #000
,
/*
-1px -1px 0 #000
,
*/
0 0 5px #000
;
color: rgba(255,255,255,0.9);
}
.typer {
margin: 0;
/* font-family: "Courier New"; */
white-space: pre-wrap;
opacity: 0;
/* font-size: 2vmax; */
}
.typer.active{
opacity: 1;
}
.typer.active:after {
content: '▒';
color: #f93;
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
.typer.active.done:after {
content: "";
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.closeIt{
display: block;
position: absolute;
left: 8px;
top: calc(4rem - 8px);
height: 32px;
width: 32px;
color: rgba(0,0,0,0.5);
font-size: 32px;
font-family: monotype;
background-color: rgba(255,255,255,0.5);
border-radius: 50%;
line-height: 32px;
transition: all 0.6s ease-out;
}
.closeIt:after {
content: "×";
color: #f00;
}
.closeIt:hover{
cursor: pointer;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,0.9);
transition: all 0.2s ease-in;
}
.thankYou{
background-color: rgb(51,153,255);
background-image: radial-gradient(rgba(0,0,255,0.05), rgba(0,0,0,0.025) 25px, rgba(0,0,0,0.2) 26px, transparent 26px),
radial-gradient(transparent 25px, rgba(176,196,222,0.4) 25px, rgba(176,196,222,0.4) 26px, transparent 26px),
radial-gradient(transparent 50px, rgba(176,196,222,0.25) 50px, rgba(176,196,222,0.25) 51px, transparent 51px),
radial-gradient(rgba(176,196,222,0.5), rgba(176,196,222,0) 50px),
radial-gradient(transparent 25px, rgba(135,206,250,0.35) 25px, rgba(135,206,250,0.35) 26px, transparent 26px);
background-size: 200px 200px;
background-position: -75px -45px, 0 0, 20px 50px, 25px 55px, 50px 125px;
position: relative;
width: 300px;
height: 170px;
border-radius: 1rem;
padding: 1rem;
color: rgba(255,255,255,0.9);
text-shadow: 1px 1px 3px #333;
}
.thankYou p{
position: absolute;
bottom: 1rem;
text-align: left;
}