:root {
--hover:#faffff;
--light:#fafaff;
--subtle-bg: #E9EEF9; /* Global variable */
--dark-bg: #4A5DB5; /* Global variable */
--paddingSpace:10%;
--sliderWidth: 36px;
--sliderHeight: 15px;
--shadow:.5rem .5rem 1rem hsl(0 0% 50% / .5);
--smallShadow:.15rem .15rem 0.3rem hsl(0 0% 50% / .5);
--leftMenuWidth: 300px;
--txtColor: #4b5563;
}
*, *::before, *::after {box-sizing: border-box;}
html {margin:0;height:100%;scroll-padding-top: 100px;}
body{margin:0;padding:0px;font-weight: 400; font-size: 1rem; font-family: Arial, Helvetica, sans-serif; letter-spacing:0.05rem;background-color: #f7f4fb;overflow-x:hidden;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239050f5' fill-opacity='0.2'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
h1{font-size: 25px;line-height: 38px;}
h2{font-size: 22px;line-height: 30px;}
h3{font-size: 18px;line-height: 22px;}
h4{font-size: 16px;line-height: 20px;}
textarea{resize: none;width:100%;}
header{width:100%;}
/* header section */
.Header{background-color: var(--subtle-bg);}
.Logo{ text-align: center; color: var(--dark-bg); cursor: pointer; font-family: Arial, Verdana, sans-serif; font-size: clamp(24px, 8vw, 45px);font-weight: 800; text-shadow: 2px 2px 2px rgba(0,0,0,0.5), 4px 4px 2px rgba(0,0,0,0.25); -webkit-text-stroke: 1px white;}
.StickyMenu{box-shadow: 0px 6px 5px 1px rgba(80,80,80,0.6);width:100%;position:sticky;top:0px;z-index: 25;margin-bottom:20px; background-color: var(--subtle-bg); display: flex; justify-content: center; flex-wrap: wrap; gap:15px; padding:10px; }
button.neumorphic { --shadow:-.5rem -.5rem 1rem hsl(0 0% 100% / .75),.5rem .5rem 1rem hsl(0 0% 50% / .5); min-width: 125px; border: 0.25rem solid transparent;border-radius: 1rem; color: hsl(0 0% 10%); background: none; display: grid; place-content: center; gap: 1rem; box-shadow: var(--shadow); outline: none; transition: all 0.1s;height:24px;font-size: 16px;font-weight: bold;text-decoration: none;color: var(--dark-bg);}
button.neumorphic:hover {transform: scale(1.1);}
button.neumorphic.active {box-shadow: var(--shadow), inset .5rem .5rem 1rem hsl(0 0% 50% / .5), inset -.5rem -.5rem 1rem hsl(0 0% 100% / .75);color:black;}
.neumorphic {--shadow: -.5rem -.5rem 1rem hsl(0 0% 100% / .75), .5rem .5rem 1rem hsl(0 0% 50% / .5); display:grid; font-size: 16px; font-weight: bold; min-width:125px; text-decoration: none; place-content: center; gap: 1rem; height:26px; cursor: pointer; box-shadow: 6px 6px 12px #b8b8b8, -6px -6px 12px #ffffff; border: 0.25rem solid transparent; border-radius: 1rem; color: var(--dark-bg);transition: all 0.3s ease;}
.neumorphic:hover {transform: scale(1.1);}
.neumorphic.active {box-shadow: var(--shadow), inset .5rem .5rem 1rem hsl(0 0% 50% / .5), inset -.5rem -.5rem 1rem hsl(0 0% 100% / .75); color:black;}
.skip-link {display: block; width: fit-content; padding: 2px 16px; background-color: #004EC7; color: white; text-decoration: none; border-radius: 5px; margin: 10px 20px; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; text-align: center; cursor: pointer;}
/* Optional: Add a subtle animation on hover */
.skip-link:hover {background-color: #003a95;transform: translateY(-1px);}
.OptionDiv{display: flex; flex-direction: row; flex-wrap:wrap; margin-bottom: 10px; justify-content: space-between; padding-left: 10px;height:25px}
.searchBox {position:relative; display:flex;gap:10px;height:100%;align-items: center;}
#countries{ display:flex;flex:1; justify-content: flex-end; height:100%;}
#countryList {padding:0;}
#countryList li {margin: 1px; padding: 0; list-style: none;}
#countryList li, #countryList a {height: 14px;width:22px;display: block;}
#userBox{display:flex; flex:1;gap:0 10px;height:100%;min-width:320px;}
.breadcrumbs {font-size: 14px; font-family: system-ui, sans-serif; color: #555; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; margin: 0.2em 0;}
.breadcrumbs a {color: #007acc; text-decoration: none; transition: color 0.2s ease;}
.breadcrumbs a:hover {color: #005f99; text-decoration: underline;}
.breadcrumbs .current {color: #999;font-weight: bold;}
.breadcrumbs span {user-select: none;}
/* menu section*/
.LeftMenu{width:var(--leftMenuWidth); position: relative;display:flex;flex-direction: column;gap:1px;margin-left:10px;z-index:1;}
.LeftMenu h2{margin:0;background-color: white;font-size:16px;}
.LeftMenu h3 a{width:100%;padding-left:5px;}
.LeftMenu >ul{padding: 0 0 0 10px; margin: 0;}
.LeftMenu li{margin-bottom:2px;list-style: none;}
.LeftMenu a{text-decoration: none;color:black;font-size:14px;}
.MenuUl{margin:0;padding:0 0 0 10px; margin-bottom:15px; box-shadow: var(--smallShadow);}
.expandLi{background-color:var(--subtle-bg); border: 1px solid #999;font-size: 16px;line-height: 23px;border-radius: 4px;text-align: left;list-style: none;width:100%;}
.expandLi a {display: inline-block;padding-left:10px;transition: transform 0.25s ease;transform-origin: left center;width:100%;}
.expandLi >a{font-weight: bold;}
.expandLi ul li:not(.active) a:hover{transform: scale(1.2, 1.1);}
.expandLi li.active > a { color: black; font-weight: bold;}
.expandLi a.active { color: black; font-weight: bold;}
.expandLi.active { color: black; text-align: center; font-weight: bold;}
.expandLi:not(.active) a:hover{transform: scale(1.2, 1.1);}
.expandUl{background-color: white;padding:0 0 0 30px;}
.expandUl li > a{display:block;width:100%;outline:none;}
.MenuLi{background-color:var(--subtle-bg); border: 1px solid #999;font-size: 16px;line-height: 23px;border-radius: 4px;text-align: left;list-style: none;width:100%;cursor:pointer;}
.MenuLi:hover{ background-color:var(--hover);}
.MenuLi:hover a{transform: scale(1.2, 1.1); }
.MenuLi.active{text-align:right;padding-right:25px;}
.MenuLi.active:hover a{text-align:right;color:red;transform: none;}
.MenuLi a{text-decoration:none;font-size: 13px;line-height:13px;color:black;display:inline-block;transition: transform 0.25s ease;transform-origin: left center;padding-left:25px;width:100%;}
.MenuCat{display:flex;align-items: center;gap:20px; background-color:var(--dark-bg);margin:0px; border: 1px solid #999;font-size: 16px;height: 27px;font-weight: 600;padding-left: 6px;color: white;border-radius: 6px;}
.MenuCat a{color:white;}
.Topic{font-weight: 600;margin-left:15px;}
.SubItem{margin-left:25px;}
.Spanish{background-image: linear-gradient(#f77, #ffffac, #ffffac,#f77);}
/* social media */
.share-container {background-color: #ffffff;padding: 10px;border-radius: 10px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-align: center; margin-bottom: 15px;}
.share-buttons {width:350px; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;}
.share-button {display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; color: white !important;
cursor: pointer; text-decoration: none; transition: background-color 0.3s ease, transform 0.2s ease; min-width: 125px; padding:10px 10px; height:30px;}
.share-button.facebook { background-color: #1877F2; }
.share-button.twitter { background-color: #1DA1F2; }
.share-button.linkedin { background-color: #0A66C2; }
.share-button.pinterest { background-color: #E60023; }
.share-button.whatsapp { background-color: #25D366; }
.share-button.email { background-color: #777777; } /* A general gray for email */
.share-button:hover {opacity: 0.9; transform: translateY(-2px);}
.share-button:active {transform: translateY(0);}
/* Basic icon styling (you'd typically use Font Awesome or similar) */
.share-button::before {content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 8px; background-size: contain; background-repeat: no-repeat; background-position: center;}
.share-button.facebook::before { background-image: url('data:image/svg+xml;utf8,'); }
.share-button.twitter::before { background-image: url('data:image/svg+xml;utf8,'); }
.share-button.linkedin::before { background-image: url('data:image/svg+xml;utf8,'); }
.share-button.pinterest::before { background-image: url('data:image/svg+xml;utf8,'); }
.share-button.whatsapp::before { background-image: url('data:image/svg+xml;utf8,'); }
.share-button.email::before { background-image: url('data:image/svg+xml;utf8,'); }
#social{display: flex;justify-content: center;margin-bottom:20px; height: fit-content;width:100%;}
.btn-facebook {color: #FFF;background-color: #3B5998;border-color: #344E86;}
.btn-twitter {color: #FFF;background-color: #5a0;border-color: #344E86;}
.btn-google {color: #FFF;background-color: #e93f2e;border-color: #344E86;}
.btn-pinterest {color: #FFF;background-color: #b81621;border-color: #344E86;}
.btn-reddit {color: #FFF;background-color: #673f12;border-color: #344E86;}
.btn {width:110px;height:20px;text-decoration: none;display: block;margin-bottom: 5px;font-weight: 400;text-align: center;cursor: pointer;border: 1px solid transparent;white-space: nowrap;color: #FFF;border-radius: 3px;padding-top: 1px;padding-bottom: 1px;}
.paypal-btn{float:left;position: relative; width:92px;height:26px;}
.paypal-top{position: absolute;border-radius:25px; background-image: linear-gradient(#FEBB50,#FFAD2F, #FFEFD2);width:100%;height:100%}
.paypal-bottom{position: absolute;border-radius:25px; background-image: linear-gradient(#FFF9EE, #FEDE9E);width:88px;height:60%;left:2px;}
.paypal-txt{position: relative; width:100%;height:100%;line-height:26px;text-align: center;color:black;font-size:18px;font-weight:400;cursor:pointer;font-style: italic;}
.Donate{text-align:center;font-size:18px;color:black;width:285px;height:95px;padding:5px;background-color:var(--subtle-bg);border-radius:10px;border:1px solid #88F;box-shadow:2px 2px #999;}
/*special switches*/
input[name="paperSize"] {opacity: 0;position: absolute;width: 0;height: 0;} /*remove the circle of the radiobutton for selecting the paperformat*/
.switch {position: relative; display: inline-block; width: calc(var(--sliderWidth)); height: calc(var(--sliderHeight) + 2px);}
.switch input {opacity: 0; width: 0; height: 0;}/* Hide the default checkbox */
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #f99; transition: 0.4s; border-radius: calc(var(--sliderHeight) + 2px);}/* The slider */
.slider:before {position: absolute; content: ""; height: var(--sliderHeight); width: var(--sliderHeight); left: 1px; bottom: 1px; background-color: white; transition: 0.4s; border-radius: 50%;}/* The slider */
.switch input:checked + .slider {background-color: green;}/* When checked, change background color */
.switch input:checked + .slider:before {transform: translateX( calc(var(--sliderWidth) - var(--sliderHeight) - 2px));}/* Move the circle to the right when checked */
/*grid*/
.Grid{ --readOnlyColor:#999; line-height: 1; width: 100%; border-collapse: collapse; padding: 0px; margin: 0px; color: black; font-size:15px;}
.Grid tbody .Header{background-color:var(--subtle-bg);}
.Grid tbody td{border:1px solid rgb(47, 47, 49);padding:0px;background-color: white;}
.Grid tbody td .ReadOnly{background-color: unset; color: var(--readOnlyColor);}
.Grid tbody td .Normal{background-color: unset; color:#000;}
.BannerAd{display:block;width:100%;text-align: center; min-height:280px;height:auto;margin-bottom:15px;}
.Aside{flex:1;}
.AdsCol{width:300px;height:auto;position: relative;}
.termsUse{background-color: var(--light);line-height: 1.5;}
.termsUse h3{line-height: 1.5;}
.termsUse ol{display:flex;flex-wrap:wrap;margin:0}
.termsUse li{flex-basis: 50%;padding-right:20px;padding-bottom:10px;}
.termsUse div{line-height: 1.4;padding:15px;}
.FAQ{display:flex; flex-wrap:wrap;margin-bottom:15px;gap:0 15px;}
.FAQ h2{flex-basis: 100%;}
.FAQ h3{flex-basis: 100%;}
.FAQ details{width: 49%;}
.FAQ summary{cursor: pointer;font-weight:600}
.related-links-container {width: 100%;}
.links-header {color: #333;width:100%}
.links-list {list-style: none; margin: 0; padding: 0 5px 8px 5px; display: flex; flex-wrap: wrap; gap: 15px; flex-basis:100%;}
.link-item {flex-grow: 1; flex-basis: 200px; border-radius: 8px; border: 1px solid #e0e0e0; transition: all 0.3s ease; background-color: lemonchiffon; text-align: center;}
.link-item:hover {transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); border-color: #007bff;}
.link-item a {text-decoration: none; color: #007bff; font-weight: 600; display: block;}
.link-item a:hover {text-decoration: underline;}
.jumpStartdiv { display: flex; width: 100%; align-items: center; justify-content: center;}
.MainDiv{display:flex;height:auto;align-items: flex-start;}
.GameArea{display:flex;flex-wrap:wrap;justify-content: center;width:100%;padding: 0 20px 1px 10px;margin-bottom:15px;min-height:400px;height:auto;}
.Intro{display:flex;flex-wrap:wrap;width:100%;max-width:1070px;background-color: var(--light);margin-bottom: 15px; box-shadow: var(--shadow);}
.GameSettings{background-color: white; display: flex; gap: 15px 15px; margin-bottom:15px;justify-content: center; flex-wrap: wrap; margin-left: auto; margin-right: auto;border-radius: 0.5rem;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);width:97%;border-radius: 0.5rem;padding-bottom:0.75rem;}
.DescText{margin-left:auto;margin-right:auto;margin-bottom:20px;line-height: 1.4;display: flex; flex-wrap: wrap; padding: 1.5rem;border-radius: 0.5rem; width:97%; color:var(--txtColor); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border: 1px solid #e0e7ff;background-color: #fff;}
.DescText h2{margin:0 0 0.5rem 0; width:100%; font-size: 1.5rem; font-weight: 700; color:var(--dark-bg);}
.DescText h3{margin:1.5rem 0 0.5rem 0; width:100%; font-size: 1.25rem; font-weight: 600; color: #4f46e5;}
.DescText h4{margin:0 0 10px 0; width:100%;font-size: 1.15rem; font-weight: 500; color: #4f46e5;}
.DescText p, .DescText ul { color: #4b5563; margin-bottom: 1rem;}
.DescText a {color: #2563eb; text-decoration: none; font-weight: 500; transition: color 0.15s ease; }
.DescText a:hover { color: #030f38ff; }
.Border{border:1px gray solid;}
.action_div{margin-left:auto;margin-right:auto;margin-bottom:10px;line-height: 1.4;display: flex; flex-wrap: wrap; gap: 10px 10px; padding: 0.5rem;border-radius: 0.5rem; width:97%; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border: 1px solid #e0e7ff;background-color: #fff; color:var(--txtColor);}
.action_div p{margin:0 0 10px 0; }
.action_header{color: var(--dark-bg);font-size:1.25em; font-weight:700; margin-bottom:10px;}
.action-button {display: inline-flex; align-items: center; justify-content: center; padding: 10px 32px; margin: 0 auto 10px auto; font-size: 18px; font-weight: bold; color: #ffffff !important; background-color: #008000; border: none; border-radius: 12px; cursor: pointer; box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4); transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; text-decoration: none;}
.action-button:hover {background-color: #40a040; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.6);}
.action-button:active {background-color: #1e40af; transform: translateY(0); box-shadow: 0 4px 10px rgba(30, 64, 175, 0.4);}
.puzzle-trigger{width:100%;text-align: left; border:0; background-color: inherit;padding-bottom:3px; font-size: 1rem; cursor: pointer;}
.puzzle-trigger:hover{font-weight:bold;}
.cards {margin:0; padding:0; width:100%;display:flex;gap:2rem;flex-wrap: wrap; justify-content: center;}
.card, .card-static {border:1px solid #e0e0e0; background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); max-width:500px; overflow: hidden; flex: 1 1 400px; /* Card grows and shrinks, but minimum width is 300px */
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; text-decoration: none; color: inherit; display:flex; flex-wrap:wrap;flex-direction: column;}
.full-width{width:98%; max-width:unset;margin:0 auto 15px auto;}
.card a{color:inherit;}
.card:hover {transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);}
.card-header {padding: 10px 2px; text-align: center; color: #ffffff; border-top-left-radius: 12px; border-top-right-radius: 12px;}
.card-header h2, .card-header h3, .card-header h4{margin: 0; font-size: 1.2rem; font-weight: 600;color:white;}
.card-content {margin: 0; color: #4a4a4a;line-height: 1.4;padding:10px;flex-grow: 1;text-align: left;}
.card-content p{margin:0;}
.card-content h3{margin:1rem 0 5px 0;color: #4f46e5;}
.card-link {display: inline-block; padding: 0.75rem 1.5rem; background-color: #2563eb; color: #ffffff; border-radius: 9999px; text-decoration: none; font-weight: 600; transition: background-color 0.3s ease-in-out;}
.card-link:hover {background-color: #1d4ed8;}
.blackTxt{color:black;}
/* The call-to-action link at the bottom of the card */
.card-cta { display: block; text-align: center; padding: 1rem; background-color: #2563eb; /* A darker shade of blue for contrast */ color: #fff; font-weight: bold; text-decoration: none; transition: background-color 0.3s ease-in-out; margin: 1.5rem; /* Add margin to separate it from content */ border-radius: 8px;}
.card-cta:hover { background-color: #1d4ed8;}
/* Header Color Variations */
.card-header.bg-blue { background-color:var(--dark-bg);}
.card-header.bg-green {background-color: #10b981;}
.card-header.bg-purple {background-color: #8b5cf6;}
.cta{display:flex;gap:.75rem;flex-wrap:wrap;margin:0 0 20px 0;}
.btn{display:inline-block;background:blue ;color:#fff;padding:.25rem 1rem;border-radius:.75rem;font-weight:600;width:fit-content;height: fit-content;}
.btn.alt{background:green}
.canvasA4 {width:400px;height:600px;border:1px solid gray}
.LeftCol{width:290px;height:600px;margin:0px;display:flex;justify-content: space-between;flex-wrap: wrap;flex-direction: column; gap:10px 0;overflow-x: hidden;}
.RightCol{width:300px;height:600px;margin:0px;display:flex;justify-content: space-between;flex-direction: column; flex-wrap: wrap;}
.RightColHor{width: 100%; height: 275px; margin: 0; display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap; align-items: center;}
.GameBoard{display: block; margin-top: 25px; padding: 0px; width: fit-content; margin-left: auto; margin-right: auto;border:1px solid #ddd;box-shadow: rgba(0, 0, 0, 0.25) 1px 1px, rgba(0, 0, 0, 0.15) 2px 2px;margin-bottom:15px;background-color: #F7F7F7;}
.PageTitle{flex-basis: 100%;text-align: center; background-color: var(--dark-bg); color:white;margin:0 0 10px 0;}
.SectionTitle{flex-basis: 100%;text-align: center; background-color: var(--dark-bg); color:white !important; padding:0.5rem 0 !important; margin:0 !important; border-radius: 0.5rem 0.5rem 0 0; }
.ControlButDiv{height:fit-content; border-radius: 5px;padding:2px; padding-bottom:0px;background-color:white;width:100%; max-width: 300px;}
.GameButton{border:1px #444 solid;border-radius:5px;box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 3px; width:100%;height: 35px;margin-bottom: 5px;font-size:18px;cursor:pointer;padding:0px; background-color:var(--subtle-bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.GameButton:hover{background-color:var(--hover);box-shadow: rgba(0, 0, 0, 0.45) 0px 5px 5px;}
.GameButton.active{padding-top:2px;padding-left:2px}
.gameBlockContainer {
display: flex;
flex-wrap:wrap;
width: 90%;
min-width:1340px;
margin: 0 auto;
justify-content: center;
background-color: #f6f6ff; box-shadow: var(--shadow); gap:10px;padding-bottom:20px;}
.gameBlockContainer h2{line-height: 42px;margin-bottom:20px;}
.GameBlock{--radius:10px;position:relative;width:430px;min-height:300px;background-color:var(--subtle-bg);text-decoration: none; color: black; border:1px solid black;border-radius:var(--radius);box-shadow:1px 1px 1px 2px rgba(80,80,80,0.35),3px 3px 2px 2px rgba(80,80,80,0.2);transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;}
.GameBlock:hover{transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);}
.GameBlock a {text-decoration:none;color:black;width:100%;line-height:30px;}
.GameBlock h3 {background-color:var(--dark-bg);margin-top:0px;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);line-height:40px;color:var(--subtle-bg);text-align:center;font-size:23px;}
.GameBlock .Content{padding: 0px 10px 40px 10px;min-height:300px;line-height: 1.25;}
.GameBlock .Content img{float:left;margin: 0px 10px 5px 0px;border: 1px solid gray;}
.GameBlock .bottom{display:block;position:absolute;bottom:0px;background-color:var(--dark-bg);color:var(--subtle-bg);width:100%;margin:0px;padding:0px;border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);text-align: center;}
/*user puzzle box*/
.puzzleBox{display: flex;width: 99%; background-color:var(--light); margin: 0 auto 20px auto; flex-wrap: wrap; justify-content: center;gap:15px; box-shadow: var(--shadow);}
.puzzleBox h2{flex-basis: 100%;background-color: var(--subtle-bg);margin-top:0px; text-align: center;}
.puzzleBox ul{display:flex;flex-basis: 100%;gap:5px 10px;flex-wrap:wrap;margin:0;justify-content:stretch;margin-bottom:15px;}
.puzzleBox li{width:200px;list-style: none;text-indent: -4px;margin-right:15px;}
.puzzleBox li a{cursor: pointer;}
.puzzleBox li a:hover{color:blue;text-decoration: underline;}
.PuzzleListFlex{display:flex;;align-items: flex-start;flex-wrap: wrap;gap:10px;}
.PuzzleListFlex li{text-decoration: none;cursor:pointer;list-style: none;}
.PuzzleSelector {text-decoration:none;cursor:pointer;color:blue;}
.PuzzleSelector:hover {text-decoration: underline;font-weight: 600;}
.PuzzleDiv{width:99%; border-radius:6px; padding:20px;border: 1px solid gray;margin-left:auto;margin-right:auto;background-color: var(--light); margin:10px;}
.PuzzleBoxContainer{display:flex;justify-content:space-evenly;align-items: flex-start;flex-wrap: wrap;gap:20px 10px;}
.PuzzleBoxHeader {background-color:var(--subtle-bg); border-top-left-radius:5px;border-top-right-radius:5px; border: 1px solid gray;border-bottom: 0px;text-align:center;font-weight: bold;padding:5px;}
.PuzzleBoxContent {width:200px;height:240px;overflow:auto; background-color: white; border-left: 1px solid gray; border-right: 1px solid gray;}
.PuzzleBlock{width:200px;background-color:var(--subtle-bg);border:1px solid black;border-radius:var(--radius);box-shadow:1px 1px 1px 1px rgba(80,80,80,0.5),3px 3px 2px 2px rgba(80,80,80,0.25);
--radius:10px;padding:0px; margin:0px;
}
.PuzzleBlock h3 {background-color:var(--dark-bg);margin:0px;color:white;text-align:center;padding:0px;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);}
.PuzzleBlock ul{list-style-type: none; margin: 0px; padding-left: 5px; padding-top:5px;height:240px; overflow-y:auto; overflow-x:hidden;margin-bottom:var(--radius)}
.PuzzleBlock ul li{text-indent:-15px; padding-left:15px;}
.PuzzleBlock ul li a{text-decoration:none;cursor:pointer;color:#222}
.PuzzleBlock ul li a:hover{font-weight: bold;}
/*footer*/
.Footer{display:flex;justify-content: space-between; min-height: 40px; padding-left: 15px; padding-right: 15px;background-color: var(--dark-bg);}
.FooterButton{color:white;text-decoration: none;margin-top:auto;margin-bottom:auto;}
.pinInterestFooter{padding-left:35px;padding-top:6px;color:white;}
.contact{width:100px;height:25px;margin-left: auto;margin-right: auto; border-left: 2px solid #FFFFFF;border-right: 2px solid #FFFFFF;text-align: center;padding-top:5px}
.consent{display:none;flex-wrap:wrap; justify-content: center; background-color: #E9EEF9;padding:5px 10px; position: fixed; bottom: 0; left:50%; transform:translateX(-50%); text-align: left; z-index: 1000;border-radius:10px 10px 0 0; border:1px solid black; padding:5px 10px;width:513px;}
/* lazyloading images*/
.card-logo {width:175px; height:auto; }
.lazy-image {transition: opacity 0.5s ease-in-out; /* Initially set opacity to 0 to prevent FOUC */opacity: 0;}
/* When the image is loaded, fade it in */
.lazy-image.loaded {opacity: 1;}
@media screen and (max-width:1536px) {
.LeftMenu{min-width:255px;}
.GameArea{padding-right:10px;}
.GameSettings{max-width:1042px;}
.GameBlock{width:345px;}
.gameBlockContainer{min-width:99%;width:99%;}
}
@media screen and (max-width:1366px) {
.LeftMenu{min-width:255px;}
.GameArea{padding-right:10px;}
.Aside{display:none;}
}
@media screen and (max-width:1280px) {
.AdsCol{width:100%;min-height:250px;}
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* CSS rules for tablets in portrait mode */
.searchBox{display:none;}
.LeftCol{height:fit-content;}
.AdsCol{width:100%;}
.termsUse li{flex-basis: unset;padding-right:10px;}
}
@media only screen and (min-width: 800px) and (max-width: 1100px) and (orientation: landscape) {
/* CSS rules for tablets in landscape mode */
.AdsCol{width:100%;}
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
/* mobile portrait styles */
.hamburger {position:absolute; top: -30px; right: -30px; width: 15px; height: 15px; cursor: pointer; z-index: 1001; display: flex; flex-direction: column; justify-content: space-between;}
/* Hamburger lines */
.hamburger div {background-color: #333;height: 2px;border-radius: 2px; }
.LeftMenu.active{left:-10px; background-color: white;}
.hamburger.active{left:10px;right:unset;}
.StickyMenu{position: unset;}
#social{width:100%;}
.Aside{display:none;}
.searchBox{display:none;}
.OptionDiv{ margin-bottom: 10px; height:55px;}
#countryList {margin:10px 0 0 0;}
#countries{ flex-basis:100%;}
#userBox{height:fit-content;}
.LeftMenu{position: absolute;left:calc(var(--leftMenuWidth) * -1 - 10px);transition: left 0.3s ease;}
.consent{width:100%;}
.GameArea{padding:0;}
.Aside{display:none;}
.DescText{margin-left:5px;margin-right:5px;}
.LeftCol{width:100%;height:fit-content;padding: 0 20px;}
.RightCol{width:100%;height:fit-content;}
.RightColHor{height: fit-content;}
.AdsCol{width:100%;}
.termsUse ol{padding:0}
.termsUse li{flex-basis: unset;padding-right:10px;list-style: none;}
.termsUse div{padding:5px;}
.Footer{display:none;}
.canvasA4{width:100%;}
.GameSettings{width:100%;}
.gameBlockContainer { width: 99%; min-width:95%;}
.GameBlock{width:99%;}
.ControlButDiv{width:100%;}
.share-button {padding:5px 5px;min-width:100px;width:100px;}
.share-container {width:100%;}
.share-buttons{gap:10px;width:unset;}
.FAQ details{width:100%;}
.half {flex-basis:99%;}
.ControlButDiv{width:98%;max-width: unset;;}
}
@media only screen and (max-width: 799px) and (orientation: landscape) {
/* mobile landscape styles */
.Aside{display:none;}
.searchBox{display:none;}
.consent{width:100%;}
.AdsCol{width:100%;}
.termsUse ol{padding:0}
.termsUse li{flex-basis: unset;padding-right:10px;list-style: none;}
.termsUse div{padding:5px;}
.DescText{margin-left:5px;margin-right:5px;}
.Footer{display:none;}
.gameBlockContainer { width: 99%; min-width:95%;}
}