:root {
--acceptBgColor: linear-gradient(to left bottom, rgba(0,128,0,0.8), rgba(0,128,0,0.1));
--activeView: -10;
--adjust: 100%;
--alertBgColor: var(--lightRed);
--alertColor: var(--lightRed);
--alertRed: #cc0000;
--alertTop: 3em;
--AnswerBoxBg: var(--lightRed);
--animiImage: var(--imageVirus);
--animiStartPosX: 0;
--animiStartPosY: 0;
--animiStartPosZ: 0;
--animiStartPerspective: 150px;
--animiStopPosX: 0;
--animiStopPosY: 0;
--animiStopPosZ: 0;
--animiStopPerspective: 7000px;
--animiTransformStyle: preserve-3d;
--appearance: none;
--aspectRatio: 16 / 9;
--aspectRatioLT: 16 / 6.7467;
--aspectRatioCircle: 1 / 1;
--aspectRatioQuad: 1 / 1;
--autoHeight: auto;
--autoTop: auto;
--bgBlur: blur(2.5px);
--bgLight: rgba(238,238,238,0.75);
--bgGradientDark: linear-gradient(to bottom, rgba(16,96,0,0.8), rgba(16,96,0,0.7), rgba(16,96,0,0));
--bgGradientDiagDark: linear-gradient(to top right, rgba(16,96,0,0.8), rgba(16,96,0,0.7), rgba(16,96,0,0));
--bgGradientDiagLight: linear-gradient(to bottom left, rgba(32,128,0,0.8), rgba(32,128,0,0.1));
--bgGradientDiagLightActive: linear-gradient(to top right, rgba(32,128,0,0.8), rgba(32,128,0,0.1));
--bgGradientLight: linear-gradient(to right, rgba(32,128,0,0.8), rgba(32,128,0,0.1));
--bgGradientLightActive: linear-gradient(to top, rgba(32,128,0,0.8), rgba(32,128,0,0.1));
--bgModal: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.3), rgba(0,0,0,1) );
--bgPosFixed: fixed;
--bgTransparent: transparent;
--bgRepeate: no-repeat;
--bibleTextTransition: 0.75s;
--bibleTextDisplay: block;
--bibleTextHidden: none;
--bibleTextImageDisplay: inline-block;
--bibleImageShadow: 0.1em 0.1em 0.125em rgb(0 0 0 / 50%), 0 0 0.05em rgba(0, 0, 0, 0.25);
--blackColor: #000000;
--bookTextColor: #201000;
--bookBGColor: #ffeed8;
--blackGradient: radial-gradient(rgba(0,0,0,.3), rgba(0,0,0,1));
--blackTrans: rgba(0,0,0,0.8);
--blackTransLght: rgba(0,0,0,0.5);
--blockBgColor: linear-gradient(to bottom left, rgba(224,224,0,0.8), rgba(224,224,0,0.1));
--drkClouds: #03060b;
--drkCloudsTrand: rgba(3,6,11,0.15);
--drkCloudGrad: linear-gradient(to bottom, transparent, rgba(3,6,11,0.15), rgba(3,6,11,0.15), rgba(3,6,11,0.15), rgba(3,6,11,0.15), rgba(3,6,11,0.15), rgba(3,6,11,0.15), rgba(3,6,11,0.15), rgba(3,6,11,0.15) , transparent);
--blueGradient: radial-gradient(rgba(47, 121,160,.3), rgba(47, 121,160,1));
--blueGradient2: radial-gradient(rgba(94,149,183,.3), rgba(94,149,183,1));
--blueGradient3: linear-gradient(0deg, transparent, transparent, transparent, rgba(47,121,160,1));
--blueTransparent: rgba(47, 121,160, 0.75);
--blueGradientRight: linear-gradient(to right, rgba(17,17,17,.9), var(--colorBlueMid));
--blueGradientTitle: linear-gradient(to right, rgba(17,17,17,.9), var(--colorBlueMid2));
--blueGradientLeft: linear-gradient(to left, var(--colorBlueTrans), var(--colorBlue));
--blueGradientPlayButton: radial-gradient(rgba(17,17,17,.9), var(--colorBlueMid));
--blueGradientPlaySelectButton: radial-gradient(var(--colorBlueMid), rgba(17,17,17,.9));
--blueGradientPauseButton: radial-gradient(rgba(47, 121,160,.3), rgba(47, 121,160,1), rgba(47, 121,160,.3), rgba(47, 121,160,.3));
--blueGradientPauseSelectButton: radial-gradient(rgba(47, 121,160,1), rgba(47, 121,160,.3), rgba(47, 121,160,1), rgba(47, 121,160,1));
--blueScrollPic: rgba(94,149,183,.4);
--blueScrollPic2: rgba(94,149,183,.04);
--bookBGImage: linear-gradient(to right,rgba(135,100,0,1), rgba(135,100,0,0.1), rgba(135,100,0,0.1), rgba(135,100,0,0.1), rgba(135,100,0,0.1), rgba(135,100,0,1));
--bookFont: var(--fontBook);
--borderDark: 1px solid #000000;
--borderColorDark: rgba(81,81,81,0.6);
--borderColorDark: var(--buttonBorderColorDark);
--borderColorLight: var(--colorLgtGrey);
--borderColorMiddle: rgba(128,128,128,0.6);
--borderColorMiddle: var(--buttonBorderColorMiddle);
--borderDark: 0.75px solid rgba(81,81,81,0.6);
--borderLght: 0.7vmin solid var(--colorLgtGrey);
--borderLghtSmall: 0.5vmin solid var(--colorLgtGrey);
--borderLoader: 2px solid rgb(32,128,0);
--borderLoader2: 7px solid #aaaaaa;
--borderLoaderRadius: 50%;
--borderLoaderTop: 7px solid rgb(32,128,0);
--borderMiddle: 0.75px solid rgba(128,128,128,0.6);
--borderNone: 1px solid #44cc00;
--borderRadius: 5px;
--borderRadiusNone: 0;
--borderRadiusNormal: 7px;
--borderRadiusSmall: 3px;
--borderRadiusTouch: 15px;
--borderSelect: 1px solid #cccccc;
--borderTerminal: 2px solid rgba(68,204,0,0.5);
--boxBg: rgba(128,128,128,0.6);
--boxBgDrk: rgba(48,48,48,0.85);
--boxBgDrkGreen: rgba(0,48,0,0.85);
--boxBgImage: linear-gradient(to bottom left, rgba(128,128,128,0.8), rgba(128,128,128,0.1));
--boxBgLgtDrk: rgba(81,81,81,0.6);
--boxBgLight: rgba(204,204,204,0.85);
--boxBgLightGreen: rgba(0,204,0,0.6);
--boxBgMidGreen: rgba(68,136,68,0.85);
--boxBGView: 49;
--boxHighLightBorder: rgba(0,224,0,0.9)!important;
--boxHighLightBorder: rgba(82,236,168,0.9)!important;
--boxHighLightShadow: inset 0 1px 3px rgb(0 0 0 / 10%), 0 0 8px rgb(0 224 0 / 60%);
--boxPadding: 1em 1.5em;
--boxShadow: 0.25em 0.25em 0.5em var(--blackTrans);
--boxShadow: 0.2em 0.2em 0.5em rgba(0,0,0,0.7), 0 0 0.05em #000000;
--boxShadow2: -0.5em 0.95em 0.5em rgba(0, 0, 0, 0.6);
--boxSizeingNorm: content-box;
--boxSizeingBorder: border-box;
--boxView: 50;
--bsLogoHeight: 51;
--buttonBorderColorDark: rgba(81,81,81,0.6);
--buttonBorderColorMiddle: rgba(128,128,128,0.6);
--buttonBorderDark: 0.75px solid rgba(81,81,81,0.6);
--buttonBorderMiddle: 0.75px solid rgba(128,128,128,0.6);
--buttonBorderMiddle: 0.75px solid rgba(128,128,128,0.6);
--buttonBoxHeight: 2.1vw;
--buttonColorNorm: rgba(0,0,0,0.35);
--buttonColorSelect: rgba(224,0,0,0.75);
--buttonColorDark: var(--fontDark);
--buttonColorLight: var(--fontLight);
--buttonColorStd: rgba(000,113,000,0.75);
--buttonHeight: 16px;
--buttonFloat: right;
--buttonHeightTouch: 60px;
--buttonTop: -.05em;
--buttonRight: 0em;
--buttonPadding: 0 0em 0.25em 0.5em;
--buttonCursor: pointer;
--calcBGMinHeight: 75vh;
--calcBGMinWidth: 75vw;
--calcBGMaxHeight: 100vh;
--calcBGMaxWidth: 100vw;
--calcBGHeight: 100vh;
--calcBGWidth: 100vw;
--calcBG_Height: calc(var(--calcBGMaxHeight) * var(--setCalcFactor));
--calcBG_Width: calc(var(--calcBGMaxWidth) * var(--setCalcFactor));
--calcBGTop: 0px;
--calcBGLeft: 0px;
--calcHeaderMinHeight: calc( var(--fontSizeEm) * 4);
--calcHeaderMaxHeight: calc( var(--fontSizeEm) * 9.5);
--calcHeaderHeight: calc( var(--fontSizeEm) * 9.5);
--calcHeaderCollapseHeight: 0px;
--calcFooterHeight: 1.5em;
--calcFooterTop: calc(100vh - 1.5em);
--calcFooterBottom: 0em;
--calcMainTop: calc( var(--calcBGTop) + var(--calcHeaderHeight) );
--calcMainWidth: 100vw;
--calcMainHeight: auto;
--calcVisibelWindowHeight: calc( var(--calcBGHeight) - (var(--calcHeaderHeight) + var(--calcFooterHeight) ) );
--calcContentMinWidth: calc( var(--calcBGWidth) * 0.75);
--calcContentMinHeight: calc( var(--calcVisibelWindowHeight) * 0.75);
--calcContentMaxWidth: var(--calcBGWidth);
--calcContentMaxHeight: var(--calcVisibelWindowHeight);
--calcContentWidth: calc(var(--calcContentMaxWidth) * var(--setCalcFactor));
--calcContentHeight: calc(var(--calcContentMaxHeight) * var(--setCalcFactor));
--calcInfoHeight: var(--infoMaxHeight);
--calcInfoWidth: var(--infoMaxWidth);
--calcScrollScreenTop: 0px;
--calcScrollHeaderBottom: calc( var(--calcScrollScreenTop) + var(--calcHeaderHeight) );
--calcScrollMainTop: calc( var(--calcScrollScreenTop) + var(--calcHeaderHeight) );
--calcScrollMainBottom: calc( var(--calcScrollScreenTop) + var(--calcVisibelWindowHeight) );
--calcScrollVisibelWindowTop: calc( var(--calcScrollScreenTop) + var(--calcHeaderHeight) );
--calcScrollVisibelWindowBottom: calc( var(--calcScrollScreenTop) + var(--calcVisibelWindowHeight) );
--calcSlideContainerMinWidth: calc( var(--calcBGWidth) * 0.75);
--calcSlideContainerMinHeight: calc( var(--calcBGWidth) * 0.5625 * 0.75);
--calcSlideContainerMaxWidth: var(--calcBGWidth);
--calcSlideContainerMaxHeight: calc( var(--calcBGWidth) * 0.5625);
--calcSlideContainerHeight: calc( var(--calcSlideContainerMaxHeight) * var(--setCalcFactor) );
--calcSlideContainerWidth: calc( var(--calcSlideContainerMaxWidth) * var(--setCalcFactor) );
--calcSlideMinWidth: calc( var(--calcBGWidth) * 0.75 - 1.4vmin);
--calcSlideMinHeight: calc( var(--calcBGWidth) * 0.5625 * 0.75 - 1.4vmin);
--calcSlideMaxWidth: calc( var(--calcBGWidth) - 1.4vmin);
--calcSlideMaxHeight: calc( var(--calcBGWidth) * 0.5625 - 1.4vmin);
--calcSlideHeight: calc( var(--calcSlideContainerMaxHeight) * var(--setCalcFactor) - 1.4vmin);
--calcSlideWidth: calc( var(--calcSlideContainerMaxWidth) * var(--setCalcFactor) - 1.4vmin);
--calcDotBottom: calc(var(--showPreview) * var(--calcSlideHeight) * 0 + var(--calcLogoHeight) );
--calcLogoBottom: calc(0px - 0.325vmin) !important;
--calcLogoleft: calc(var(--calcLogoWidth) * 0.5 - var(--calcLogoWidth) * .5 - 0.325vmin);
--calcLogoMinWidth: calc( var(--logoWidth) * 0.75);
--calcLogoMinHeight: calc( var(--logoHeight) * 0.75);
--calcLogoMaxWidth: var(--logoWidth);
--calcLogoMaxHeight: var(--logoHeight);
--calcLogoWidth: calc(var(--logoWidth) * var(--setCalcFactor));
--calcLogoHeight: calc(var(--logoHeight) * var(--setCalcFactor));
/* --calcTitleBottom: calc( var(--showPreview) * var(--calcSlideHeight) + var(--calcLogoHeight) + 0.7vmin); */
--calcTitleBottom: calc( var(--showPreview) * var(--calcSlideHeight) + var(--calcLogoHeight) * 1.25 + 0.7vmin);
--calcTitleMinWidth: calc( var(--titleWidth) * 0.75);
--calcTitleMinHeight: calc( var(--titleHeight) * 0.75);
--calcTitleMaxWidth: var(--titleWidth);
--calcTitleMaxHeight: var(--titleHeight);
/* --calcTitleWidth: calc(var(--titleWidth) * var(--setCalcFactor)); */
--calcTitleWidth: var(--calcSlideWidth);
--calcTitleHeight: calc(var(--titleHeight) * var(--setCalcFactor));
/* --calcPlayBottom: calc( var(--showPreview) * var(--calcSlideHeight)); */
--calcPlayBottom: calc(var(--showPreview) * var(--calcSlideHeight) + var(--calcSlideHeight) * .5 + 62px );
--setCalcMinFactor: 0.75;
--setCalcMaxFactor: 1;
--setCalcFactor: var(--setCalcMinFactor);
--setCalcPlayTop: 1.5;
--canLeft: 60%;
--canSize: 30em;
--centerMargin: auto;
--centerPos: 50%;
--colorBlueTrans: rgba(47, 121,160,.3);
--colorBlue: rgba(47, 121,160,1);
--colorBlueMid: rgba(94,149,183,0.8);
--colorBlueMid2: rgba(94,149,183,1);
--colorBlueDrk: rgba(7, 81,120,1);
--colorBlueLgth: rgba(107, 181,220,1);
--colorDrkGrey: rgba(17,17,17,0.75);
--colorDrkGreyTrans: rgba(17,17,17,0.25);
--colorLgtGrey: #dddddd;
--colorXLgtGrey: #eeeeee;
--configHeight: var(--menuHeight);
--configLableMax: var(--popupMaxWidth);
--configLableMin: var(--popupMinWidth);
--configMax: 40em;
--configMin: 6em;
--cursorHand: pointer;
--cursorWait: wait;
--containerBibleTextWidth: 80vw;
--default: 0em;
--defaultValue: unset;
--devColor: #ff0000;
--devColorTrans: rgba(255,0,0,0.25);
--devColor1: #880000;
--devColor1Trans: rgba(128,0,0,0.25);
--devColor2: #008800;
--devColor2Trans: rgba(0,128,0,0.25);
--devColor3: #00ff00;
--devColor3Trans: rgba(0,255,0,0.25);
--devColor4: #000088;
--devColor4Trans: rgba(0,0,128,0.25);
--devColor5: #0000ff;
--devColor5Trans: rgba(0,0,255,0.25);
--devColor6: #888800;
--devColor6Trans: rgba(128,128,0,0.25);
--devColor7: #ffff00;
--devColor7Trans: rgba(255,255,0,0.25);
--devColorBG: #AA00AA;
--devColorBGTrans: rgba(172,0,172,0.25);
--devColorOverL: #AAAAAA;
--devColorOverLTrans: rgba(172,172,172,0.25);
--displayNone: none;
--displayBlock: block;
--displayInlineBlock: inline-block;
--displayInline: inline;
--displayInlineFlex: inline-flex;
--displayBlock: block;
--displayFlex: flex;
--drk-bg: #000000;
--drkGreen: #004400;
--blueGradient: radial-gradient(rgba(47, 121,160,.3), rgba(47, 121,160,1));
--blueGradient2: radial-gradient(rgba(94,149,183,.3), rgba(94,149,183,1));
--blueTransparent: rgba(47, 121,160, 0.75);
--dropBgColor: linear-gradient(to bottom left, rgba(224,0,0,0.8), rgba(224,0,0,0.1));
--dropShadow: var(--boxShadow);
--factorHDVideo: 56.25;
--factorHDVideoVW: var(--factorHDVideo) + 'vw';
--factorLetterBoxSmallVideo: 37.5;
--factorLetterBoxSmallVideoVW: var(--factorLetterBoxSmallVideo) + 'vw';
--factorLetterBoxVideo: 48.92;
--factorLetterBoxVideoVW: var(--factorLetterBoxVideo) + 'vw';
--fillHeadHeight: var(--lineBoxHeadHeight);
--flowLeft: left;
--flowRight: right;
--focusShadow: 0 0 0.15em var(--colorBlueMid);
--footerHeight: calc(var(--fontSizeEm) * 2);
--fontActiveShadow: var(--fontShadow);
--fontBigShadow: -0.25em 0.425em 0.25em rgba(0, 0, 0, 0.6);
--fontBold: bold;
--fontDark: #222222;
--fontLight: #cccccc;
--fontNormal: normal;
--fontSelectShadow: -0.125em 0.2125em 0.125em rgba(224, 224, 224, 0.6);
--fontShadow: 0.2em 0.2em 0.5em rgb(0 0 0 / 75%), 0 0 0.2em #000000;
--fontSize: 10pt;
--fontSizeEm: 10pt;
--fontSizeButton: var(--fontSizeSmall);
--fontSizeHead: var(--fontSizeNorm);
--fontSizeHead1: 1.85em;
--fontSizeHead2: 1.575em;
--fontSizeHead3: 1.3em;
--fontSizeHelp: var(--fontSizeXXSmall);
--fontSizeIfBox: var(--fontSizeXSmall);
--fontSizeIfBoxHead: var(--fontSizeSmall);
--fontSizeOverlay: 1.3em;
--fontSizeLabel: var(--fontSizeXSmall);
--fontSizeMenu: var(--fontSizeSmall);
--fontSizeMobile: 1.25em;
--fontSizeNorm: 1.1em;
--fontSizeSmall: 0.8em;
--fontSizeTable: var(--fontSizeXSmall);
--fontSizeXSmall: 0.7em;
--fontSizeXXSmall: 0.6em;
--fontWeight: 650;
--fontTerminal: var(--mainColor);
--fontXDrk: var(--drk-bg);
--fontXLight: var(--lightColor);
--fontBook: "Times New Roman", Times, serif;
--footerHeight: 1.5em;
--footerBGColor: linear-gradient(to left,rgba(17,17,17,.9), var(--colorBlueMid));
--forwardBgColor: linear-gradient(to left bottom, rgba(0,255,0,0.8), rgba(0,255,0,0.1));
--fwStateDynWidth: 260px;
--gray: #444444;
--halfTransparent: 0.8;
--headerBgColor: rgba(0,0,0,0.8);
--headerBGImage: var(--imageCMovie), var(--blueGradientRight);
--headerBGImageSmall: var(--blueGradientRight);
--headerBGSize: 10%, auto;
--headerBGSizeSmall: auto;
--headerBGPosX: 7%, 0px;
--headerBGPosXBig: 10%, 0px;
--headerBGPosY: 55%, 0px;
--headerBGPosXSmall: 0px;
--headerBGPosYSmall: 0px;
--headerBoxHeight: var(--lineBoxHeadHeight);
--headerBoxItem: var(--lineBoxHeadHeight);
--headerH1: "Willkommen bei C`Movie dem Hoffnungsportal";
--headerH1Small: "C`Movie das Hoffnungsportal";
--headerH1XSmall: "C`Movie gibt Hoffnung";
--headerH1XXSmall: "C`Movie\ngibt Hoffnung";
--headerH3: "Der Gegenpol zu Chaos und Panik seitens der Medien und Politik";
--headerH3Small: "Der Gegenpol zu Chaos und Panik";
--headerH3XSmall: "Stoppe Chaos und Panik";
--headerHeight: var(--lineHeadHeight);
--headerHeight: calc(var(--fontSizeEm) * 9.5);
--headerHeightLarge: calc(var(--fontSizeEm) * 9.5);
--headerHeightSmall: calc(var(--fontSizeEm) * 4.5);
--headerItem: var(--lineHeadHeight);
--headerAlign: center;
--headerTop: -1em;
--headerTopH3: -0.4em;
--headerLineHeight: 1.2;
--headFont: var(--mainFont);
--heightTerm: 31em;
--hidden: none;
--hoverView: 10;
--hyphens: auto;
--imageVirus: url('../virus.png');
--imageWar: url('../_500.jpg');
--imageWar: url('../_500.jpg');
--imageWar_o: url('../_500.jpg');
--imageWarMask2: url('../_500.png');
--imageWarMask: url('../_500.png');
--imageWarSky: url('../_500.png');
--imageForeMask: url('../_500.png');
--imageSky: url('../_500.jpg');
--imageSky: url('../_500.jpg');
--imageCoins: url('../Münzen.png');
--imagePlay: url('../_500.png');
--imagePause: url('../_500.png');
--imageCMovie: url('../CMovie.svg');
--imageCMovieLogo: url('../CMovie.svg');
--imageBibleServer: url('../_500.png');
--imageFlameMask: url('../_500.png');
--imageFlameMask: url('../_500.png');
--imageDustMask: url('../_500.png');
--imageDustMask: url('../_500.png');
--imageDustMask2: url('');
--imageDustMask2: url('');
--imageRubbleMask: url('');
--imageRubbleMask: url('');
--imageMiddleMask: url('');
--imageYTDefaultImg: 'maxresdefault.jpg';
--imageYouTube: url('');
--imageInstagram: url('');
--imagePinterest: url('');
--imageTor: url('');
--imageGit: url('');
--imageTumblr: url('');
--imageTwitter: url('');
--imageFacebook: url('');
--imageTikTok: url('');
--imageSnapchat: url('');
--imageRumble: url('');
--imageTelegram: url('');
--imageDLive: url('');
--imageOdysee: url('');
--imageTwitch: url('');
--imageVimeo: url('');
--imageFlickr: url('');
--imageInvidious: url('');
--inlineVisible: inline-block;
--inpBoxWidth: 210px;
--inpFill-bg: var(--lightGray);
--inpFocus-bg: #ffffcc;
--inpHeight: var(--mainTextHeight);
--inpMarginTop: 0.75em;
--inpPadding: 0.25em 0.5em;
--inpTxt: #0000aa;
--inputShadow: inset 1px 1px 3px rgba(0,0,0,0.4);
--infoBG: var(--bgLight);
--infoPosLeft: calc(50% - 225px);
--infoPosTop: 10em;
--infoMargin: auto;
--infoWidth: 90vw;
--infoMaxWidth: 450px;
--infoMaxHeight: 80vh;
--infoTextShadow: var(--textNoShadow);
--infoPadding: 0.5em 0.5em;
--infoFont: Arial, sans-serif;
--infoTextWidth: auto;
--infoImageHeight: 1em;
--infoFontButtonHeight: 1em;
--inpWidth: 92%;
--lastScrollY: 0;
--lastScrollX: 0;
--layer2View: 20;
--layer3View: 30;
--leftTerm: 16em;
--light-bg: #cccccc;
--lightColor: #ffffff;
--lightGray: #aaaaaa;
--lightgreen: rgb(32,128,0);
--lightRed: rgba(196,0,0,0.6);
--lightRed: rgba(224,0,0,0.75);
--lineBoxHeadHeight: 3.92vw;
--lineBoxHeight: 2.1vw;
--lineBoxInputHeight: var(--buttonBoxHeight);
--lineHeadHeight: 2.8em;
--lineHeight: 1.5em;
--lineInputHeight: var(--buttonHeight);
--loaderAnimation: spin 2s linear infinite;
--loaderPadding: 30px;
--loaderSize: 1.5em;
--loaderStartAnimation: rotate(0deg);
--loaderStopAnimation: rotate(360deg);
--logoWidth: 16.3vw;
--logoHeight: 8.645833vw;
--logoPosTop: calc(100vh - var(--logoHeight) - 16px) !important;
--logoPosBottom: calc(var(--calcLogoHeight) + 4em) !important;
--logoPosPortraiTop: calc(var(--factorHDVideoVW) - var(--logoHeight) - 16px) !important;
--logoPosLeft: 0em;
--logoBackShadow: unset;
--logoShadow: var(--boxShadow);
--logoPic: var(--imageCMovieLogo);
--logoSize: cover;
--logoRepeate: no-repeat;
--main-bg-color: var(--xDrkGreen);
--mainBoxTextHeight: 1.68vw;
--mainColor: #44cc00;
--mainFont: 'OCR A','OCR A Std','OCR-A','OCR-A Std', OCR, Monaco, 'Andale Mono', Terminal, FreeMono, monospace;
--mainHeight: 1em;
--mainMargin: 0;
--mainOverflow: hidden;
--mainPadding: 0;
--mainPadding: 1em;
--mainTextHeight: 1.2em;
--mainVisible: inline;
--mainZoom: 100%;
--maxHeight: 100%;
--maxWidth: var(--widthMax);
--maxTerm: 70%;
--menuActiveBg: var(--bgGradientLightActive);
--menuActiveBorder: 1px solid rgba(0, 0, 0,0.8);
--menuBg: var(--bgGradientLight);
--menuBorder: 1px solid rgba(0,0,0,0.8);
--menuBottom: -1.4em;
--menuBoxHeight: var(--buttonBoxHeight);
--menuBoxMaxWidth: 13.3vw;
--menuBoxMinWidth: 11.2vw;
--menuBtn: 43;
--menuHeight: var(--mainTextHeight);
--menuHoverBg: var(--bgGradientLight);
--menuHoverBorder: 1px solid rgba(196,196,196,0.8);
--menuMargin: 0 0.5em;
--menuMaxWidth: 9.5em;
--menuMinWidth: 8em;
--menuPadding: 0 0.5em;
--menuPadding2: 0.5em 1em;
--menuShadow: 0 0 0.15em rgb(224 224 224 / 50%), 0.25em 0.25em 0.35em rgb(0 0 0 / 50%);
--menuTop: 3.5em;
--menuTopTop: 0.25em;
--menuTopLow: 6.1em;
--menuTopWidth: max-content;
--menuView: 40;
--midGray: #888888;
--minTerm: 20%;
--modalView: 100;
--msgBoxMax: 80%;
--msgBoxMin: 15%;
--msgPadding: 1em;
--naviTop: calc(var(--calcHeaderHeight) + 2rem);
--noBorder: none;
--noneBorder: none;
--noShadow: none;
--noTransparent: 1;
--noMarginPadding: 0;
--opacity: 0.8;
--opacityFull: 1;
--opacityHalf: 0.6;
--opacityTranspartent: 0;
--overflowAuto: auto;
--overflowHidden: hidden;
--overflowNone: none;
--overflowCut: clip;
--overflowClip: clip;
--overflowOverlay: overlay;
--overflowScroll: scroll;
--overflowScrollTouch: touch;
--overflowVisible: visible;
--overlayDiverence: 0;
--overlayHeight: 0;
--overlayCalcHeight: 0;
--overlayCalcLayerHeight: 0;
--overlayTop: 0;
--overlayLayerTop: 0;
--overlayHeadTop: 0;
--overlayScreenTop: 0;
--overlayScreenBottom: 0;
--overlayBottom: 0;
--overlayHeadBottom: 0;
--overlayPos: 0;
--overlayPosTop: 0;
--overlayPosHalfTop: 0;
--overlayPosOverlayTop: 0;
--overlayPosScreenTop: 0;
--overlayPosBottom: 0;
--overlayPosHeadBottom: 0;
--overlayPosScreenBottom: 0;
--overlayPosHeadScreenBottom: 0;
--overlayPosOverlayBottom: 0;
--overlayPosHeadOverlayBottom: 0;
--overlayPosHeadTop: 0;
--overlayPosHeadHalfTop: 0;
--overlayPosHeadOverlayTop: 0;
--overlayPosHeadScreenTop: 0;
--overlayPositionScreenTop: 0;
--overlayPositionTop: 0;
--overlayPositionBottom: 0;
--overlayPositionScreenBottom: 0;
--overlayTransition: var(--transitionLong);
--overlayHeightPC: 684;
--overlay1HeightPC: calc(100vh - 1em);
--overlay2HeightPC: calc(100vh - 1em);
--overlay3HeightPC: calc(100vh - 1em);
--overlay4HeightPC: calc(100vh - 1em);
--overlay1TopPC: 40px;
--overlay2TopPC: 804px;
--overlay3TopPC: 1568px;
--overlay4TopPC: 2440px;
--overlayHeightPad: 684;
--overlay1HeightPad: 554;
--overlay2HeightPad: 697;
--overlay3HeightPad: 576;
--overlay4HeightPad: 697;
--overlayHeightWPad: 684;
--overlay1HeightWPad: 684;
--overlay2HeightWPad: 684;
--overlay3HeightWPad: 684;
--overlay4HeightWPad: 684;
--overlayHeightPhone: 684;
--overlay1HeightPhone: 280;
--overlay2HeightPhone: 1477;
--overlay3HeightPhone: 211;
--overlay4HeightPhone: 697px;
--overlayHeightWPhone: 684px;
--overlay1HeightWPhone: 684;
--overlay2HeightWPhone: 684;
--overlay3HeightWPhone: 684;
--overlay4HeightWPhone: 684;
--parentValue: inherit;
--popupActiveBg: var(--bgGradientLightActive);
--popupActiveBorder: var(--menuActiveBorder);
--popupActiveColorBg: var(--drk-bg);
--popupBg: var(--bgGradientDiagLight);
--popupBorder: var(--menuBorder);
--popupBorder2: 1px solid var(--xDrkGreen);
--popupBtn: 48;
--popupChildMargin: var(--mainMargin);
--popupChildMarginBottom: -1em;
--popupChildPadding: 0.5em 1em 0.5em 2em;
--popupHeight: 33.15em;
--popupHoverBg: var(--bgGradientLight);
--popupHoverBorder: var(--menuHoverBorder);
--popupHoverColorBg: var(--light-bg);
--popupItemBg: transparent;
--popupItemMargin: var(--mainMargin);
--popupItemPadding: var(--menuPadding);
--popupMarginRight: 2em;
--popupMarginTop: -0.5em;
--popupMaxWidth: 12em;
--popupMinWidth: 6em;
--popupPosleft: 1em;
--popupPosTop: 3em;
--popupView: 45;
--posBg: center 4.2em;
--posAbsolute: absolute;
--posRelative: relative;
--posFixed: fixed;
--posStatic: static;
--posSticky: sticky;
--posTitle: var(--mainTextHeight);
--progressbarBoxHeight: 2.1vw;
--progressbarHeight: 1.5em;
--repeateBg: no-repeat;
--ratioHDVideo: 16/9;
--ratioLetterBox: 16/6.7467;
--screenHeight: 100vh;
--screenWide: 100vw;
--screenWidth: 100vw;
--scrollTouch: touch;
--scrollPos: 0;
--scrollOpacity: var(--transparent);
--scrollFixOpacity: var(--noTransparent);
--scrollPicTransition: var(--transitionXLong);
--scrollPosFixTop: 0;
--scrollPosFixBottom: 100vh;
--scrollPic: 4;
--scrollPicImage1: var(--imageSky);
--scrollPicImage2: var(--animiImage);
--scrollPicImage3: linear-gradient(180deg,transparent, transparent, transparent, var(--warBlendYellow), var(--warBlendOrange) );
--scrollPicImage4: var(--imageWar);
--scrollPicImage4Flame: var(--imageFlame);
--scrollPicImage4Mask: var(--imageWarMask);
--scrollPicImage4Mask2: var(--imageWarSky);
--scrollPicImage4Mask3: var(--imageWarMask2);
--scrollPicImage4Foreground: var(--imageForeMask);
--scrollPic1activeTop: var(--scrollPic1TopPC);
--scrollPic2activeTop: var(--scrollPic2TopPC);
--scrollPic3activeTop: var(--scrollPic3TopPC);
--scrollPic4activeTop: var(--scrollPic4TopPC);
--scrollPic1TopPC: 0px;
--scrollPic2TopPC: 764;
--scrollPic3TopPC: 1528;
--scrollPic4TopPC: 2292;
--scrollPicHeightPC: 764;
--scrollPic1HeightPC: 764;
--scrollPic2HeightPC: 764;
--scrollPic3HeightPC: 764;
--scrollPic4HeightPC: 764;
--scrollPic1TopPad: 0;
--scrollPic2TopPad: 634;
--scrollPic3TopPad: 1411;
--scrollPic4TopPad: 2067;
--scrollPicHeightPad: 777;
--scrollPic1HeightPad: 634;
--scrollPic2HeightPad: 777;
--scrollPic3HeightPad: 656;
--scrollPic4HeightPad: 777;
--scrollPic1TopWPad: 0;
--scrollPic2TopWPad: 764;
--scrollPic3TopWPad: 1528;
--scrollPic4TopWPad: 2292;
--scrollPicHeightWPad: 764;
--scrollPic1HeightWPad: 764;
--scrollPic2HeightWPad: 764;
--scrollPic3HeightWPad: 764;
--scrollPic4HeightWPad: 764;
--scrollPic1TopPhone: 0;
--scrollPic2TopPhone: 320;
--scrollPic3TopPhone: 1877;
--scrollPic4TopPhone: 2088;
--scrollPicHeightPhone: 320;
--scrollPic1HeightPhone: 320;
--scrollPic2HeightPhone: 1557;
--scrollPic3HeightPhone: 211;
--scrollPic4HeightPhone: 777;
--scrollPic1TopWPhone: 0;
--scrollPic2TopWPhone: 764;
--scrollPic3TopWPhone: 1528;
--scrollPic4TopWPhone: 2292;
--scrollPicHeightWPhone: 764;
--scrollPicSize: cover;
--scrollPosScreenTop: var(--scrollPos);
--scrollPosHeader: calc(var(--scrollPos) + var(--headerHeight));
--scrollPosScreenBottom: calc(var(--scrollPos) + 100vh);
--scrollPosFooter: calc(var(--scrollPos) + (100vh - var(--footerHeight)));
--scrollPosHeaderBottom: calc(var(--scrollPosScreenTop) + var(--headerHeight));
--scrollPosFooterTop: calc(var(--scrollPosScreenTop) + var(--screenHeight) - var(--footerHeight));
--scrollPic1TopVisible: calc(var(--scrollPic1activeTop) - var(--scrollPosHeader));
--scrollPic2TopVisible: calc(var(--scrollPic2activeTop) - var(--scrollPosHeader));
--scrollPic3TopVisible: calc(var(--scrollPic3activeTop) - var(--scrollPosHeader));
--scrollPic4TopVisible: calc(var(--scrollPic4activeTop) - var(--scrollPosHeader));
--scrollSnapStop: always;
--scrollSnapXMan: x mandatory;
--scrollSnapYMan: y mandatory;
--scrollBehaviorSmooth: smooth;
--scrollSnapAlign: start;
--selectColor: rgba(0,0,0,0.4);
--show: visible;
--sizeBg: contain;
--slideTop: 10vh;
--startPos: 0px;
--stdTerm: 25%;
--tableColor: var(--lightgreen);
--tableEven: #000000;
--tableFont: Courier;
--tableMargin: 1em;
--tableMarginH4: 0.75em;
--tableOdd: #222222;
--tablePadding: 0.5em;
--tablePaddingH4: 1.5em;
--tableSelect: #44cc00;
--tableThTop: 4.1em;
--terminalFont: 'OCR A','OCR A Std','OCR-A','OCR-A Std', OCR, Monaco, 'Andale Mono', Terminal, FreeMono, monospace;
--terminalH4Top: -0.5em;
--terminalMarginLeft: 0.75em;
--terminalMax: 65%;
--terminalMin: 25%;
--terminalPaddingH4: 1.5em;
--terminalSelect: text;
--terminalThpadding: 0.5em;
--terminalTop: 4.1em;
--terminalTopCorrect: -0.5em;
--textCenter: center;
--textDecoration: underline;
--textDecoNo: none;
--textLeft: left;
--textRight: right;
--textShadow: var(--fontShadow);
--textNoShadow: none;
--textTop: top;
--thikBorder: 2px;
--titleHeight: 6.5104166vw;
--titleTop: calc(100vh - var(--titleHeight) - 1em);
--titleFontSize: 2vw;
--titleWidth: 75vw;
--titleWidth: 100vw;
--titleLeft: 17.5vw;
--titleLineHeight: 1;
--titleVAlign: middle;
--titleAlign: left;
--titlePadding: 1em 0.5em;
--topFix: sticky;
--topFixMoz: -moz-sticky;
--topFixWebkit: -webkit-sticky;
--topTerm: 10em;
--topLeft: 0px;
--touchAction: none;
--touchActionNone: none;
--touchActionX: pan-x;
--touchActionY: pan-y;
--touchActionMan: manipulation;
--transBgColor: linear-gradient(to left bottom, rgba(0,224,224,0.8), rgba(0,224,224,0.1));
--transDiagram: translate(-19%, -50%);
--transFX: display visibility width height 0.5s;
--translateCenter: translate(-50%, -50%);
--transState: translateY(-30%);
--transparent: 0.0;
--transitionXLong: 3s;
--transitionLong: 1.5s;
--transition: 1s;
--transitionFaster: 0.75s;
--transitionNone: 0.0s;
--transitionFast: 0.5s;
--transitionXFast: 0.25s;
--unshow: hidden;
--user-select: none;
--userSelect: none;
--userSelectYes: text;
--visible: block;
--whiteColor: #ffffff;
--whiteTrans: rgba(255,255,255,0.5);
--widthMax: 100%;
--xDrkGreen: #001000;
--xLightGreen: #00c100;
--YesNoActiveBg: linear-gradient(to top, rgba(128,128,128,1), rgba(128,128,128,0.1));
--YesNoActiveBorder: 1px solid rgba(128,128,128,1);
--YesNoBg: linear-gradient(to bottom, rgba(128,128,128,1), rgba(128,128,128,0.1));
--YesNoBorder: 1px solid #888888;
--YesNoHoverBg: linear-gradient(to top, rgba(128,128,128,1), rgba(128,128,128,0.1));
--YesNoHoverBorder: 1px solid rgba(255,255,255,1);
--YesNoPadding: 0.25em 1em 0.25em 1em;
--YesNoShadow: -0.25em 0.425em 0.25em rgba(0, 0, 0, 0.6);
--urlYTDirImg: 'https://i.ytimg.com/';
--urlYTDirJpg: 'vi/';
--urlYTDirJpg1: url("https://i.ytimg.com/vi/FdcLKygXYAw/maxresdefault.jpg");
--urlYTDirJpg2: url("https://i.ytimg.com/vi/1G0_A2xZd8g/maxresdefault.jpg");
--urlYTDirJpg3: url("https://i.ytimg.com/vi/sAx4rUsUAdg/maxresdefault.jpg");
--urlYTDirJpg4: url("https://i.ytimg.com/vi/CL-petFZkRk/maxresdefault.jpg");
--urlYTDirJpg5: url("https://i.ytimg.com/vi/F8NFr8wI3PM/maxresdefault.jpg");
--urlYTDirJpg6: url("https://i.ytimg.com/vi/7W4LyIoXc2U/maxresdefault.jpg");
--urlYTDirJpg7: url("https://i.ytimg.com/vi/42cSOnfDlCs/maxresdefault.jpg");
--urlYTDirJpg8: url("https://i.ytimg.com/vi/7gXw4HA7PMU/maxresdefault.jpg");
--urlYTDirJpg9: url("https://i.ytimg.com/vi/5S2R3efEG64/maxresdefault.jpg");
--urlYTDirJpg10: url("https://i.ytimg.com/vi/UfB4-SHtHr4/maxresdefault.jpg");
--YTImg: '/maxresdefault.jpg';
--videoYTId1: 'FdcLKygXYAw';
--videoYTId2: '1G0_A2xZd8g';
--videoYTId3: 'sAx4rUsUAdg';
--videoYTId4: 'CL-petFZkRk';
--videoYTId5: 'F8NFr8wI3PM';
--videoYTId6: '7W4LyIoXc2U';
--videoYTId7: '42cSOnfDlCs';
--videoYTId8: '7gXw4HA7PMU';
--videoYTId9: '5S2R3efEG64';
--videoYTId10: 'UfB4-SHtHr4';
--videoYTIdTitle1: 'Krisenvorsorge von Outdoor Chiemgau';
--videoYTIdTitle2: 'Trailer zur Serie The Chosen über Jesus Christus';
--videoYTIdTitle3: 'Meine eigenen Veröffentlichungen';
--videoYTIdTitle4: 'Videos und Predigten von Dr. Lothar Gassmann';
--videoYTIdTitle5: 'Empfenswerte Videos zum Thema IT-Sicherheit, Datenschutz usw.';
--videoYTIdTitle6: 'Die komplette erste Staffel der Serie The Chosen';
--videoYTIdTitle7: 'COVID-Impfstoffe unter dem Mikroskop von Jörg Rinne';
--videoYTIdTitle8: 'ICF Zürich Gottesdienste(deutsch) mit Leo Bigger usw.';
--videoYTIdTitle9: 'C\`Movie Lineares Programm über alle Kanäle';
--videoYTIdTitle10: 'Victory Channel Christliche News und Predigten aus USA';
--videoYTTitle1: 'Krisenvorsorge von \"Outdoor Chiemgau\"';
--videoYTTitle2: 'Trailer zur Serie \"The Chosen\" über Jesus Christus';
--videoYTTitle3: 'Meine eigenen Veröffentlichungen';
--videoYTTitle4: 'Videos und Predigten von \"Dr. Lothar Gassmann\"';
--videoYTTitle5: 'Empfenswerte Videos zum Thema \"IT-Sicherheit, Datenschutz usw.\"';
--videoYTTitle6: 'Die komplette erste Staffel der Serie \"The Chosen\"';
--videoYTTitle7: 'COVID-Impfstoffe unter dem Mikroskop von \"Jörg Rinne\"';
--videoYTTitle8: '\"ICF Zürich\" Gottesdienste(deutsch) mit Leo Bigger usw.';
--videoYTTitle9: '\"C\`Movie\" Lineares Programm über alle Kanäle';
--videoYTTitle10: '\"Victory Channel\" Christliche News und Predigten aus USA';
--videoYTIdTitle_1: 'Krisenvorsorge von 'open-quote'Outdoor Chiemgau'close-quote;
--videoYTIdTitle_2: 'Trailer zur Serie 'open-quote'The Chosen'close-quote' \über Jesus Christus';
--videoYTIdTitle_3: 'Meine eigenen Ver\öffentlichungen';
--videoYTIdTitle_4: 'Videos und Predigten von 'open-quote'Dr. Lothar Gassmann'close-quote;
--videoYTIdTitle_5: 'Empfenswerte Videos zum Thema 'open-quote'IT-Sicherheit, Datenschutz usw.'close-quote;
--videoYTIdTitle_6: 'Die komplette erste Staffel der Serie 'open-quote'The Chosen'close-quote;
--videoYTIdTitle_7: 'COVID-Impfstoffe unter dem Mikroskop von 'open-quote'J\örg Rinne'close-quote;
--videoYTIdTitle_8: open-quote'ICF Z\ürich'close-quote' Gottesdienste(deutsch) mit Leo Bigger usw.';
--videoYTIdTitle_9: open-quote'C\`Movie'close-quote' Lineares Programm \über alle Kan\äle';
--videoYTIdTitle_10: open-quote'Victory Channel'close-quote' Christliche News und Predigten aus USA';
--warBGOpacity: 0.865;
--warFGOpacity: 1;
--warDustFixOpacity: 0.35;
--warDustOpacity: 0.865;
--warFlameOpacity: 0;
--warDustAnimiOpacity: 0.865;
--warFlameAnimiOpacity: 0.75;
--warRubbleOpacity: 1;
--warBGHoverOpacity: 0.535;
--warFGHoverOpacity: 0.65;
--warDustFixHoverOpacity: 0.35;
--warDustHoverOpacity: 0.865;
--warFlameHoverOpacity: 0.65;
--warDustAnimiHoverOpacity: 0.865;
--warFlameAnimiHoverOpacity: 0.15;
--warRubbleHoverOpacity: 0.65;
--warBlendBlue: #cfe5da;
--warBlendDrkBlue: #8c96a8;
--warBlendYellow: #cad2bc;
--warBlendOrange: #c5a47b;
--warBlendTransBlue: rgba(207,229,218,0.4);
--warBlendTransDrkBlue: rgba(140,150,168,0.4);
--warBlendTransYellow: rgba(202,210,188,0.9);
--warBlendTransOrange: rgba(197 164 123,0.9);
--zIndexFooter: 50;
--zIndexHeader: 50;
--zIndexInfo: 55;
--zIndexMain: 0;
--zIndexMenu: 50;
--posBannerHeight: calc(100vh - 140px);
--posBannerWidth: calc((100vh - 140px) * 1.78);
--posBannerLeft: calc((100vh - 140px) * 0.5625 * 0.5);
--ticking: false;
--videoPlay: 0;
--runFade: 0;
--activeScroll: 0;
--indexPosition: 0;
--timer_on: 0;
--picDirection: 'up';
--swipeIn: true;
--swipePrev: 0;
--windowOrientation: '';
--videoHeigth: '1080px';
--videoWidth: '1920px';
--swipeIn: true;
--swipePrev: 0;
--showPreview: 1;
scrollbar-color: var(--colorBlueLgth) var(--colorDrkGrey);
}
/*
* Common attributes
*/
@font-face {
font-family: "ocr-a";
src: url("../fonts/OCR-A.ttf");
src: url("../fonts/OCR-A.woff") format("woff"),url("../fonts/OCR-A.ttf") format("tff");
font-weight: normal;
font-style: normal
}
::-moz-scrollbar-thumb:hover {
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
}
::-scrollbar-thumb:hover {
border-radius: 5px;
}
html,
body {
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica,
Arial, sans-serif;
}
body {
background-image: linear-gradient(0deg, transparent, transparent, rgba(47,121,160,1), rgba(47,121,160,1)) !important;
background-color: #03060b;
color: #f0f0f0;
background-size: cover !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
height: 100vh !important;
font-size: 10pt;
text-shadow: 0.2em 0.2em 0.5em rgb(0 0 0 / 75%), 0 0 0.2em #000000;
}
#contents {
display: flex;
flex-direction: column;
min-height: 100vh;
padding-top: 9em;
}
.h-box {
padding-left: 1em;
padding-right: 1em;
}
.v-box {
padding-top: 1em;
padding-bottom: 1em;
}
.deleted {
background-color: rgb(255, 0, 0, 0.5);
}
.underlined {
border-bottom: 1px solid;
margin-bottom: 20px;
}
.title {
margin: 0.5em 0 1em 0;
}
/* A flex container */
.flexible {
display: flex;
align-items: center;
}
.flex-left {
display: flex;
flex: 1 1 auto;
flex-flow: row wrap;
justify-content: flex-start;
width: 38vw;
}
.flex-right {
display: flex;
flex: 2 0 auto;
flex-flow: row nowrap;
justify-content: flex-end;
width: auto !important;
}
/*
* Channel page
*/
.channel-profile > * {
font-size: 1.17em;
font-weight: bold;
vertical-align: middle;
border-radius: 50%;
}
.channel-profile > img {
width: 82px;
height: auto;
}
body a.channel-owner {
background-color: #008bec;
color: #fff;
border-radius: 9px;
padding: 1px 6px;
}
.creator-heart-container {
display: inline-block;
padding: 0px 7px 6px 0px;
margin: 0px -7px -4px 0px;
}
.creator-heart {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
border: 2px none;
}
.creator-heart-background-hearted {
width: 16px;
height: 16px;
padding: 0px;
position: relative;
}
.creator-heart-small-hearted {
position: absolute;
right: -7px;
bottom: -4px;
}
.creator-heart-small-container {
display: block;
position: relative;
width: 13px;
height: 13px;
color: rgb(255, 0, 0);
}
.feed-menu {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.feed-menu-item {
text-align: center;
}
@media screen and (max-width: 640px) {
.feed-menu-item {
flex: 0 0 40%;
}
}
div {
overflow-wrap: break-word;
word-wrap: break-word;
}
.loading {
display: inline-block;
animation: spin 2s linear infinite;
}
#playlist {
height: 100vh !important;
}
.playlist-restricted {
padding-right: 10px;
}
#playlist ~ .h-box {
display: none !important;
height: 0px !important;
}
/*
* Buttons
*/
.pure-button, button {
color: #000000 !important;
text-decoration: none !important;
text-shadow: none;
box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.6);
}
:is(.pure-button, button):is(:hover,:active,:focus) {
text-decoration: none !important;
text-shadow: none;
}
button.pure-button-primary,
body a.pure-button-primary,
.channel-owner:hover,
.channel-owner:focus {
background-color: #a0a0a0;
color: rgba(35, 35, 35, 1);
text-shadow: none;
}
.pure-button-primary,
.pure-button-secondary {
border: 1px solid #a0a0a0;
border-radius: 3px;
margin: 0 .4em;
}
.pure-button-secondary.low-profile {
padding: 5px 10px;
margin: 0;
}
/* Has to be combined with flex-left/right */
.button-container {
flex-flow: wrap;
gap: 0.5em 0.75em;
}
/*
* Video thumbnails
*/
div.thumbnail {
position: relative;
width: 100%;
box-sizing: border-box;
}
img.thumbnail {
display: block;
width: 100%;
object-fit: cover;
border-radius: 9px;
box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.8);
border: solid 0.75px rgba(32,32,32,0.5);
}
img.thumbnail:is(:hover, :active, :focus) {
border: solid 1.5px rgba(230,230,230,0.5) !important;
}
.thumbnail-placeholder {
min-height: 50px;
border: 2px dotted;
}
div.watched-overlay {
z-index: 50;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,.4);
}
div.watched-indicator {
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 100%;
background-color: red;
}
div.thumbnail > .top-left-overlay,
div.thumbnail > .bottom-right-overlay {
z-index: 100;
position: absolute;
padding: 0;
margin: 0;
font-size: 1.6em;
}
.top-left-overlay { top: 0.6em; left: 0.6em; }
.bottom-right-overlay { bottom: 0.6em; right: 0.6em; }
.length {
padding: 0.35em;
margin: -0.3em 0px;
color: #fff !important;
border-radius: 3px;
width: fit-content;
box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.8);
font-size: .8rem !important;
background-color: rgba(0,0,0,0.65) !important;
}
.length, .top-left-overlay button {
color: #eee;
background-color: rgba(35, 35, 35, 0.85) !important;
}
/*
* Navbar
*/
.navbar {
margin: 1em 0;
display: flex; /* this is also defined in framework, but in case of future changes */
align-items: center;
justify-content: space-between;
}
.navbar > div {
flex: 1;
}
.searchbar {
flex-grow: 2; /* take double the space of the other items */
}
.navbar a {
padding: 0; /* this way it will stay aligned with content under */
}
.navbar .index-link {
font-weight: bold;
display: inline;
color: transparent !important;
text-shadow: none;
}
a.feed-menu-item.pure-menu-heading {
display: none !important;
}
/*
a.index-link.pure-menu-heading::before {
background-size: cover;
position: relative;
content: '';
top: 10px;
left: 2em;
width: 100px;
background-image: url(../CMovie.svg);
background-repeat: no-repeat;
height: 2rem !important;
display: inline-block !important;
}*/
.searchbar .pure-form fieldset { padding: 0; }
.searchbar input[type="search"] {
width: 100%;
margin: 1px;
appearance: none;
-webkit-appearance: none;
}
.searchbar input[type="search"]:focus {
margin: 0;
}
input[type="search"]::placeholder{
color: #ffffff;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 14px;
width: 14px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
background-size: 14px;
}
.user-field {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.user-field div {
width: auto;
}
.user-field div:not(:last-child) {
margin-right: 1em;
}
/*header#headerHidden::after {
content: '';
display: block;
top: 2em;
left: calc(50% - 16.3vw * 0.75);
width: calc(16.3vw * 1.5);
height: calc(8.645833vw * 1.5);
position: relative;
background-image: url(../CMovie.svg), url(../Wasser.png);
background-repeat: no-repeat;
border-radius: 13px;
background-position-y: calc(8.645833vw * 1.5 * 0.22), 0;
border: solid 3px rgba(230,230,230,1);
box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.8);
}
*/
.pure-g.navbar.h-box ~ .h-box:has(header) {
--calcHeaderHeight: calc( var(--fontSize) * var(--setCalcMinHeaderFactor));
font-family: "ocr-a";
background-image: var(--headerBGImage);
background-color: var(--colorDrkGrey);
background-repeat: var(--repeateBg);
backdrop-filter: var(--bgBlur);
-webkit-backdrop-filter: var(--bgBlur);
background-position-x: var(--headerBGPosX);
background-position-y: var(--headerBGPosY);
background-size: var(--headerBGSize);
box-shadow: var(--menuShadow);
color: var(--colorLgtGrey);
width: var(--maxWidth);
position: var(--posFixed);
height: var(--calcHeaderHeight);
text-align: var(--headerAlign);
top: var(--headerTop);
left: 0px;
margin: var(--noMarginPadding) var(--centerMargin);
display: var(--displayBlock);
overflow: var(--overflowHidden);
user-select: var(--userSelect);
-webkit-user-select: var(--userSelect);
-moz-user-select: var(--userSelect);
z-index: 150;
}
.headerText {
font-family: "ocr-a";
}
.h-box h3:has(header) {
height: auto;
}
.h-box.flexible.title {
font-family: "ocr-a";
font-size: 1em;
width: 100%;
}
.channel-name {
font-family: "ocr-a";
font-size: 1em;
}
.thumbnail ~ p ~ p b {
font-size: 1em;
font-family: "ocr-a";
}
.channel-profile.pure-u-4-24.pure-u-md-2-24 ~ .pure-u-20-24.pure-u-md-22-24 > p > b {
font-size: 1em;
font-family: "ocr-a";
}
span#channel-name {
font-family: "ocr-a";
font-size: 1.2em;
}
#download_widget {
width: 100%;
color: #505050;
font-weight: 550;
}
.pure-button:not([class*="vjs"]), button:not([class*="vjs"]), .searchbar input[type="search"], [href*="/login"] {
color: #ffffff !important;
background-color: rgba(230,230,230,0.5) !important;
text-decoration: none !important;
box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.6) !important;
text-shadow: 0.2em 0.2em 0.5em rgb(0 0 0 / 75%), 0 0 0.2em #000000;
border-radius: 1em !important;
border: 0.5px solid rgba(0,0,0,0.5) !important;
padding: 0.35em 0.8em !important;
}
:is(.pure-button:not([class*="vjs"]), button:not([class*="vjs"]), .searchbar input[type="search"], [href*="/login"] ):is(:hover,:active,:focus){
background-color: rgba(0, 182, 240, 0.5) !important;
}
footer {
display: none !important;
}
/*
* Responsive rules
*/
@media only screen and (max-aspect-ratio: 16/9) {
.player-dimensions.vjs-fluid {
padding-top: 46.86%;
padding-top: 56.25% !important;
}
#player-container {
padding-bottom: 46.86% ;
padding-bottom: 56.25% !important;
}
}
@media screen and (max-width: 767px) {
.navbar {
flex-direction: column;
}
.navbar > div {
display: flex;
justify-content: center;
margin-bottom: 25px;
}
.navbar > .searchbar > form {
width: 75%;
}
h1 {
font-size: 1.25em;
margin: 0.42em 0;
}
/* Space out the subscribe & RSS buttons and align them to the left */
.title.flexible { display: block; }
.title.flexible > .flex-right { margin: 0.75em 0; justify-content: flex-start; }
/* Space out buttons to make them easier to tap */
.user-field { font-size: 125%; }
.user-field > :not(:last-child) { margin-right: 1.75em; }
.icon-buttons { font-size: 125%; }
.icon-buttons > :not(:last-child) { margin-right: 0.75em; }
}
@media screen and (max-width: 320px) {
.navbar > .searchbar > form {
width: 100%;
margin: 0 1em;
}
}
/*
* Video "cards" (results/playlist/channel videos)
*/
.video-card-row { margin: 15px 0; }
p.channel-name { margin: 0; }
p.video-data { margin: 0; font-weight: bold; font-size: 80%; }
/*
* Comments & community posts
*/
.comments {
max-width: 800px;
margin: auto;
}
/*
* We don't want the top and bottom margin on the post page.
*/
.comments.post-comments {
margin-bottom: 0;
margin-top: 0;
}
.video-iframe-wrapper {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.video-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.headerText :is(h1,h2,h3,h4) {
text-align: center !important;
margin: unset
}
.headerText h1 {
/*font-size: 20pt; */
}
.headerText h3 {
/*font-size: 14pt; */
}
.headerText h4 {
/*font-size: 11pt; */
padding: 0.5em 0em;
}
.pure-menu-heading {
color: inherit !important;
}
a:not([data-id]) > .icon, .pure-u-lg-1-5 > .h-box > a[href^="/watch?"], .playlist-restricted > ol > li > a {
color: inherit !important;
}
a.feed-menu-item.pure-menu-heading {
display: none !important;
}
/*
* Page navigation
*/
.page-nav-container { margin: 15px 0 30px 0; }
.page-prev-container { text-align: start; }
.page-next-container { text-align: end; }
.page-prev-container,
.page-next-container {
display: inline-block;
}
.searchbar input[type="search"] {
width: 100%;
font-weight: 650;
color: #505050;
margin: 1px;
border: 1px solid;
border-color: rgba(0,0,0,0);
border-bottom-color: #CCC;
border-radius: 0;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
}
.theme-light .searchbar input[type="search"] {
width: 100%;
font-weight: 650;
/*color: #505050;
margin: 1px;
border: 1px solid;
border-color: rgba(0,0,0,0.5);
border-bottom-color: #CCC;
border-radius: 0;
box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.8); */
appearance: none;
-webkit-appearance: none;
}
/*
* Footer
*/
footer {
margin-top: auto;
padding: 1.5em 0;
text-align: center;
max-height: 30vh;
}
.light-theme footer {
color: #7c7c7c;
}
.dark-theme footer {
color: #adadad;
}
.light-theme footer a {
color: #7c7c7c !important;
}
.dark-theme footer a {
color: #adadad !important;
}
footer span {
margin: 4px 0;
display: block;
}
/* keyframes */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
fieldset > select,
span > select {
color: rgba(49, 49, 51, 1);
}
.pure-control-group label {
word-wrap: normal;
}
/*
* Light theme
*/
.light-theme a:hover,
.light-theme a:active,
.light-theme summary:hover,
.light-theme a:focus,
.light-theme summary:focus {
color: inherit;
text-decoration: underline;
}
.light-theme .pure-button-primary:hover,
.light-theme .pure-button-primary:focus,
.light-theme .pure-button-secondary:hover,
.light-theme .pure-button-secondary:focus {
color: #fff !important;
border-color: rgba(0, 182, 240, 0.75) !important;
background-color: rgba(0, 182, 240, 0.75) !important;
}
.light-theme .pure-button-secondary:not(.low-profile) {
color: #335d7a;
background-color: #fff2;
}
.light-theme a {
color: inherit;
text-decoration: none;
}
/* All links that do not fit with the default color goes here */
.light-theme a:not([data-id]) > .icon,
.light-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
.light-theme .playlist-restricted > ol > li > a {
color: #303030;
}
.light-theme .pure-menu-heading {
color: #565d64;
}
@media (prefers-color-scheme: light) {
.no-theme a:hover,
.no-theme a:active,
.no-theme summary:hover,
.no-theme a:focus,
.no-theme summary:focus {
color: inherit;
text-decoration: underline
}
.no-theme .pure-button-primary:hover,
.no-theme .pure-button-primary:focus,
.no-theme .pure-button-secondary:hover,
.no-theme .pure-button-secondary:focus {
color: #fff !important;
border-color: rgba(0, 182, 240, 0.75) !important;
background-color: rgba(0, 182, 240, 0.75) !important;
}
.no-theme .pure-button-secondary:not(.low-profile) {
color: #335d7a;
background-color: #fff2;
}
.no-theme a {
color: inherit;
text-decoration: none;
}
/* All links that do not fit with the default color goes here */
.no-theme a:not([data-id]) > .icon,
.no-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
.no-theme .playlist-restricted > ol > li > a {
color: #303030;
}
.no-theme footer {
color: #7c7c7c;
}
.no-theme footer a {
color: #7c7c7c !important;
}
.light-theme .pure-menu-heading {
color: #565d64;
}
}
/*
* Dark theme
*/
.dark-theme a:hover,
.dark-theme a:active,
.dark-theme summary:hover,
.dark-theme a:focus,
.dark-theme summary:focus {
color: inherit;
text-decoration: underline;
}
.dark-theme .pure-button-primary:hover,
.dark-theme .pure-button-primary:focus,
.dark-theme .pure-button-secondary:hover,
.dark-theme .pure-button-secondary:focus {
color: #fff !important;
border-color: rgb(0, 182, 240) !important;
background-color: rgba(0, 182, 240, 1) !important;
}
.dark-theme .pure-button-secondary {
background-color: #0002;
color: #ddd;
}
.dark-theme a {
color: inherit;
text-decoration: none;
}
body.dark-theme {
background-color: rgba(35, 35, 35, 1);
color: #f0f0f0;
}
.dark-theme #headerHidden a {
color: inherit !important;
text-align: center !important;
}
.dark-theme .pure-form legend {
color: #f0f0f0;
}
.dark-theme .pure-menu-heading {
color: #f0f0f0;
}
.dark-theme input,
.dark-theme select,
.dark-theme textarea {
color: rgba(35, 35, 35, 1);
}
.dark-theme .pure-form input[type="file"] {
color: #f0f0f0;
}
.dark-theme .searchbar input {
background-color: inherit;
color: inherit;
}
.dark-theme .pure-menu-heading:nth-child(1)::before {
display: block;
background-image: url(../CMovie.svg);
background-repeat: no-repeat;
height: 2.35em;
content: "";
position: relative;
top: 0.75em;
/* left: 350px; */
}
@media (prefers-color-scheme: dark) {
.no-theme a:hover,
.no-theme a:active,
.no-theme a:focus {
color: inherit;
text-decoration: underline;
}
.no-theme .pure-button-primary:hover,
.no-theme .pure-button-primary:focus,
.no-theme .pure-button-secondary:hover,
.no-theme .pure-button-secondary:focus {
color: #fff !important;
border-color: rgb(0, 182, 240) !important;
background-color: rgba(0, 182, 240, 1) !important;
}
.no-theme .pure-button-secondary {
background-color: #0002;
color: #ddd;
}
.no-theme a {
color: inherit;
text-decoration: none;
}
body.no-theme {
background-color: rgba(35, 35, 35, 1);
color: #f0f0f0;
}
.no-theme .pure-form legend {
color: #f0f0f0;
}
.no-theme .pure-menu-heading {
color: #f0f0f0;
}
.no-theme input,
.no-theme select,
.no-theme textarea {
color: rgba(35, 35, 35, 1);
}
.no-theme .pure-form input[type="file"] {
color: #f0f0f0;
}
.no-theme .searchbar input {
background-color: inherit;
color: inherit;
}
.no-theme footer {
color: #adadad;
}
.no-theme footer a {
color: #adadad !important;
}
}
/*
* Miscellanous
*/
/*With commit d9528f5 all contents of the page is now within a flexbox. However,
the hr element is rendered improperly within one.
See https://stackoverflow.com/a/34372979 for more info */
hr {
margin: 10px 0 10px 0;
}
/* Description Expansion Styling*/
#descexpansionbutton,
#music-desc-expansion {
display: none;
}
#descexpansionbutton ~ div {
overflow: hidden;
}
#descexpansionbutton:not(:checked) ~ div {
max-height: 8.3em;
}
#descexpansionbutton:checked ~ div {
overflow: unset;
height: 100%;
}
#descexpansionbutton ~ label {
order: 1;
margin-top: 20px;
}
label[for="descexpansionbutton"]:hover,
label[for="music-desc-expansion"]:hover {
cursor: pointer;
}
/* Bidi (bidirectional text) support */
h1, h2, h3, h4, h5, p,
#descriptionWrapper,
#description-box,
#music-description-box {
unicode-bidi: plaintext;
text-align: start;
}
#descriptionWrapper {
max-width: 80%;
white-space: pre-wrap;
}
#music-description-box {
display: none;
}
#music-desc-expansion:checked ~ #music-description-box {
display: block;
}
#music-desc-expansion ~ label > h3 > .ion-ios-arrow-up,
#music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-down {
display: none;
}
#music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-up,
#music-desc-expansion ~ label > h3 > .ion-ios-arrow-down {
display: inline;
}
/* Select all the music items except the first one */
.music-item + .music-item {
border-top: 1px solid #ffffff;
}
/* Center the "invidious" logo on the search page */
#logo > h1 { text-align: center; }
/* IE11 fixes */
:-ms-input-placeholder { color: #ffffff; }
/* Wider settings name to less word wrap */
.pure-form-aligned .pure-control-group label { width: 19em; }
.channel-emoji {
margin: 0 2px;
}
#download_widget {
width: 100%;
}