:root { --col1: #27a5d3; --col2: #70c2e0; --colred: #ea4f4f; --colgreen: #2eba2e; --colorange: #f2b243; --colblack: #000; --colwhite: #fff; --colgrey: #333; --colwhite2: #fff; --bg: #fafafa; --inverse: invert(100%); } ins.adsbygoogle[data-ad-status='unfilled'] { display: none !important; } @font-face { font-family: Font; src: url('images/starlight.ttf'); ascent-override: 80%; } html, body { height: 100%; scroll-behavior: smooth; } body { background: var(--bg); background-attachment: fixed; font-family: Noto Sans; margin: 0; padding: 0; text-align: center; box-sizing: border-box; font-size: 18px; color: var(--colblack); } .google-revocation-link-placeholder { display: none !important; } div { box-sizing: border-box; } body::-webkit-scrollbar { background: var(--col2); width: 5px; } body::-webkit-scrollbar-thumb { background: var(--col1); } p { margin: 0; } img { border: 0; } a { color: var(--col1); text-decoration: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } a:hover { color: var(--colporange); text-decoration: none; filter: contrast(130%); } h1, h2, h3, h4, h5, h6 { font-family: Noto Sans; font-size: 36px; color: var(--colblack); font-weight: normal; margin: 15px 0; } input, textarea, select { background: var(--colwhite); border-radius: 35px; color: #333; font-family: Noto Sans; font-size: 18px; border: 4px solid #666; font-style: italic; padding: 12px 20px; } select { padding: 6px 10px !important; text-transform: lowercase; } select option { color: #333; font-family: Noto Sans; font-size: 18px; text-transform: lowercase; } input:focus { outline: none !important; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition-delay: 9999s; transition-delay: 9999s; } input[type="file"] {display: none;} .p12 {font-size: 12px;} .p14 {font-size: 14px;} .p16 {font-size: 16px;} .p18 {font-size: 18px;} .p20 {font-size: 20px;} .p21 {font-size: 21px;} .p22 {font-size: 22px;} .p24 {font-size: 24px;} .p25 {font-size: 25px;} .p26 {font-size: 26px;} .p30 {font-size: 30px;} .p36 {font-size: 36px;} .p40 {font-size: 40px;} .p48 {font-size: 48px;} .p54 {font-size: 54px;} .p50 {font-size: 50px !important;} .p60 {font-size: 60px !important;} .p100 {font-size: 100px;} .pblue {color: var(--col1);} .pred {color: var(--colred) !important;} .pgreen {color: var(--colgreen);} .porange {color: var(--colorange) !important;} .pblack, .pblack a {color: var(--colblack) !important;} .pwhite, .pwhite a {color: var(--colwhite2) !important;} .pblacktrue, .pblacktrue a {color: #000 !important;} .pwhitetrue, .pwhitetrue a {color: #fff !important;} .pgrey, .pgrey a {color: #666;} .plgrey, .plgrey a {color: #999;} .pleft {text-align: left;} .pital {font-style: italic;} .pbold {font-weight: bold;} .pcrossed {text-decoration: line-through;} .pupper {text-transform: uppercase;} .plower {text-transform: lowercase;} .pstar {font-family: Font;} .pwrap {white-space: normal !important;} .pnowrap {white-space: nowrap !important;} .pstrokeblack {text-shadow: -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000, 2px 0 0 #000, 2px 2px 0 #000, 0 2px 0 #000, -2px 2px 0 #000, -2px 0 0 #000;} .pstrokewhite {text-shadow: -2px -2px 0 #fff, 0 -2px 0 #fff, 2px -2px 0 #fff, 2px 0 0 #fff, 2px 2px 0 #fff, 0 2px 0 #fff, -2px 2px 0 #fff, -2px 0 0 #fff;} .bnw { filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ opacity: 0.75; } .smaller {zoom: 0.85;} .evensmaller {zoom: 0.75;} .tinier {zoom: 0.55;} .opa70 {opacity: 0.7;} .he140 {height: 140px !important;} .din {display: inline-block;} .fleft {float: left;} .fright {float: right;} .inverse {filter: invert(100%);} .zin6 {z-index: 6 !important;} .mb5 {margin: 0 0 5px 0;} .mb10 {margin: 0 0 10px 0;} .mb15 {margin: 0 0 15px 0;} .mb20 {margin: 0 0 20px 0;} .mb40 {margin: 0 0 40px 0;} .h60 {height: 60px;} .moveup10 {position: relative; top: -10px;} .moveup20 {position: relative; top: -20px;} .moveup50 {position: relative; top: -50px;} .rightcorner {position: fixed; bottom: 10px; right: 10px;} .centerbottom {position: fixed; bottom: 20px;} .topane { width: 100%; height: 40px; padding: 10px 5px 0 0; margin: 0 0 -8px 0; } .topane a { margin-left: 5px; } #top { width: 100%; background: var(--colwhite2); border-bottom: 1px solid var(--colgrey); display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; position: fixed; z-index: 4; opacity: 0.9; } #top .realtop a {filter: var(--inverse);} #star { width: 122px; height: 120px; text-align: center; vertical-align: middle; font-family: Font; padding-top: 6px; font-size: 60px; color: var(--colwhite); background: url('images/star.png') no-repeat; position: fixed; left: 3px; top: 3px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; zoom: 0.8; flex-shrink: 0; z-index: 5; } #words, #songs, #loved { display: block; width: 36px; height: 36px; margin: 0 15px 0 0; background: url('images/words.png') 50% 0% no-repeat; } #songs { background: url('images/songs.png') 50% 0% no-repeat !important; } #loved { background: url('images/loved.png') 50% 0% no-repeat !important; } .topname { color: var(--colwhite); text-align: left; width: 100%; height: 53px; overflow: hidden; flex-shrink: 100; padding: 0 0 0 110px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; line-height: 100%; } .topname:hover {color: var(--colwhite);} .but_menu { width: 70px; height: 70px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background: url('images/menu.png') 50% 50% var(--col2) no-repeat; border: 5px solid var(--colwhite); border-radius: 25px; margin: 0 0 0 5px; } .but_back { width: 60px; height: 60px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background: url('images/back.png') 50% 50% var(--col2) no-repeat; border: 5px solid var(--colwhite); border-radius: 25px; margin: 0 0 0 5px; background-size: 70%; } .but_find { width: 67px; height: 67px; display: block; background: url('images/find.png') 50% 50% no-repeat; margin: 0 5px 0 0; flex-shrink: 0; background-size: 80%; } .but_find2 { width: 60px; height: 60px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background: url('images/find3.png') 50% 50% var(--col2) no-repeat; border: 5px solid var(--colwhite); border-radius: 25px; margin: 0 5px 0 0; background-size: 80%; } .find { width: 62px; height: 62px; display: block; background: url('images/find2.png') 50% 50% no-repeat; margin: 0 5px 0 0; flex-shrink: 0; } #bottom { width: 100%; height: 110px; background: var(--colwhite2); display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: flex-start; padding: 5px 5px 0 5px; position: fixed; bottom: -40px; z-index: 1; border-top: 1px solid var(--colgrey); opacity: 0.9; } #bottom a { display: block; width: 55px; height: 55px; background-size: 65% !important; filter: var(--inverse); } #bottom a:nth-child(1) {background: url('images/home.png') 50% 50% no-repeat;} #bottom a:nth-child(2) {background: url('images/find.png') 50% 50% no-repeat;} #bottom a:nth-child(3) {background: url('images/school.png') 50% 50% no-repeat;} #bottom a:nth-child(4) {background: url('images/settings.png') 50% 50% no-repeat;} #bottom a:nth-child(5) {background: url('images/user.png') 50% 50% no-repeat;} .bbb {bottom: 0 !important;} #screen, .screen { width: 100%; height: 100%; display: flex; flex-flow: column nowrap; align-items: center; padding: 10px; } .screen::before, .screen::after { content: ''; /* Insert pseudo-element */ margin: auto; /* Make it push flex items to the center */ } .overscreen { width: 100%; height: 100%; background: url('images/bgb.jpg'); position: fixed; top: 0; left: 0; z-index: 10; } #poster { min-width: 100%; height: auto; background: url('images/temp/art1.jpg') no-repeat; background-size: cover; position: fixed; top: 65px; left: 0; z-index: -1; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left top, left bottom; } #topghost { width: 100%; height: 93px; } #artist_panel { width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.5); padding: 30px 20px 10px 20px; position: fixed; color: #fff; z-index: 3; border-bottom: 5px solid #000; border-radius: 25px 25px 0 0; } #artist_panel > div:nth-child(1) { text-align: left; } #artist_panel > div:nth-child(2) { text-align: right; } .patit { font-size: 38px; color: var(--colwhite) !important; line-height: 90%; margin: 5px 0; } .heart_big { display: inline-block; width: 74px; height: 70px; background: url('images/heart_big.png') no-repeat; } .heart_big_on { display: inline-block; width: 74px; height: 70px; background: url('images/heart_big_on.png') no-repeat; } .slide { height: 170px; overflow-x: scroll; overflow-y: hidden; margin: 0 15px; } .slide .showcase, .slide .songsvideo { flex-flow: row nowrap !important; justify-content: flex-start !important; align-items: flex-start !important; } .slide .showcase a { width: 126px; height: 160px; } .slide .showcase a img { width: 120px; height: 120px; } .slide::-webkit-scrollbar { background: rgba(255,255,255,0.25); height: 0px; } .slide::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.5); } .showcase { width: 100%; display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; } .showcase a { display: block; width: 140px; height: 190px; margin: 0 2px 20px 2px; color: var(--colblack); font-size: 16px; line-height: 100%; overflow: hidden; flex-shrink: 0; position: relative; } .showcase a img { width: 134px; height: 134px; border: 3px solid #cfcfcf; border-radius: 25px; } .showcase p { text-shadow: -1px -1px 0 var(--colwhite2),0 -1px 0 var(--colwhite2),1px -1px 0 var(--colwhite2),1px 0 0 var(--colwhite2),1px 1px 0 var(--colwhite2),0 1px 0 var(--colwhite2),-1px 1px 0 var(--colwhite2),-1px 0 0 var(--colwhite2); } .showcase .heart, .showcase .heart_on { position: absolute; top: 0; right: 0; margin: 8px; } .songsvideo { width: 100%; display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; } .songsvideo a { display: block; width: 196px; height: 150px; margin: 0 5px 20px 5px; color: var(--colblack); font-size: 14px; line-height: 100%; overflow: hidden; flex-shrink: 0; position: relative; } .songsvideo a img { width: 190px; height: 105px; border: 3px solid #cfcfcf; border-radius: 25px; object-fit: cover; } .songsvideo p { text-shadow: -1px -1px 0 var(--colwhite2),0 -1px 0 var(--colwhite2),1px -1px 0 var(--colwhite2),1px 0 0 var(--colwhite2),1px 1px 0 var(--colwhite2),0 1px 0 var(--colwhite2),-1px 1px 0 var(--colwhite2),-1px 0 0 var(--colwhite2); } .songsvideo .heart_on { position: absolute; top: 0; right: 0; margin: 8px; } .ph, .phc { color: var(--colblack); font-size: 24px; text-align: left; margin: 10px 20px; text-shadow: -2px -2px 0 var(--colwhite2),0 -2px 0 var(--colwhite2),2px -2px 0 var(--colwhite2),2px 0 0 var(--colwhite2),2px 2px 0 var(--colwhite2),0 2px 0 var(--colwhite2),-2px 2px 0 var(--colwhite2),-2px 0 0 var(--colwhite2); } .phc { text-align: center !important; } .ph1 { color: var(--colgrey); font-size: 36px; text-transform: uppercase; } .ar_left { display: block; width: 64px; height: 64px; background: url('images/ar_left.png') no-repeat; z-index: 2; margin: 35px 0 0 0; flex-shrink: 0; } .ar_right { display: block; width: 64px; height: 64px; background: url('images/ar_right.png') no-repeat; right: 0; z-index: 2; margin: 35px 0 0 0; flex-shrink: 0; } .absolute {position: absolute;} .relative {position: relative;} .album { display: inline-block; width: 100%; max-width: 1000px; margin: 0 0 20px 0; scroll-margin-block-start: 230px; } .album > div:nth-child(1) { background: rgba(255,255,255,0.5); font-size: 26px; line-height: 100%; color: #000; text-align: left; padding: 3px 12px; } .alb { padding: 10px; } .alb img { border-radius: 25px; width: 200px; height: 200px; border: 3px solid var(--colwhite); float: right; } .alb > a { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; font-size: 22px; color: #333; } .alb > a:hover { color: var(--col1); } .alb > a > div:nth-child(1) { font-weight: bold; border-radius: 5px; background-color: rgba(255,255,255,0.5); width: 40px; text-align: center; margin: 1px; flex-shrink: 0; } .alb > a > div:nth-child(2) { border-radius: 5px; background-color: rgba(255,255,255,0.7); padding: 0 10px; margin: 1px; height: 30px; overflow: hidden; text-align: left; } .alb .heart_on { margin: 3px 0 0 5px; float: right; } #video { width: 100%; background-color: var(--colblack); height: 200px; text-align: center; position: fixed; z-index: 3; } #video iframe { border: none; } .artpan { width: 100%; height: 50px; padding: 0 15px; background-color: rgba(0,0,0,0.9); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; font-size: 24px; color: #fff; position: fixed; z-index: 3; } .artpan a { color: #fff; flex-shrink: 0; } .artpan a:hover {color: var(--col1);} .heart { display: inline-block; background: url('images/heart.png') no-repeat; width: 25px; height: 23px; flex-shrink: 0; } .heart_on { display: inline-block; background: url('images/heart_on.png') no-repeat; width: 25px; height: 23px; flex-shrink: 0; } #lyrics { margin: 20px 0 0 0; padding: 0 10px; color: var(--colgrey); font-size: 22px; } #lyrics > a { color: var(--colgrey); } #lyrics > a:hover { display: inline-block; color: var(--colwhite); background-color: var(--col2); } #lyrics .act { display: inline-block; background-color: #c7f2c7; color: #333; } #lyrics .notact { display: inline-block; pointer-events: none; cursor: default; } .ghost { width: 100%; } .wordadd { display: inline-block; background-color: var(--colwhite2); border: 3px solid var(--col2); border-radius: 25px 25px 25px 25px; padding: 5px 10px; position: absolute; margin-top: -15px; min-width: 160px; z-index: 0; } .wordadd > div:nth-child(1) { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .wordadd > div:nth-child(1) p { color: var(--col1); font-weight: bold; margin: 0 15px; font-size: 24px; } #vars { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; margin: 5px 0 10px 0; line-height: 160%; font-weight: bold; } #vars a { color: var(--colblack); width: 100%; padding: 0 10px; } #vars a:hover, .wact { background-color: var(--col2); } #vars a:nth-child(1) {font-size: 22px !important;} #vars a:nth-child(2) {font-size: 20px !important;} #vars a:nth-child(3) {font-size: 18px !important;} #vars a:nth-child(4) {font-size: 16px !important;} #vars a:nth-child(5) {font-size: 15px !important;} #vars a:nth-child(6) {font-size: 14px !important;} #vars a:nth-last-child(-n+50) {font-size: 13px;} .wordadd .close { position: relative; top: -15px; left: 20px; } .sound { display: block; width: 28px; height: 28px; background: url('images/sound.png') no-repeat; flex-shrink: 0; } .sound_light { display: block; width: 28px; height: 28px; background: url('images/sound_light.png') no-repeat; flex-shrink: 0; } .sound_big { display: inline-block; width: 100px; height: 103px; background: url('images/sound_big.png') no-repeat; flex-shrink: 0; } .close { display: block; width: 34px; height: 34px; background: url('images/close.png') no-repeat; } .closelang { position: absolute; top: -10px; right: -25px; border: none !important; width: 34px !important; } .button_small, .button_mid, .button_big { border-radius: 20px; background-color: var(--colgreen) !important;; display: inline-flex; flex-flow: row nowrap; justify-content: center; align-items: center; color: var(--colwhite); text-transform: uppercase; white-space: nowrap; margin: 0 0 10px 0; } .button_small:hover, .button_mid:hover, .button_big:hover { color: var(--colwhite); } .button_small { padding: 6px 20px; font-size: 14px; border-radius: 12px; } .button_mid { padding: 10px 30px; font-size: 19px; } .button_big { padding: 13px 40px; font-size: 24px; } .button2story { padding: 15px !important; max-width: 300px !important; } .butorange {background-color: var(--colorange) !important;} .butred {background-color: var(--colred) !important;} .butblue {background-color: var(--col1) !important;} .butlblue {background-color: var(--col2) !important;} .butgrey {background-color: #999 !important;} .mbm {margin: 0 0 -10px 0;} .mbp {margin: 0 0 20px 0 !important;} .button_pale { border-radius: 20px; background-color: var(--colwhite2); display: inline-flex; flex-flow: row nowrap; justify-content: center; align-items: center; color: #999; text-transform: uppercase; border: 3px solid #cfcfcf; padding: 5px 5%; font-size: 18px; } .button_pale:hover, .bpa { background-color: var(--col2); border: 3px solid var(--col2); color: var(--colwhite); } .butwide {display: flex !important;} .wordstat { width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin: 25px 0 0 0; } .wordstat > div { text-transform: uppercase; width: 33%; } .wordstat > div:nth-child(1), .wordstat > div:nth-child(3) { position: relative; top: 25px; } .wordstat > div p:nth-child(2) { text-transform: uppercase; font-family: Font; font-size: 70px; margin-top: -5px; } .cat_happy { display: inline-block; width: 190px; height: 220px; background: url('images/cat_happy.png?i=1') no-repeat; margin-bottom: -10px; } .cat_sad { display: inline-block; width: 190px; height: 220px; background: url('images/cat_sad.png') no-repeat; margin-bottom: -10px; } .cat_normal { display: inline-block; width: 190px; height: 220px; background: url('images/cat_normal.png') no-repeat; margin-bottom: -10px; } .cat_404 { display: inline-block; width: 275px; height: 308px; background: url('images/404.png') no-repeat; margin: 5px 0 -10px 0; } #cat_logo { display: inline-block; width: 190px; height: 220px; background: url('images/cat.png') no-repeat; margin-bottom: -10px; } .xpbar { display: inline-block; min-width: 350px; width: 100%; height: 25px; border-radius: 15px; border: 2px solid var(--colorange); text-align: left; background-color: var(--colwhite); overflow: hidden; } .xpbar > div { background-color: var(--colorange); height: 100%; border-radius: 12px 0 0 12px; } .conso { line-height: 150%; margin: 15px 0; } .wordslist { display: inline-block; width: 100%; max-width: 1000px; padding: 0 5px; margin: 0 0 20px 0; } .wordslist > div { border-bottom: 1px solid #cfcfcf; padding: 10px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .wline { display: block; width: 100%; flex-shrink: 10; text-align: left; padding: 0 20px; line-height: 120%; } .dotgreen { width: 16px; height: 16px; background-color: var(--colgreen); border-radius: 15px; } .dotred { width: 16px; height: 16px; background-color: var(--colred); border-radius: 15px; } .dotorange { width: 16px; height: 16px; background-color: var(--colorange); border-radius: 15px; } .fle { width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; } .flecenter {justify-content: center !important;} .fleright {justify-content: flex-end !important;} .flebetween {justify-content: space-between !important;} .flearound {justify-content: space-around !important;} .flevert {flex-flow: column nowrap !important;} .flewrap {flex-flow: row wrap !important;} .flecwrap {flex-flow: column wrap !important;} .flenowrap {flex-flow: row nowrap !important;} .fletop {align-items: flex-start !important;} .flemid {align-items: center !important;} .fleend {justify-content: flex-end;} .fleshrink {flex-shrink: 10;} .cloud { width: 478px; height: 241px; background: url('images/cloud.png') no-repeat; display: inline-flex; flex-flow: column wrap; justify-content: center; align-items: center; color: #333; padding: 10px 35px 60px 35px; flex-shrink: 0; } .cloud_small { width: 360px; height: 200px; background: url('images/cloud_small.png') no-repeat; display: inline-flex; flex-flow: column nowrap; justify-content: center; align-items: center; color: #333; padding: 10px 20px 60px 20px; line-height: 120%; } .flag { position: fixed; bottom: -3px; left: 0; margin: 10px; z-index: 4; } .flag2 { margin: 10px; } .flag img, .flag2 img { width: 40px; height: 40px; border-radius: 25px; border: 3px solid var(--colwhite); } .tagcloud { width: 100%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } .tagcloud a { border: 3px solid #cfcfcf; background-color: var(--colwhite); padding: 3px 15px; border-radius: 0 30px 30px 30px; font-size: 26px; color: #333; margin: 3px 5px; } .tagcloud .selected { background-color: var(--col2); border: 3px solid var(--col1); color: var(--colwhite); } #comdiv { width: 100%; min-height: 300px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } #searchi, #searchis { width: 100%; max-width: 520px; margin: 0 10px 0 0; } #search { margin: 0 10px 0 15px; width: 100%; border: 3px solid var(--col2); } .songslist { width: 100%; max-width: 800px; padding: 10px; display: inline-block; } .songslist a { font-size: 18px; color: var(--colgrey); display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; height: 25px; overflow: hidden; padding: 5px 0 0 0; border-bottom: 1px solid #cfcfcf; } .songslist a:hover { background-color: rgba(255,255,255,0.25); } .songslist a p:nth-child(1){ width: 30px; padding: 0 20px 0 0; text-align: right; flex-shrink: 0; } .songslist a p:nth-child(2){ width: 100%; text-align: left; height: 35px; overflow: hidden; flex-shrink: 10; } .songslist a p:nth-child(3) { color: #999; font-size: 14px; margin: 0 10px 0 0; flex-shrink: 0; } .songslist a div:nth-child(4) { flex-shrink: 0; } .content-800 { display: inline-block; width: 100%; max-width: 800px; padding: 0 10px; } .content-1000 { display: inline-block; width: 100%; max-width: 1000px; padding: 0 5px; } .content-1200 { display: inline-block; width: 100%; max-width: 1200px; padding: 0 10px; } .delete { display: block; width: 22px; height: 31px; background: url('images/delete.png') no-repeat; } .progbar { display: block; width: 60px; height: 15px; border-radius: 10px; margin: 0 15px 0 0; } .progbar > div { height: 100%; border-radius: 5px 0 0 5px; } .pbgreen {border: 2px solid var(--colgreen);} .pbgreen > div {background-color: var(--colgreen);} .pborange {border: 2px solid var(--colorange);} .pborange > div {background-color: var(--colorange);} .pbred {border: 2px solid var(--colred) !important;} .pbred > div {background-color: var(--colred) !important;} .checkbox { position: relative; left: -10px; } .textlink { display: inline-block; font-size: 12px; color: var(--colblack); text-transform: uppercase; } .textlink:hover { color: var(--colred); } .overlay, .overlay_strong, .overlay_verystrong { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 5; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 10px; } .overlay_strong { background: rgba(0,0,0,0.75) !important; animation: fadein 0.5s ease-out; } .overlay_verystrong { background: rgba(0,0,0,0.85) !important; animation: fadein 0.5s ease-out; } .hide {display: none !important;} .hide2 {visibility: hidden;} .wordcard { min-width: 350px; display: inline-block; background: var(--bg); border-radius: 25px; border: 3px solid #cfcfcf; padding: 10px 15px; } .wordcard .close { position: absolute; margin: -5px 0 0 -10px; } .wordcard img { width: 150px; height: 150px; border-radius: 35px; border: 3px solid #cfcfcf; margin: 10px 0 0 0; } .aghost { width: 100%; height: 100%; } .rem { width: 100%; font-size: 28px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; margin: 0 0 10px 0; } .rem p:nth-child(1) { color: var(--col1); text-align: right; width: 50%; } .rem p:nth-child(2) { color: #999; text-align: center; width: 50px; flex-shrink: 0; } .rem p:nth-child(3) { color: var(--colblack); text-align: left; width: 50%; } .line { width: 100%; height: 1px; border-bottom: 1px solid #cfcfcf; margin: 10px 0 20px 0; } .linedot { width: 100%; height: 1px; border-bottom: 1px dotted #cfcfcf; margin: 3px 0; position: relative; top: -9px; } .answers { width: 100%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } .answers a { border-radius: 25px; padding: 3px 25px 7px 25px; background-color: var(--colwhite); color: #333; border: 3px solid #cfcfcf; margin: 10px; font-size: 24px; } .answers .true, .true { background-color: var(--colgreen); color: var(--colwhite); } .answers .wrong, .wrong { background-color: var(--colred); color: var(--colwhite); } .bignum { font-family: Font; font-size: 80px; display: inline-block; } .learned { display: block; width: 30px; height: 36px; background: url('images/learned.png') no-repeat; margin: 0 10px 0 0; } .letters { width: 100%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } .letters div { width: 57px; height: 57px; border: 3px solid #ebebeb; border-radius: 20px; color: #333; font-size: 28px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background-color: var(--colwhite); text-transform: uppercase; margin: 1px; } .letters .wrong { background-color: var(--colred); border: 3px solid #cfcfcf; color: var(--colwhite); } .letters .true { border: 3px solid #cfcfcf; } .letters_pick { width: 100%; min-height: 90px; display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; } .letters_pick a { display: block; width: 55px; height: 55px; border: 3px solid var(--col1); border-radius: 20px; color: var(--col1); font-size: 36px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background-color: var(--colwhite); text-transform: uppercase; margin: 5px; } .letters_pick .wrong { background-color: var(--colred) !important; color: var(--colwhite) !important; } #vars { max-height: 143px; overflow: hidden; } #varschange { display: none; } .vamo { display: block; position: relative; top: -10px; } .prompt { max-width: 330px; border-radius: 25px; border: 3px solid #cfcfcf; background-color: var(--colwhite2); padding: 20px; } .toup {margin: -40px 0 0 0;} .toup5 {position: relative; top: -5px;} .toup10 {position: relative; top: -10px;} .toup15 {position: relative; top: -15px;} .toup20 {position: relative; top: -20px;} .fire { display: inline-block; width: 30px; height: 30px; background: url('images/fire.png') no-repeat; float: right; margin: 0 -10px 0 5px; } .img { display: inline-block; width: 34px; height: 28px; background: url('images/img.png') no-repeat; } .wordimg { width: 120px; height: 120px; border-radius: 25px; border: 3px solid #cfcfcf; margin: 0 0 0 10px; } #wordimg { display: none; } .h110 { height: 110px; } #timer { position: fixed; bottom: 0; right: 0; z-index: 10; } .genres { width: 100%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } .genres a { display: inline-block; border-radius: 0 10px 10px 10px; padding: 3px 10px; background-color: rgba(255,255,255,0.75); margin: 2px 4px; color: #000; font-size: 18px; border: 1px solid #cfcfcf; } .genres a:hover { color: var(--col1); } #sun { width: 668px; height: 668px; position: absolute; top: 50%; left: 50%; margin:-334px 0 0 -334px; background: url('images/sun.png') no-repeat; animation:spin 4s linear infinite; } #badge { position: absolute; width: 240px; height: 240px; animation: pop 0.5s ease; } .achievement { width: 444px; height: 162px; background: url('images/achievement.png') no-repeat; margin: 0 0 270px 0; position: relative; top: 70px; animation: pop 0.5s ease; } .badgecont { z-index: 4; } .achli { width: 100%; height: 120px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; background: url('images/line.png') 0% 100% repeat-x; text-align: left; } .achli img { width: 120px; height: 120px; } .achli > div:nth-child(1) { width: 100%; } .achli .learned { float: left; position: relative; top: 15px; } #answerinp { width: 350px; margin: 10px 0 0 0; } .prop { font-size: 16px; color: var(--colblack) !important; position: relative; top: -6px; } #mytrans { display: none; } #mytransinp { font-size: 14px; width: 92%; border: 1px solid #cfcfcf; padding: 0px 8px; margin: 0 -25px 5px -25px; box-sizing: border-box !important; flex-shrink: 10; } .loader { width: 120px; height: 120px; border-radius: 60px; border: 12px dotted var(--col1); animation:spin 4s linear infinite; flex-shrink: 0; } .l2 { position: absolute; top: 50%; left: 50%; margin: -60px 0 0 -60px; z-index: 7; } .loader_small { position: absolute; width: 40px; height: 40px; border-radius: 20px; border: 8px dotted var(--colorange); animation: fadein 0.3s ease-out, spin 4s linear infinite; z-index: 7; margin: -6px 0 0 -20px; } #preloader { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: var(--bg); z-index: 10; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } #preloader .loader { border: 12px dotted var(--col1); } .heart_on, .heart_big_on { animation: punch 0.3s ease-out; } .butlight, .butdark { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 230px; height: 60px; border: 3px solid #cfcfcf; font-size: 30px; padding: 0 5px; margin: 10px 0 0 0; } .butlight:hover, .butdark:hover { color: auto; } .butlight { background: url('images/bg.jpg'); color: #000; border-radius: 25px 0 0 25px; } .butdark { background: url('images/bgb.jpg'); color: #fff; border-radius: 0 25px 25px 0; } #buteasy, #butnormal, #buthard { min-width: 140px; border: 3px solid #cfcfcf; padding: 10px 5px; color: #fff; font-size: 24px; margin: 10px 0 0 0; } #buteasy { background-color: var(--colgreen); border-radius: 25px 0 0 25px; } #butnormal { background-color: var(--colorange); } #buthard { background-color: var(--colred); border-radius: 0 25px 25px 0; } .mensel { border: 3px solid var(--colgreen) !important; box-shadow: 0px 0px 6px 3px var(--colgreen); } .accent { width: 350px; display: inline-flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; margin: 10px 0 0 0; } .accent a:nth-child(1) { display: block; width: 120px; height: 62px; background: url('images/uk.jpg') no-repeat; border: 3px solid #cfcfcf; border-radius: 25px; } .accent a:nth-child(2) { display: block; width: 120px; height: 62px; background: url('images/us.jpg') no-repeat; border: 3px solid #cfcfcf; border-radius: 25px; } #google { display: block; border: 3px solid var(--col2); border-radius: 25px; background: url('images/google.png') 100% 50% var(--col1) no-repeat; font-size: 18px; color: #fff; padding: 15px 60px 15px 30px; margin: 10px; } .oldprice { text-decoration: line-through; color: #999 !important; font-size: 18px; } .subord, .subest { min-width: 400px; height: 100px; background-color: #fff; border: 5px solid #cfcfcf; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; border-radius: 25px; padding: 0 20px; box-sizing: border-box; color: #000 !important; margin: 5px 0; text-align: left; position: relative; } .subest { height: 130px !important; padding-top: 20px; } .subact { border: 5px solid var(--colorange) !important; } .bestprice { position: absolute; top: 0; left: 0; border-radius: 15px 0 15px 0; background-color: var(--colorange); color: #fff; padding: 2px 10px 2px 5px; } .close_small { display: block; position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; background: url('images/close_small.png') no-repeat; } .quenum { position: relative; top: 10px; } .icon_settings { display: block; width: 60px; height: 60px; background: url('images/settings_small.png?t=1') no-repeat; } .icon_edit { display: block; width: 60px; height: 60px; background: url('images/edit.png?t=1') no-repeat; } .icon_user { display: block; width: 60px; height: 60px; background: url('images/user.png') no-repeat; background-size: contain; } .ava { display: block; width: 150px; height: 150px; -webkit-filter: drop-shadow(0px 0px 2px var(--col1)); filter: drop-shadow(0px 0px 2px var(--col1)); border-radius: 75px; border: 3px solid #cfcfcf; } .ava img { width: 150px; height: 150px; border-radius: 70px; } .uspan { width: 100%; border-radius: 25px 25px 0 0; background-color: var(--col1); padding: 10px 0; margin: 10px 0 0 0; } .salepane { width: 100%; background-color: var(--colgreen); border-radius: 0 0 25px 25px; } .uh { width: 100%; background-color: var(--col1); color: var(--col1); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 5px 10px; margin: 10px 0; border-radius: 10px; color: #fff; } .uh p:nth-child(1) { font-size: 24px; } .uh a:nth-child(2) { font-size: 14px; text-transform: uppercase; color: #fff !important; } .uh a:nth-child(2):hover { color: var(--colred); } .mina_l { width: 20px; height: 20px; background: url('images/mina_l.png') no-repeat; position: absolute; top: 35%; left: 0; } .mina_r { width: 20px; height: 20px; background: url('images/mina_r.png') no-repeat; position: absolute; top: 35%; right: 0; } .myach { display: flex; flex-flow: row nowrap !important; justify-content: flex-start !important; align-items: flex-start !important; } .myach img { width: 135px; height: 135px; } .bup { border-radius: 25px; padding: 5px; } .bluewin { max-width: 500px; background-color: var(--col1); border: 3px solid var(--col2); border-radius: 25px; padding: 20px; text-align: center; } .bluewin p { color: #fff !important; } .bluepan { width: 100%; padding: 10px; background-color: var(--col2); color: #fff; border-radius: 25px; margin: 10px 0 0 0; } #jsout { font-size: 14px; text-transform: uppercase; height: 15px; margin: -8px 0 8px 0; overflow: hidden; } #jsout2, #jsout3, #jsout4 { font-size: 14px; text-transform: uppercase; height: 15px; margin: 5px 0 15px 0; overflow: hidden; } .tut { position: relative; left: -20px; border: 5px solid #cfcfcf; border-radius: 25px; background: url('images/bg.jpg'); width: 350px; height: 140px; margin: 0 0 80px 0; padding: 15px 20px 0 20px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } .tutleft { left: 30px; } .tut p:nth-child(1) { color: #999; font-size: 18px; text-transform: uppercase; position: absolute; top: 10px; left: 60px; } .tutleft p:nth-child(1) { position: absolute; top: 10px; right: 60px; left: auto; } .tut p:nth-child(2) { color: #333; font-size: 24px; text-align: center; line-height: 100%; } .tut img { position: absolute; top: -60px; right: -100px; scale: 0.8; } .tutleft img { top: -60px; left: -120px; } .tut .tutnum { width: 80px; height: 80px; border-radius: 40px; border: 7px solid var(--col1); font-family: Font; font-size: 64px; color: var(--col1); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; position: absolute; top: -30px; left: -30px; background-color: #fff; padding: 0 0 5px 0; } .tutleft .tutnum { left: auto; right: -30px; } .sale { width: 588px; height: 994px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; zoom: 0.85; position: relative; left: 10px; } .sale > div:nth-child(1) { position: relative; right: 165px; bottom: 50px; width: 250px; height: 100px; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; line-height: 120%; } .sale > a:nth-child(2) { position: relative; top: 200px; width: 280px; height: 120px; padding: 15px 0 0 0; box-sizing: border-box; z-index: 5; } .sale > div:nth-child(3) { position: relative; top: 190px; left: 140px; } .sale > div:nth-child(4) { position: relative; top: 150px; left: 0; } .sale50 { background: url('images/sale50.png') 0 50% no-repeat; } .sale80 { background: url('images/sale80.png') 0 50% no-repeat; } .click { width: 87px; height: 78px; background: url('images/click.png') no-repeat; transform-origin: top left; animation: blink 0.8s infinite; } .loly { width: 76px; height: 57px; position: absolute; left: 50%; top: 50%; margin: -38px 0 0 -28px; background: url('images/minilyrkit2.png') 50% 50% no-repeat; z-index: 5; } #ukfree { width: 100%; height: 57px; background: linear-gradient(to bottom, #27a5d3 50%, #e6f944 50%); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 0 10px; position: fixed; top: 0; line-height: 150%; } #invisiblock { width: 100%; height: 100%; z-index: 3; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); } #invisiblock2 { width: 100%; height: 100%; z-index: 4; position: fixed; top: 0; left: 0; } .stop-scrolling { height: 100%; overflow: hidden; } .clo { width: 100%; height: 170px; z-index: 10; position: fixed; bottom: 0; left: 0; padding: 10px 20px 20px 150px; border-radius: 25px 25px 0 0; color: #111; font-size: 22px; background: url('images/cat.png') 10px 50% rgba(255,255,255,0.9) no-repeat; background-size: 130px 150px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } .clo .close { position: absolute; top: 0; right: 0; } .wog { border: 1px solid var(--colgreen); border-radius: 10px; padding: 0 5px; background-color: #fff; } #langs > div { position: relative; } #langs > div > div:nth-child(1) { width: 350px; background-color: var(--col1); border-radius: 25px 25px 0 0; border-top: 3px solid #cfcfcf; border-left: 3px solid #cfcfcf; border-right: 3px solid #cfcfcf; padding: 15px 0; text-transform: uppercase; color: #fff; } #langs > div > div:nth-child(2) { width: 350px; max-height: 600px; overflow-y: scroll; overflow-x: hidden; background: #fff; border-radius: 0 0 0 25px; border-bottom: 3px solid #cfcfcf; border-left: 3px solid #cfcfcf; border-right: 3px solid #cfcfcf; padding: 10px; margin: 0 0 10px 0; } #langs > div > div:nth-child(2)::-webkit-scrollbar { background: var(--col2); width: 10px; } #langs > div > div:nth-child(2)::-webkit-scrollbar-thumb { background: var(--col1); } #langs a { display: block; width: 290px; border: 3px solid #cfcfcf; border-radius: 15px; margin: 5px 0; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 0 6px 0 12px;; } #langs p { text-align: left; } #langs img { width: 40px; height: 40px; } .table_dark, .table_light { background: url('images/bgb.jpg'); border-radius: 25px; border: 3px solid #cfcfcf; padding: 20px 20px 5px 20px; line-height: 200%; flex-shrink: 0; max-width: 600px; } .table_light { background: url('images/bg.jpg') !important; } .stars5 { display: inline-block; width: 250px; height: 50px; background: url('images/star_grey.png') repeat-x; background-size: 50px; } #revar { width: 340px; height: 150px; border-radius: 15px; border: 2px solid #cfcfcf; } .stritran { display: inline-block; border-radius: 10px; width: 19px; height: 19px; background: url('images/i_play.png') 60% 49% no-repeat var(--col2); } .transtring { font-size: 16px; font-style: italic; color: var(--colgreen); margin-bottom: -20px; } .cat-1, .cat-2, .cat-3, .cat-4, .cat-5, .cat-6, .cat-7, .cat-8, .cat-9, .cat-10, .cat-11, .cat-12, .cat-13, .cat-14 {background-image: url('images/cats.png?t=2');} .cat-1 {background-position: 0 0; width: 190px; height: 220px;} .cat-2 {background-position: -191px 0; width: 190px; height: 220px;} .cat-3 {background-position: -382px 0; width: 190px; height: 220px;} .cat-4 {background-position: -573px 0; width: 190px; height: 220px;} .cat-5 {background-position: -764px 0; width: 190px; height: 220px;} .cat-6 {background-position: -955px 0; width: 190px; height: 220px;} .cat-7 {background-position: -1146px 0; width: 190px; height: 220px;} .cat-8 {background-position: -1337px 0; width: 190px; height: 220px;} .cat-9 {background-position: -1528px 0; width: 190px; height: 220px;} .cat-10 {background-position: -1719px 0; width: 190px; height: 220px;} .cat-11 {background-position: -1910px 0; width: 190px; height: 220px;} .cat-12 {background-position: -2101px 0; width: 190px; height: 220px;} .cat-13 {background-position: -2292px 0; width: 190px; height: 220px;} .cat-14 {background-position: -2483px 0; width: 190px; height: 220px;} .ad { width: 100%; height: 290px; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } .ad > div { width: 336px; height: 290px; } .ad > div ins { width: 336px; height: 290px; } .marlinks a { margin: 0 5px; } .leaderboard { max-width: 1000px; display: flex; flex-flow: row wrap; justify-content: space-around; align-items: flex-start; } .leaderboard > div { width: 440px; border: 1px solid #dfdfdf; border-radius: 25px; padding: 3px 0; margin: 2px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; background-color: #fff; } .leaderboard > div > div:nth-child(1) { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } .leaderboard > div > div:nth-child(2) { display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; } .leaderboard .pnumber { min-width: 30px; font-family: Font; color: var(--col1); text-align: center; font-size: 24px; margin: 3px 0 0 9px; } .iamleader { background-color: var(--col1) !important; } .iamleader * { color: #fff !important; } .leadava { width: 40px; height: 40px; background-color: var(--col1); border-radius: 20px; margin: 0 4px 0 0; } .leadava img { width: 40px; height: 40px; border-radius: 20px; } .leadlang { width: 30px; height: 30px; border: 1px solid #dfdfdf; border-radius: 15px; margin: 0 4px; } .chat { max-width: 1000px; height: 250px; overflow-y: scroll; font-size: 13px; line-height: 100%; text-align: left; padding: 0 10px; border: 3px solid #dfdfdf; border-radius: 25px 0 0 25px;; margin: 5px; color: #444; } .chat p { margin: 10px 0; border-bottom: 1px dotted #cdcdcd; padding: 0 0 10px 0; } .chatsay { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; margin: 0 5px; } .chatsay input { width: 100%; border: 3px solid #dfdfdf !important; margin: 0 5px 0 0; padding: 9px 10px; } @media (max-width:620px) { #comdiv .cdr {position: absolute; right: 10px; z-index: 3;} #comdiv > img {position: absolute; left: 10px;} .alb img {width: 150px; height: 150px;} } @media (max-height:660px) { .lyrkit_ask {display: none;} } .fadein { animation: fadein 0.5s ease-out; } .wow { animation: pop 0.5s ease; } .glow { animation: glow 0.3s 6 alternate; } .pulse { animation: pulse 0.5s 6 alternate; } .fadeinout { animation: fadein 0.1s 24 alternate; } .butload { background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 50%, transparent 30%), linear-gradient(rgba(255, 255, 255, 0.4) 50%, transparent 30%); background-size: 200% 100%; animation: loading 1s infinite linear; } @keyframes punch { 0% {transform: scale(1.0);} 50% {transform: scale(2.0);} 100% {transform: scale(1.0);} } @keyframes pop { 0% {transform: scale(5.1);} 100% {transform: scale(1.0);} } @keyframes glow { 0% {filter: drop-shadow(0 0 0px rgba(255, 255, 255, 1));} 100% {filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1));} } @keyframes spin { 100% {-webkit-transform: rotate(360deg); transform:rotate(360deg);} } @keyframes fadein { 0% {opacity: 0;} 100% {opacity: 100%;} } @keyframes blink { 0% {scale: 1;} 100% {scale: 0.5;} } @keyframes pulse { 0% {scale: 1;} 100% {scale: 1.2;} } @keyframes loading { to {background-position: -200% 0;} }