CriticalStyle.css

*{box-sizing:border-box}html{font-size:20px}@media screen and (max-width:540px){html{font-size:3.7vmin}}body{font-family:"Source Sans Pro","Arial","Helvetica",sans-serif;margin:0}#MainHeaderText,.displaybuttons,#drchoice,#drnotiftext{font-family:"Poppins","Verdana",sans-serif}#loading{position:fixed;display:flex;justify-content:center;align-items:center;width:100%;height:100%;top:0;left:0;background-color:white;color:black;z-index:101;opacity:1}#loading img{transform:scale(1)}#GameResults{display:none}.HeaderBody{align-items:center;justify-content:center}.MainHeader{display:flex;align-items:center;justify-content:center;border-bottom:0.05rem solid grey;width:26rem;padding-top:0.5rem;margin:0 auto}#MainHeaderText{text-align:center;margin-left:auto;margin-right:auto;font-weight:bold}.material-icons-outlined{margin-left:0.35rem;margin-right:0.35rem;display:inline-block}#flag{opacity:0}#keyscontainer{width:100%;text-align:center;position:fixed;bottom:0;padding:0.5rem;background:rgb(255,255,255);background:linear-gradient(180deg,rgba(255,255,255,0) 5%,rgb(255,255,255) 100%)}#colorkeys{width:25.5rem;align-items:center;justify-content:center;margin:0 auto;display:flex;justify-content:space-between;gap:0.2rem}.colors{border-style:solid;border-width:0.05rem;text-align:center;width:3.5rem;height:3.5rem;display:inline-block;box-shadow:0 0.15rem 0.5rem rgba(0,0,0,1)}#green,#demogreen{background:green}#red{background:red}#black{background:rgb(29,29,29)}#yellow{background:yellow}#blue{background:blue}#white{background:white}#orange{background:rgb(255,123,0)}.modal{justify-content:center;align-items:center;display:none;position:fixed;z-index:100;padding-top:1rem;padding-bottom:1rem;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}.modal-content{position:relative;background-color:white;margin:auto;padding:0;border:0.05rem solid #888;width:25rem;box-shadow:0 0.2rem 0.4rem 0 rgba(0,0,0,0.2),0 0.3rem 1rem 0 rgba(0,0,0,0.19);-webkit-animation-name:animatetop;-webkit-animation-duration:0.4s;animation-name:animatetop;animation-duration:0.4s}@-webkit-keyframes animatetop{from{top:-15rem;opacity:0}to{top:0;opacity:1}}@keyframes animatetop{from{top:-15rem;opacity:0}to{top:0;opacity:1}}.close{font-size:1.4rem;font-weight:bold;position:absolute;top:0;right:0.5rem}.modal-header{text-align:center;font-weight:bold}.modalheadertext{letter-spacing:0.05rem;margin:0;padding:0.75rem}.modal-body{border-top:0.05rem solid grey;padding-bottom:1rem}#settingsmodalbody{padding-left:1rem;padding-right:1rem;padding-top:0.5rem;padding-bottom:0.5rem;text-align:center}#howtomodalbody{padding-left:1rem;padding-right:1rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.9rem;text-align:left}.colorchange{-webkit-animation:colorchange 10s infinite;animation:colorchange 10s infinite;font-weight:bold}@-webkit-keyframes colorchange{0%{color:red}20%{color:rgb(255,123,0)}40%{color:rgb(255,209,4)}60%{color:green}80%{color:rgb(56,56,255)}100%{color:red}}@keyframes colorchange{0%{color:red}20%{color:rgb(255,123,0)}40%{color:rgb(255,209,4)}60%{color:green}80%{color:rgb(56,56,255)}100%{color:red}}.flaggletext{position:relative;display:inline-block;background:linear-gradient(to bottom,#0066cc 0%,#0066cc 50%,#ffcc00 50%,#ffcc00 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.wavy span{position:relative;display:inline-block;font-size:2em}.switch{position:relative;display:inline-block;width:2.3rem;height:1.3rem}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ccc}.slider:before{position:absolute;content:"";height:0.9rem;width:0.9rem;left:0.2rem;bottom:0.2rem;background-color:white}.slider.round{border-radius:0.65rem}.slider.round:before{border-radius:50%}.settingsfont{font-weight:bolder}.settingsdivs{display:flex;justify-content:space-between;vertical-align:baseline;padding-bottom:1rem;border-bottom:0.05rem solid grey}#darktheme{padding-top:1rem}#statsmodalbody{text-align:center;justify-content:center}#statsdisplay{display:inline-block;width:100%;height:6.5rem;margin-bottom:0.75rem}.statstab{display:inline-table;width:3.5rem;text-align:center;margin-left:0.25rem;margin-right:0.25rem;height:5rem}.statstext{font-size:2.25rem;font-weight:bold}.statsdesc{font-size:0.8rem;line-height:0.9rem}#gamediv{margin:0 auto;margin-top:0.5rem;padding-bottom:4.5rem;width:26rem;text-align:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:stretch;align-content:stretch}#choices{text-align:center;display:flex;flex-grow:1;flex-wrap:wrap;justify-content:space-between;margin:0.5rem auto;padding:0.1rem;gap:0.35rem 0.25rem}#guesses{border:none;background-color:rgba(216,216,216,0);height:1.2rem;width:auto;margin:0.3rem 0 0;padding:0.1rem;vertical-align:middle;box-shadow:0 0.15rem 0.25rem rgba(0,0,0,0);position:relative}.displaybuttons{font-size:1.1rem;color:white;height:2.7rem;width:7rem;padding:0.375rem;border:0.1rem solid rgb(132,132,220);background-color:rgb(132,132,220);box-shadow:0rem 0.15rem 0.25rem rgba(0,0,0,0.5);position:relative}#gamediv .displaybuttons{margin-top:0.25rem}#drchoice{width:15rem;height:2rem;margin:0 auto;display:inline-flex;margin-top:1.5rem;margin-bottom:0.5rem}#drchoiceleft{border-right-width:0.05rem}#drchoiceright{border-left-width:0.05rem}#drchoiceleft,#drchoiceright{width:50%;height:2rem;background-color:rgb(133,133,133);border:0.1rem solid rgb(121,121,121)}.statsmodetext{line-height:1.75rem;font-size:0.9rem;color:white}#gameresults-content{text-align:center;padding-bottom:1rem}#flagglepic{width:23rem;height:12rem;-o-object-fit:contain;object-fit:contain;-webkit-filter:drop-shadow(0 0 0.2rem rgba(0,0,0,0.5));filter:drop-shadow(0 0 0.2rem rgba(0,0,0,0.5));margin-top:1rem}#flaggleresultsdata{margin-bottom:1rem}.modalfooter{width:100%;margin:0 auto;height:3.9rem;display:inline-flex}.dailycountdowntext{font-weight:bold;letter-spacing:0.1rem;font-size:1.5rem}.footerhalf{display:flex;width:50%;flex-direction:column;justify-content:center;height:100%;vertical-align:middle;padding-right:auto;padding-left:auto;text-align:center}#footerleft{border-right:0.1rem solid grey}#sharebutton,#sharebuttonstat{margin:auto;font-weight:bold;font-size:1.25rem}#middlediv{width:8rem;position:-webkit-sticky;position:sticky;top:0.5rem;z-index:5;background:rgb(245,245,245);border:none;color:black;box-shadow:0 0.15rem 0.35rem rgba(0,0,0,0.25);padding:0 0 0.4rem}#drnotiftext{font-size:0.85rem;font-weight:bold;letter-spacing:0.1rem}#dailyflaggle{margin-left:0.5rem}#randomflaggle{margin-right:0.5rem}#disclaimer{justify-content:left;text-align:left;margin-top:1rem;border-bottom:0.05rem solid grey}#disctext{font-size:0.8rem}.textlink{font-style:none;color:rgb(132,132,220);font-weight:bold;-webkit-text-decoration:none;text-decoration:none}#about{justify-content:center;text-align:center;font-size:0.65rem;margin-top:0.5rem}#minidiff{font-size:0.75rem;opacity:0.8}#disctextnosue{font-size:0.6rem;opacity:0.1}.hmslider{-webkit-appearance:none;width:100%;height:0.5rem;border-radius:0.25rem;background:rgb(132,132,220);outline:none}.hmslider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.25rem;height:1.25rem;border-radius:50%;background:white;border:0.05rem solid rgba(0,0,0,0.2);box-shadow:0 0 0.4rem 0 rgba(0,0,0,0.2)}.hmslider::-moz-range-thumb{width:1.25rem;height:1.25rem;border-radius:50%;background:white;border:0.05rem solid rgba(0,0,0,0.2);box-shadow:0 0 0.4rem 0 rgba(0,0,0,0.2)}.settingsdivsdiff{display:flex;justify-content:space-between;vertical-align:baseline;padding-bottom:1rem}#demokeyscontainer{width:100%;text-align:center;align-content:center}#democolorkeys{width:47%;align-items:center;justify-content:center;margin:0 auto;display:flex;justify-content:space-between;margin-top:1rem;gap:0.2rem}.democolors{border-style:solid;border-width:0.1rem;text-align:center;width:3.5rem;height:3.5rem;display:inline-block;box-shadow:0 0.15rem 0.5rem rgba(0,0,0,0.75)}.demotext{width:50%}#demodiv{display:flex;width:100%}#demoorange{background:rgb(255,123,0);opacity:0.1;transform:scale(0.9);border-width:0.05rem;box-shadow:0 0 0 rgba(0,0,0,0);transform:scale(0.9)}#demoyellow{background:yellow}#demogreen{background:green;border-width:0.05rem;box-shadow:0 0 0 rgba(0,0,0,0);transform:scale(0.9)}#textorange{color:rgb(255,123,0)}#textgreen{color:green}.buildinfo{opacity:0.5;margin-top:0.5rem;display:inline-block;font:0.5rem}