body 
  {
    background-color: rgb(0, 255, 255);
    background-size: cover;
  }

/* ===== Background picker (Settings) ===== */

/* Option 1: Classic — the original bee/flower artwork (default) */
body.bee-bg-1 {
  background-image: url("../BeeBkgrd.jpg");
}

/* Option 2: Subtle — a soft cream-to-honey gradient, no image */
body.bee-bg-2 {
  background-image: linear-gradient(135deg, #fffdf5 0%, #fff3d6 50%, #ffe9b8 100%);
}

/* Option 3: Honeycomb — a pure-CSS hexagon lattice pattern, no image */
body.bee-bg-3 {
  background-image: none;
  background-color: #fffbe9;
  background-image:
    linear-gradient(30deg, #f5deb355 12%, transparent 12.5%, transparent 87%, #f5deb355 87.5%, #f5deb355),
    linear-gradient(150deg, #f5deb355 12%, transparent 12.5%, transparent 87%, #f5deb355 87.5%, #f5deb355),
    linear-gradient(30deg, #f5deb355 12%, transparent 12.5%, transparent 87%, #f5deb355 87.5%, #f5deb355),
    linear-gradient(150deg, #f5deb355 12%, transparent 12.5%, transparent 87%, #f5deb355 87.5%, #f5deb355),
    linear-gradient(60deg, #f5deb333 25%, transparent 25.5%, transparent 75%, #f5deb333 75%, #f5deb333),
    linear-gradient(60deg, #f5deb333 25%, transparent 25.5%, transparent 75%, #f5deb333 75%, #f5deb333);
  background-size: 40px 70px;
  background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
}

/* Small preview swatches used on the Settings page */
.bee-bg-preview {
  display: inline-block;
  width: 90px;
  height: 60px;
  border: 3px solid #FF9900;
  border-radius: 10px;
  margin-right: 8px;
  vertical-align: middle;
  background-color: #fffeec;
}
.bee-bg-preview-1 { background-image: url("../BeeBkgrd.jpg"); background-size: cover; }
.bee-bg-preview-2 { background: linear-gradient(135deg, #fffdf5 0%, #fff3d6 50%, #ffe9b8 100%); }
.bee-bg-preview-3 {
  background-color: #fffbe9;
  background-image:
    linear-gradient(30deg, #f5deb355 12%, transparent 12.5%, transparent 87%, #f5deb355 87.5%, #f5deb355),
    linear-gradient(150deg, #f5deb355 12%, transparent 12.5%, transparent 87%, #f5deb355 87.5%, #f5deb355),
    linear-gradient(30deg, #f5deb355 12%, transparent 12.5%, transparent 87%, #f5deb355 87.5%, #f5deb355),
    linear-gradient(150deg, #f5deb355 12%, transparent 12.5%, transparent 87%, #f5deb355 87.5%, #f5deb355),
    linear-gradient(60deg, #f5deb333 25%, transparent 25.5%, transparent 75%, #f5deb333 75%, #f5deb333),
    linear-gradient(60deg, #f5deb333 25%, transparent 25.5%, transparent 75%, #f5deb333 75%, #f5deb333);
  background-size: 40px 70px;
  background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
}


.main {
  width: 10px;
  height: 10px;
  position: relative;
  z-index: 999;
  will-change: transform;
  animation-name: flying-bee;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-delay: 0s;
}


@keyframes flying-bee{
  0%   {transform:translateX(0);}

  25%  {transform:translateX(800px);}

  50%  {transform:translateX(800px);}

  75%  {transform:translateX(800px);}

  100% {transform:translateX(800px);}
}



/* Style The Dropdown Button */
.bee-logo-caption {
  font-size: 12px;
  font-weight: bold;
  color: #7a5900;
  text-align: center;
  margin-bottom: 3px;
}
.bee-logo-btn {
  padding: 3px !important;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bee-logo-img {
  height: 72px !important;
  width: auto !important;
  max-width: 110px !important;
  display: block;
}
.bee-logo-caret {
  font-size: 14px;
  color: #7a5900;
}
/* Toast notifications - fades in, holds briefly, fades out; never
   affects page layout since it's a fixed-position overlay. Used on
   the gameplay screen and can be reused on any page. */
.bee-toast {
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  background:#fffeec;
  border:4px solid #FF9900;
  border-radius:14px;
  padding:12px 20px;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  max-width:90%;
  z-index:10001;
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.bee-toast.bee-toast-visible { opacity:1; }
.dropbtn {
  background-color: #fffeec;
  color: black;
/*
  background-color: rgba(132,181,180,1);
  color: white;
  border: none;
*/
  padding: 16px;
  font-size: 16px;
  border: 5px solid #FF9900;
  border-radius: 16px;
  
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  
   border: 5px solid #FF9900;
 border-radius: 16px;
  
/*
background-color: rgba(231,231,231,1);
*/
  background-color: #fffeec;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 16px 2px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #FF9900

/*
.dropdown-content a:hover {background-color: #f1f1f1}
*/
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #FF9900;
  
/*
background-color: #33ffff;
*/
}

/* The logo button keeps its normal background on hover - just a
   subtle glow on its existing orange border, not a solid fill,
   since a full orange background clashes with the logo artwork. */
.dropdown:hover .bee-logo-btn {
  background-color: #fffeec !important;
  box-shadow: 0 0 6px 2px rgba(255, 153, 0, 0.6);
}

/* #################### THIS STYLES IPHONE 7, 8, ETC BOTH PORTRAIT AND LANDSCAPE ##################### */

.welcome-head{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 text-align: center;
 text-transform: none;
 top:150px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.welcome-paragh{
 position: relative;
 background-color: #fffeec;
/*  background-color: red;  */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top:150px; 
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.head-paragh{
 position: absolute;
 background-color: #fffeec;
/* background-color: blue;  */
 font-size: 24px;
 text-align: center;
 text-transform: none;
 top:20px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.sect1-paragh{
 position: absolute;
 background-color: #fffeec;
/*  background-color: blue; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect2-paragh{
 position: absolute;
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.sect3-paragh{
 position: relative;
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 40px;
 width:550px;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect4-paragh{
 position: relative; 
 top: 50px;
background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
} 

.lbs-divide{
 position: absolute; 
 top: 1200px;
 width:500px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
} 


.sect5-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
/* text-transform: none;  */
 top: 380px;
 width:800px; 
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.logoutbtn {
 position: relative;
 border:5px solid #FF9900; 
 border-radius:16px; 
 color:black;    
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 top:5px;
 margin-left: 150px;
 margin-right: 5px;
}

.lettershd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:250px;
 margin-left: 350px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.letters-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:320px;
 margin-left: 350px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontainhd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:250px;
 margin-left: 500px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontain-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:330px;
 margin-left: 500px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.bgcreatd {
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin: 20px 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.bgblvl-wrap {
 background-color: #fffeec;
 margin: 20px 5px;
 box-sizing: border-box;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.bgblvl {
 background-color: #fffeec; 
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 width: 100%;
}

.bgpercwrds {
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin: 20px 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.bgpercpts {
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin: 20px 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

/* ############################  FOR ????????????  - MIN 568PX ######################### */
@media only screen and (min-width: 568px) {
    
.main {
  width: 10px;
  height: 10px;
  position: relative;
  z-index: 999;
  will-change: transform;
  animation-name: flying-bee;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-delay: 0s;
}





.head-paragh{
 position: relative;
 background-color: #fffeec; 
/* background-color: green; */
 font-size: 24px;
 text-align: center;
 text-transform: none;
 top:50px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect1-paragh{
 position: absolute;
 background-color: #fffeec;
/* background-color: green; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect2-paragh{
 position: absolute;
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.sect3-paragh{
 position: relative;
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 40px;
 width:550px;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect4-paragh{
 position: relative; 
 top: 50px;
background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
} 



.lettershd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:250px;
 margin-left: 400px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.letters-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:310px;
 margin-left: 400px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontainhd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:250px;
 margin-left: 600px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontain-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:330px;
 margin-left: 600px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.bgcreatd {
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin: 20px 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.bgblvl-wrap {
 background-color: #fffeec;
 margin: 20px 5px;
 box-sizing: border-box;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.bgblvl {
 background-color: #fffeec; 
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 width: 100%;
}

.bgpercwrds {
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin: 20px 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.bgpercpts {
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin: 20px 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

}

/* ############################  FOR iPAD PORTRAIT - MIN 768PX ######################### */
@media only screen and (min-width: 768px) {

.main {
  width: 10px;
  height: 10px;
  position: relative;
  z-index: 999;
  will-change: transform;
  animation-name: flying-bee;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-delay: 0s;
}


.head-paragh{
 position: fixed;
 background-color: #fffeec;
 font-size: 20px;
 text-align: center;
 text-transform: none;
 top: 100px;
 margin-left: 250px;
 /* margin-right: 5px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.sect1-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 50px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect2-paragh{
 position: absolute;
 background-color: #fffeec;
/* background-color: blue; */
 font-size: 20px;
 text-align: left;
/* text-transform: none; */
 margin-left: 75px;
 margin-right: 75px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect3-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 20px;
 text-align: center;
 text-transform: none;
 top: 250px;
 width:400px; 
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect4-paragh{
 position: relative;
 top: 260px;
background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect5-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
/* text-transform: none; */
 top: 380px;
 width:100%; 
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.submbtn{
 border:5px solid #FF9900; 
 border-radius:16px; 
 color:black;    
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
}

.logoutbtn {
 border:5px solid #FF9900; 
 border-radius:16px; 
 color:black;    
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 /*
 margin-left: 150px;
 margin-right: 150px;
 */
}

.lettershd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:260px;
 margin-left: 900px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.letters-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:310px;
 margin-left: 900px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontainhd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:260px;
 margin-left: 900px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontain-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:310px;
 margin-left: 900px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}



}

/* ############################  FOR TABLETS, iPAD'S LANDSCAPE - MIN 992PX ######################### */
@media only screen and (min-width: 992px) {


.main {
  width: 100px;
  height: 100px;
  position: relative;
  z-index: 999;
  will-change: transform;
  animation-name: flying-bee;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-delay: 0s;
}



.welcome-head{
 position: absolute;
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top:150px;
 margin-left: 300px;
/*  margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.welcome-paragh{
 position: relative;
 background-color: #fffeec;
/*  background-color: red; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top:120px;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.head-paragh{
 position: fixed;
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top:50px;
 margin-left: 300px;
/*  margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect1-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 margin-right: 50px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect2-paragh{
 position: absolute;
 background-color: #fffeec;
/*  background-color: green; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect3-paragh{
 position: relative;
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 40px;
 width:500px; 
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect4-paragh{
 position: relative; 
 top: 50px;
background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
} 

/*
.sect3-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 20px;
 text-align: center;
 text-transform: none;
 top: 290px;
 width:800px;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect4-paragh{
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

*/
.sect5-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
/* text-transform: none; */
 top: 380px;
 width:100%; 
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.submbtn{
 border:5px solid #FF9900; 
 border-radius:16px; 
 color:black;    
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
}

.logoutbtn {
border:5px solid #FF9900; 
 border-radius:16px; 
 color:black;    
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 /*
 margin-left: 150px;
 margin-right: 150px;
 */
}

.lettershd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:280px;
 margin-left: 12000px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.letters-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:330px;
 margin-left: 1200px; 
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontainhd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:280px;
 margin-left: 1200px; 
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontain-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:330px;
 margin-left: 1200px; 
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}



}


/* ############################  FOR TABLETS, iPAD'S PORTRAIT & LANDSCAPE - MIN 992PX ######################### */
@media only screen and (min-width: 1200px) {

.main {
  width: 100px;
  height: 100px;
  position: relative;
  z-index: 999;
  will-change: transform;
  animation-name: flying-bee;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-delay: 0s;
}






.head-paragh{
 position: fixed;
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top:50px;
 margin-left: 500px;
/*  margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.welcome-head{
 position: absolute;
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top:150px;
 margin-left: 500px;
/*  margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.welcome-paragh{
 position: relative;
 background-color: #fffeec;
/*  background-color: red; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top:120px;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}



.sect1-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect2-paragh{
 position: absolute;
 background-color: #fffeec;
/*  background-color: red; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect3-paragh{
 position: relative;
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 30px;
 width:600px; 
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect4-paragh{
 position: relative; 
 top: 10px;
background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
} 

.sect5-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
/* text-transform: none; */
 top: 100px;
 width:100%; 
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


}

/* ===== Word definition popup (click-a-word feature) ===== */

.bee-word-link {
  cursor: pointer;
  text-decoration: underline;
  color: #7a5900;
}

.bee-word-link:hover,
.bee-word-link:focus {
  color: #FF9900;
}

.bee-word-list-box {
  font-size: 20px;
  font-weight: bold;
  border: 1px solid #999;
  border-radius: 4px;
  padding: 10px;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  width: 70ch;
  max-width: 100%;
}

.bee-def-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.bee-def-modal-overlay.bee-def-modal-visible {
  display: flex;
}

.bee-def-modal-box {
  background: #fffeec;
  border: 5px solid #FF9900;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  position: relative;
}

.bee-def-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color: black;
}

.bee-def-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}

.bee-def-modal-word {
  margin-top: 0;
  margin-bottom: 0;
  text-transform: capitalize;
}

.bee-def-speak-btn {
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: 2px solid #FF9900;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  -webkit-appearance: none;
  appearance: none;
  color: black;
  flex-shrink: 0;
}

.bee-def-speak-btn:hover,
.bee-def-speak-btn:focus {
  background-color: #fffeec;
}

.bee-def-phonetic {
  font-style: italic;
  color: #555;
}

.bee-def-pos {
  margin-bottom: 4px;
}

.bee-def-list {
  margin-top: 0;
}

/* Print styles for BeeSummaryMyResults.php - shrinks the spacing
   between info blocks so the page fits on one printed sheet, WITHOUT
   changing how the page looks on screen. Everything in here only
   applies when the browser is actually printing (or previewing a
   print), never during normal browsing. */
@media print {
  body {
    font-size: 14px !important;
    background: none !important;
    background-image: none !important;
    background-color: #fff !important;
  }

  .no-print,
  .dropdown {
    display: none !important;
  }

  .bgcreatd,
  .bgblvl-wrap,
  .bgpercwrds,
  .bgpercpts {
    margin: 6px 5px !important;
    font-size: 14px !important;
  }

  .bgblvl {
    font-size: 14px !important;
  }

  .bgcreatd th, .bgcreatd td,
  .bgblvl th, .bgblvl td,
  .bgpercwrds th, .bgpercwrds td,
  .bgpercpts th, .bgpercpts td {
    padding: 3px !important;
  }

  h2.head-paragh,
  h2.sect1-paragh {
    margin: 4px 0 !important;
  }
}