:root{
    /*  https://www.colorhexa.com/b8860b */
    --yellowGold: #ffcc00 ; 
    --lightGreenishGold: hsla(58, 98%, 50%, 0.7);
    --highYellow: hsl(55, 100%, 50%); /*  #fbea6d; */
    --greatBGYellow:hsl(55, 100%, 50%);
    --mediumGold:#a79f02;
    --grennishGold:#c5c4b5;
    --bgLightGold:#a79f02;  
    --mediumShineyGold:  #a79f02;
    --yellowOnGoldGB: rgb(253, 232, 4);
    --yellowOnMedGoldBG:#ffee00;
    --tanContrastOnGold: rgb(189, 189, 146); 
    --tanAContrastOnGold: rgb(145, 137, 80);
    --brownOnTanBG: rgb(61, 58, 4) ;
    --lBrownOnTanBG: hsl(57, 88%, 13%) ;
    --tan:#D2B48C;
    --vGoldTan:#c5b358 ;
    --lTan:#fae4af;
    --tanOnBrownBG: rgb(124, 115, 74); 
    --tanOnLBrownBG: rgb(247, 234, 177); 
    --tanLuxury: #D2B95F;
    --goldOnOliveBG:hsl(57, 98%, 33%);

    --sududedBrown: hsl(57, 37%, 30%);
    --goodBrown: rgb(88, 81, 22);
    --brownContrast: rgb(94, 83, 23);
    --brownOnGoldBG:#706b02;
    color:rgb(110, 104, 3);
    color:rgb(207, 197, 4);
    color:#c5b358;
    --lightBrown: hsl(57, 97%, 28%);
    --mediumBrown: rgba(214, 183, 28, 0.3);
    --darkBrown: rgba(208, 201, 161, 0.3);
    --theBrown:  #706b02;
    --someGold:#D4AF37;
    --vegasGold:#c5b358 ;
  }
     
* { box-sizing: border-box;  }  
    
  body { font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 
   /* background-color:#a79f02;
    background:linear-gradient (rgb(176, 166, 115), rgb(223,213,165), rgb(176,161, 109));
    width:100%; 
 
    background:linear-gradient(90deg in oklab,#b79c31, #f5e860,#adaa4d);

    background: linear-gradient(90deg, rgba(152,137,91,1) 0%, rgba(223,216,163,1) 35%, 
    rgba(235,229,173,1) 55%, rgba(182,167,116,1) 100%);  
    
    background:linear-gradient(90deg in oklab, rgb(182, 169, 115), rgb(202,195,148),rgb(181,167,116));
	background:linear-gradient( rgb(149, 133, 89), rgb(205, 196, 144),rgb(241, 236, 180), rgb(212, 202, 148), rgb(180, 165, 114));
	*/
    background:radial-gradient( rgb(148, 139, 88) ,rgb(241, 236, 180),  rgb(180, 165, 114));
	 
    height:100%; /* causes radio-button container to move down misaligning the page*/
    /* height:1000px;    height side effect *less than 1000px caused the left title to be hidden */


   /* height:1200px; */
  }
  
@keyframes turn {`
    from { transform: rotate3d(0, 0, 0, 0); }
    to { transform: rotate3d(1, 1, 0, 360deg); }
  }


.sectionCubeContainer{
   /*background:linear-gradient(90deg in oklab,#b79c31, #f5e860,#adaa4d); 
	    background:radial-gradient( rgb(158, 133, 88) ,rgb(241, 236, 180),  rgb(180, 165, 114));*/
	margin:0px;
	padding:0px;
}

.cube {
    position: relative;  
	/*top:100px; */
    width:  400px;
    height: 400px;
    backface-visibility: visible;
    transform-style: preserve-3d;           
    transform: rotate3d(1, 1, 0, 45deg);    
	  top: 0; /* Adjust this to position the cube within the container */
  transform: rotate3d(1, 1, 0, 45deg); /* Adjust this if needed */
    animation: turnnnnnnnnn 5s linear infinite;
    top: 100px;                          /*changed 202312101800           ---Changed*/
}


.face {        
    width: 400px;
    height: 400px;
    border: 2px solid rgb(254, 225, 6);
    position: absolute; /* to keep the side relative to the cube per https://www.youtube.com/watch?v=Jg_r8YCuduY */
    background-position: center;
    background-size:cover;
    display : inline-block;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    line-height: 55px;
    font-size: 30px;
    font-weight: bold;
    text-align: left;
    backface-visibility:hidden;
}



  
#rowGrid {
	   position:relative;
       display: grid !important;
      /* grid-template-columns: 800px 800px
       grid-template-rows: 1200px; */
	   grid-template-columns: 1 fr 1fr;
       grid-template-rows: 1fr;
       grid-template-areas: "cubeContainer rightHalf";
}

@media only screen and (max-width: 700px){
	#rowGrid{ 
	grid-template-columns: 1fr; 
	grid-template-rows: 1fr;
	grid-template-areas: "cubeContainer" "rightHalf"
	}
}   
	
.row {
      content: "";
      clear: both;
	/*
      background:linear-gradient(90deg in oklab, rgb(182, 169, 115), rgb(202,195,148),rgb(181,167,116));
      background:linear-gradient(45deg in oklab, rgb(149, 134, 89), rgb(235,229,174),rgb(180,165,114));

      background:linear-gradient(90deg in oklab,#b79c31, #f5e860,#adaa4d);

      background: linear-gradient(90deg, rgba(152,137,91,1) 0%, rgba(223,216,163,1) 35%, 
      rgba(235,229,173,1) 55%, rgba(182,167,116,1) 100%);  

      background: linear-gradient(90deg, rgba(235,229,174) 10%, rgba(223,216,163,1) 100%, 
      rgba(235,229,173,1) 100%, rgba(182,167,116,1) 10%);  

      background: linear-gradient(90deg, rgb(237, 223, 92) 10%, rgba(223,216,163,1) 60%, 
      rgb(236, 226, 140) 100%, rgba(182,167,116,1) 90%); 

      BACKGROUND: LINEAR-GRADIENT(TO RIGHT, #BF953F, #FCF6BA, #838728, #FBF5B7, #AA771C); http://www.brandgradients.com/gold-gradient/   
      BACKGROUND: LINEAR-GRADIENT(TO RIGHT, hsl(40, 50%, 60%), hsl(55, 92%, 86%), hsl(63, 54%, 74%), hsl(55, 89%, 85%), hsl(49, 72%, 55%));

      BACKGROUND: LINEAR-GRADIENT(TO RIGHT, hsl(49, 72%, 55%), hsl(55, 92%, 86%), hsl(63, 54%, 74%), hsl(55, 89%, 85%), hsl(49, 72%, 55%));
	 background:radial-gradient( rgb(158, 133, 88) ,rgb(241, 236, 180),  rgb(180, 165, 114));
	*/
    }
      
  
.leftTitle{
      grid-area:leftTitle; 
      font-size: 50px ;
      font-weight:bold;
      margin:0px;
      background-color: var(--highYellow);
      background:linear-gradient(90deg in oklab, rgb(182, 169, 115), rgb(202,195,148),rgb(181,167,116));
      color:#706b02;
      color:#5c5701;
      color:#9e8902;
      color: #634c01;
    }
  
.rightTitle{
      grid-area:rightTitle; 
      font-size: 50px ;
      font-weight:bold;
      margin:0px;
      border:0px solid #ffcc00;
      border:0px solid hsl(48, 91%, 65%);  
      box-shadow: 0px 20px 35px rgba(214, 183, 28, 0.3);
      background-color: var(--goldOnOliveBG);
      background:var(--vegasGold);
      color:var(--highYellow);
      color: #ffd54c;
      color: #5a4501;
      color: #634c01;
}

  
.cubeContainer {
    grid-area:cubeContainer;

    border:10px solid rgba(152,137,91,1);

            /*
    border:10px solid linear-gradient(90deg, rgba(152,137,91,1) 0%, rgba(223,216,163,1) 35%,  rgba(235,229,173,1) 55%, rgba(182,167,116,1) 100%);  
    box-shadow: 0px 20px 35px rgba(214, 183, 28, 0.3);  
    background:linear-gradient(#a7a183, #b5a673,#e4e259);
    BACKGROUND: LINEAR-GRADIENT(TO RIGHT, hsl(49, 72%, 55%), hsl(55, 92%, 86%), hsl(63, 54%, 74%), hsl(55, 89%, 85%), hsl(49, 72%, 55%));
	*/
	 background:radial-gradient( rgb(158, 133, 88) ,rgb(241, 236, 180),  rgb(180, 165, 114));
    color: #ffee00;

	 /* height:1200 px;                         *changed 202312101800           ---Changed*/

    width:100%;
	height:1000px;


	float:left;

	
}
  


.row .cubeContainer .radioSection .radio-button .cube .face a:visited {
    color:var(--brownOnGoldBG);
    background-color: hsl(55, 100%, 50%);  }
  
.cube_face_list{
  list-style: none;
  position:relative;
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  line-height: 35px;
  top:20px;
  font-size:20px;
  color:var(--brownOnGoldBG);}
  
.cube__face.cube_face_list li {
    margin: px 0; /* Add some spacing between list items */
}

.front  { background: hsla(55, 100%, 50%);}
.right  { background: hsla(55, 100%, 50%);}
.back   { background: hsla(55, 100%, 50%);}
.left   { background: hsla(55, 100%, 50%);}
.top    { background: hsla(55, 100%, 50%);}
.bottom { background: hsla(55, 100%, 50%);}
  
  /*           *          *          *         *        */
  /*           *          *          *         *        */
.front  { color:rgb(88, 81, 22);}
.right  { color: rgb(88, 81, 22);}
.back   { color: rgb(88, 81, 22);}
.left   { color: rgb(88, 81, 22);}
.top    { color: rgb(88, 81, 22);}
.bottom { color: rgb(88, 81, 22);}
  
.front  { 
  background-color: hwb(0 0% 0%);
  transform: rotateX(0 deg) rotateY(0 deg);
}

.back  { 
  background: #ed1652;
  transform: rotateY(180deg) translateZ(-200px);
}
.right   { 
  background: #0063a6;
  transform: rotateY(90deg) translateX(200px); 
}
.left{ 
  background: #12b259;
  transform: rotateY(-90deg) translateX(-200px);
}
.top{ 
  background: #fff;
  transform: rotateX(90deg) translateY(-200px);
}
.bottom { 
  background: #ffd54c;
  transform: rotateX(-90deg) translateX(-200px);
}

input  { accent-color: gold }

.radioGroup{ padding:0px;}
  
.cubeContainer input[type="radio"]:checked ~ .cube {
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  
.front{ transform: translateZ(200px); }                   
.back {transform: translateZ(-200px) rotateY(180deg);}    
.right{transform: translateX(200px) rotateY(90deg);}     
.left {transform: translateX(-200px) rotateY(-90deg);}    
.top  {transform: translateY(-200px)  rotateX(90deg);}     
.bottom { transform: translateY(200px) rotateX(-90deg);}  


.cubeContainer #front:checked  ~ .cube { transform: rotateX(-8deg) rotateY(8deg); } 
.cubeContainer #back:checked   ~ .cube { transform: rotateY(188deg) rotateZ(8deg);}
.cubeContainer #right:checked  ~ .cube { transform: rotateY(-82deg) rotateZ(9deg);}  
.cubeContainer #left:checked   ~ .cube { transform: rotateY(98deg) rotateZ(-9deg);} 
.cubeContainer #top:checked    ~ .cube { transform: rotateX(-98deg) rotateZ(-19deg) translateX(50px);} 
.cubeContainer #bottom:checked ~ .cube { transform: rotateX(82deg) rotateZ(19deg) translateX(50px);} 


@media (prefers-reduced-motion: reduce) {
.cube {
      animation: none;
      transform: rotate3d(1, 1, 0, 45deg);
    }
  }

.labelFormatter{
    position:relative;
    width:400px;
    display: flex;
    flex-direction: column;
    color:gold;}

.labelTitle{color:gold;}

.radio-button{
    width: 400px;
    height: 400px;
    padding-left:0px;
    perspective:10000px;       
    margin: 100px;            
    margin:40px;              
    margin-bottom: 5em;}

.radio-button input {
    position: absolute ;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
    margin-bottom: 0em;
    display:inline-block;}
  
.radio-button label {
    background-color:hsla(55, 100%, 50%);
    background:linear-gradient(90deg in oklab, rgb(182, 169, 115), rgb(202,195,148),rgb(181,167,116));
    color:rgb(88, 81, 22);
    color: #634c01;
    font-size: 20px;
    font-weight:800;
    line-height: 1;
    text-align: center;
    padding: 8px 16px;
    margin-right: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;}
  
.radio-button label:hover {    cursor: pointer;} 

.radio-button input:checked + label {
    background-color: hsl(63, 47%, 25%);
    color:hsla(55, 100%, 50%);
    box-shadow: none; }
  
.radio-button label:first-of-type { border-radius: 4px 0 0 4px;}
  
.radio label:last-of-type {border-radius: 0 4px 4px 0;}
  
label { margin-right: 10px; }
  
.row:after {
      content: "";
      display: table;
      clear: both;
      height:100%;
      height:100%;}
    

*, *:before, *:after {
    margin: 0;
    padding: 0;
   -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    -ms-box-sizing: border-box !important;
    box-sizing: border-box !important;
}
  
.rightHalf{
    padding: 0px;
    margin: 0px;
    background-clip: padding-box;
    border:10px solid #ffcc00;
	border-width:100%;

    box-shadow: 0px 20px 35px rgba(214, 183, 28, 0.3);
    background:linear-gradient(#a7a183, #b5a673,#e4e259);
    background: linear-gradient(90deg, rgba(152,137,91,1) 0%, rgba(223,216,163,1) 35%, 
    rgb(239, 234, 188) 55%, rgba(182,167,116,1) 100%);  
    color: #ffee00;
    color: #5a4501;

	  height:100%;

    float:right;
    font-size:20px;
    font-weight: bold;
    grid-area:rightHalf;
	
	

	width:100%;
	height:1000px;


} 
  
  
.radioSection {
    top: 0cap;
    left: 0px;
    border-radius: 50%;
    margin-bottom: 0px;
  }

 /*    ACCORDIONS         ACCORDIONS          ACCORDIONS                  ACCORDIONS    
       ACCORDIONS         ACCORDIONS          ACCORDIONS                  ACCORDIONS  
https://www.w3schools.com/howto/howto_js_accordion.asp
https://www.w3schools.com/howto/howto_js_accordion.asp
*/

  .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
  }

  .active, .accordion:hover {
    background-color: #ccc;
  }

  .panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
  }

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}


 /*    
ACCORDIONS         ACCORDIONS          ACCORDIONS                  ACCORDIONS    
ACCORDIONS         ACCORDIONS          ACCORDIONS                  ACCORDIONS  */