/*  This is the Boiler Plate for 2025 rebuild and branding of 3D Poetry..   */

@import url("https://fonts.googleapis.com/css?family=Catamaran:900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bilbo+Swash+Caps&display=swap");







body {
	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
    max-width: 99.vw;
    width: 99vw;
}
img, video {
  max-width: 100%;
  height: auto;
  border-style: none;
  border-radius: 5%;

}

.ZTitle{

  font-family: "Roboto", sans-serif;
  color: rgba(193, 183, 183, 0.84);
  font-size: 1em;

}

.ZTitle h1{

  font-size: 1em;
  font-weight: 400;
  text-align: center;
}
.ZTitle h2{

  font-size: 1.0em;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;

}
.ZTitle h4{

  font-size: 1.1em;
  font-weight: 300;

}
.ZTitle h5{

  font-size: 1.1em;
  font-weight: 300;

}

.ZTitle p{

  font-size: 1em;
  font-weight: 200;
  text-align: justify;
  line-height: 1.0;
  text-indent: 1em;

}
.ZTitle ul, li{

  font-size: 1em;
  color: #000;
  font-weight: 400;
  text-align: justify;
  background-color: #ff0;

}

#BLANKET{

  position: absolute;
  /*background-color: #ff0;*/

  min-width: 100vw;
  min-height: 100vh;
  display:none;

  z-index: 999;
}

a {
	color: #ff0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

#info {
	position: absolute;
	top: 0px;
	width: 99%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
	pointer-events: auto;
}

.lil-gui {
	z-index: 2 !important; /* TODO Solve this in HTML */
}

@media all and ( max-width: 640px ) {
	.lil-gui.root { 
		right: auto;
		top: auto;
		max-height: 50%;
		max-width: 80%;
		bottom: 0;
		left: 0;
	}
}

#overlay {
	position: absolute;
	font-size: 16px;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: rgba(0,0,0,0.7);
}

	#overlay button {
		background: transparent;
		border: 0;
		border: 1px solid rgb(255, 255, 255);
		border-radius: 4px;
		color: #ffffff;
		padding: 12px 18px;
		text-transform: uppercase;
		cursor: pointer;
	}

#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}



#tupperware {
    max-width:99.95vw;
    max-height: fit-content;
   
    min-height: 100vh;
    display:flex;
    align-content: center;
    color: bisque;

    z-index: 1;


    background-color:rgb(13, 4, 36);
    opacity:100%;

}

.lineSpacer{
  
  
  position: inherit;
  margin: auto;
  display: block;
 
  width:90%;
  min-height: 5px;
  

  z-index: 900;
}

.socialLink{

  padding: 10px;

}

.socialLink a img{

  padding: 3px;
  

  
  
}

.socialLink a img:hover{
  filter: drop-shadow(5px 5px 10px #9483a0);
  background-color: rgba(165, 94, 231,0.7);
  opacity:0.5;
  border-radius: 10%;
  box-shadow: 1px 2px #9545a0 ;
  -webkit-filter: drop-shadow(5px 5px 10px #9483a0);
}

/*  Loading progress with logo  */
/*  Loading progress with logo  */
#loadingIT {
    padding:0;
    margin:0;
    width:99vw;
    height:99vh;
    top:0;
    left:0;
    
    display: flex;
    align-items: center;
    background-color:rgb(20, 8, 53);
    position: absolute;

    
    z-index:1000;
}
#loadMage{
    

   
    margin:auto;
    width:256px;
    height:256px;
    
    max-width: 256px;
    max-height: 256px;
    overflow: hidden;
    
    background-color: rgb(43, 29, 102);

    display:flex;
    align-items:last baseline;



    z-index: 720;


}

.spiner {
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    width: 256px;
    height: 256px;
    margin:-128px 0 0 -128px;
    overflow:hidden;
    opacity: 70%;
    border-radius: 50%;
    -webkit-animation:spin 3.5s linear infinite;
    -moz-animation:spin 3.5s linear infinite;
    animation:spin 3.5s linear infinite;

}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); 
        opacity:60%; } 
        1% {
            opacity:10%; }  
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg);
        opacity:60%; } 
        1% {
            opacity:10%; }   
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
        
        opacity:60%; } 
        1% {
            opacity:10%; }  
}



#LoadLover{

    width:100%;
    height:100%;
     
    background-color: rgba(204, 66, 181, 0.8);

    margin-bottom:0;

}
#percy{
    font-size: 4rem;
    font-weight: bolder;
    
    color:crimson;
    text-align: center;
    display:flex;
    position:relative;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
  }
  
  @keyframes glow {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }
    to {
      text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
}



/*  END Loading progress with logo  */
/*  END Loading progress with logo  */
/*  BEGIN Main Page Buttons and directions  */


#StarWars{

    position: fixed;
    padding: 0%;
    
    max-width: 99.5vw;
    width:99.5vw;
    max-height: 99.1vh;
    height: 99.1vh;
    
    overflow: hidden;
    background-color: aquamarine;
    z-index: 0;
}



#BTN-Holder{
   
    position: fixed;
    top:0;
    left:0;
    display: flex;
    flex-direction:row;
    
    max-width: 99.5vw;
    width: 99.5vw;
    height: 50px;


    z-index: 800;

}
#BTN-Holder-Left{

    max-width: 50%;
    padding:2px;
    width: 49.79%;
    height: 50px;



}
#BTN-Holder-Right{

    max-width: 50%;
    padding:2px;
    width: 49.69%;
    height: 50px;



}
#LOGO-Holder-Left{

    margin-top: 60px;
    max-width: 50%;
    padding:2px;
    width: 98%;
    



}
#LOGO-Holder-Right{

    max-width: 50%;
    padding:2px;
    width: 49.69%;
   



}


#LOGO{

  position:sticky;

    max-width: 72px;
    width:72px;
    height: 72px;

    display:block;
    background-image: url("/ICE-images/Buttons/3DPoetry-OFF-sml.png");
    border-radius: 15%;

    animation: glow2 3s infinite alternate;

    z-index:810;


}

#LOGO:hover{
    
    display:block;
    background-image: url("/ICE-images/Buttons/3DPoetry-OVER-sml.png");
    background-color: #29FF27;

    animation: glow2 3s infinite alternate;



}
@keyframes glow3 {
    from {
      box-shadow: 0 0 10px -10px #449fdb;
      box-shadow: inset 0 0 20px -20px #8cc6d5;
      opacity:0.75;
    }
    to {
      box-shadow: 0 0 10px 10px #4d99cf;
      box-shadow: inset 0 0 20px 20px #7bb4c6;
      filter: brightness(1);
      -webkit-filter: brightness(1);
      opacity:0.75;
}
  }
  @keyframes glow2 {
    from {
      box-shadow: 0 0 10px -10px #aef4af;
      box-shadow: inset 0 0 10px -10px #378d38;
    }
    to {
      box-shadow: 0 0 10px 10px #378d38;
      box-shadow: inset 0 0 10px 10px #aef4af;
      filter: brightness(1);
      -webkit-filter: brightness(1);
}
  }

.Orb{
  position:absolute;
  display:block;
  width:50px;
  height:50px;
  top:150px;
  left:0px;
  z-index: 850;
  background-image: url("/ICE-images/Buttons/Blue-Glass-Orb-Under.png");
  background-size: contain;
  cursor: default;
  opacity:0.95;
  animation: glow3 3s infinite alternate;
  -webkit-animation: glow3 3s infinite alternate;
  border-radius: 50%;;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.Orb img{
  width: 100%;
  height:auto;

  transition:all ease-in-out 2000ms;
  -webkit-transition:all ease-in-out 2000ms;
  -moz-transition:all ease-in-out 2000ms;
  -ms-transition:all ease-in-out 2000ms;
  -o-transition:all ease-in-out 2000ms;


}
.Orb img:hover{

  opacity:1;
   transition:all ease-in-out 2000ms;
  -webkit-transition:all ease-in-out 2000ms;
  -moz-transition:all ease-in-out 2000ms;
  -ms-transition:all ease-in-out 2000ms;
  -o-transition:all ease-in-out 2000ms;


  cursor: pointer;

}
#MajorNews{
  position:fixed;
  display:none;
  margin-top:250px;
  margin-left:50px;
  font-family: "Roboto", sans-serif;
  color: rgba(193, 183, 183, 0.84);
  font-size: 1.0em;
  font-weight: bold;
  width:300px;
  height:200px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-style: groove;
  border-width: 5px;
  border-color: chocolate;
  background-color: rgba(62, 2, 62, 0.85);
  text-indent: 5px;
}

#BTN-Info{
    
    float:right;
    
    max-width: 184px;
    width:184px;
    height: 50px;
    background-image: url("/ICE-images/Buttons/BTN-Info-OFF.png");
    cursor: default;
    transition: background-image 0.5s ease-in-out; 

    z-index: 410;

}


#BTN-Menu{

    float:left;

    max-width: 184px;
    width:184px;
    height: 50px;
    background-image: url("/ICE-images/Buttons/BTN-Menu-OFF.png"); 
    cursor: default;
    transition: background-image 0.5s ease-in-out; 
    z-index: 410;


}

#BTN-CloseI{


    display:block;
    margin:auto;
    margin-top:1px;

    max-width: 184px;
    width:184px;
    height: 50px;
    background-image: url("/ICE-images/Buttons/BTN-Close-OFF.png"); 
    cursor: default;
    transition: background-image 0.5s ease-in-out; 
    z-index: 415;

}

#BTN-CloseI:hover{


    background-image: url("/ICE-images/Buttons/BTN-Close-ON.png"); 
    cursor: pointer;
    transition: background-image 0.5s ease-in-out; 


}
#BTN-CloseM{

    display:block;

    max-width: 184px;
    width:184px;
    height: 50px;
    background-image: url("/ICE-images/Buttons/BTN-Close-OFF.png"); 
    cursor: default;

    z-index: 415;
    

}

#BTN-CloseM:hover{


    background-image: url("/ICE-images/Buttons/BTN-Close-ON.png") ; 
    cursor: pointer;
    transition: background-image 0.5s ease-in-out; 

}
#BTN-CloseP{

  display:block;

  max-width: 184px;
  width:184px;
  height: 50px;
  background-image: url("/ICE-images/Buttons/BTN-Close-OFF.png"); 
  cursor: default;

  z-index: 415;
  

}

#BTN-CloseP:hover{


  background-image: url("/ICE-images/Buttons/BTN-Close-ON.png") ; 
  cursor: pointer;
  transition: background-image 0.5s ease-in-out; 

}

#BTN-CloseV{

  display:block;
  position:fixed;
  max-width: 184px;
  width:184px;
  height: 51px;
  background-image: url("/ICE-images/Buttons/BTN-Close-OFF.png"); 
  cursor: default;

  z-index: 800;
  

}

#BTN-CloseV:hover{


  background-image: url("/ICE-images/Buttons/BTN-Close-ON.png") ; 
  cursor: pointer;
  transition: background-image 0.5s ease-in-out; 

}
#BTN-CloseLx{

  display:block;
  position:fixed;
  max-width: 184px;
  width:184px;
  height: 51px;
  background-image: url("/ICE-images/Buttons/BTN-Close-OFF.png"); 
  cursor: default;

  z-index: 800;
  

}

#BTN-CloseLx:hover{


  background-image: url("/ICE-images/Buttons/BTN-Close-ON.png") ; 
  cursor: pointer;
  transition: background-image 0.5s ease-in-out; 

}
#BTN-Info:hover{


     background-image: url("/ICE-images/Buttons/BTN-Info-ON.png") !important;
     cursor: pointer;
     
     transition: background-image 0.5s ease-in-out; 

 
 }
 
 
 #BTN-Menu:hover{

     background-image: url("/ICE-images/Buttons/BTN-Menu-ON.png") !important; 
     cursor: pointer;
     transition: background-image 0.5s ease-in-out; 
 
 }

 #MyInformationCarrier{
    position: fixed;
    top:100%;
    left:50%;
    transform: translate(-50%, 0%);
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 99vw;
    max-height:75vh;
    width: 85vw;
    height:65vh;
    background-color: rgb(65, 7, 73);
    border: double 15px rgba(255,255,255,0.1);
    border-radius: 15px;
    overflow:auto;
    z-index: 450;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}


 #MyInformation{
    position: inherit;

    top: 53px;
    
    margin: auto;
    margin-top: 10px;
    display: flex;

    max-width: 99%;
    min-width: 95%;
    align-items: center;


    min-height: 200px;
    height:auto;
    z-index: 451;
    


 }


 /*   ******((((((((&&&&&&&&&&%%%%%^^^^^^^^^^^^^^^^^^^^^^^^^^        Navagation Systems Area      */




 #MyMenuCarrier{
    position: fixed;
    top:30%;
    left:165%;
    transform: translate(-50%,0%);
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    max-width: 800px;
    width: 85vw;
    height:63vh;
    background-color: rgba(26, 2, 26, 0.9);
    border: double 15px rgba(255,255,255,0.1);
    border-radius: 15px;
    overflow:auto;
    z-index: 460;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}


 #MyMenu{


    max-width: 90%;
    min-width: 85%;
    padding-bottom:5px;

 

    

    min-height: 200px;
    height:100%;

    


 }

 #MyPoetryCarrier{
  position: fixed;
  top: -100%;
  /*changebackto-100%*/right:-5%;
  transform: translate(50%, 0%);
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  max-height:75vh;
  width: 85vw;
  height: 75vh;
  background-color: rgb(12, 2, 2);
  border: double 15px rgba(233, 10, 10, 0.785);
  border-radius: 15px;
  overflow:auto;
  z-index: 470;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}


#MyPoetry{
  position: inherit;

  top: 33px;
  
  margin: auto;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  max-width: 95%;
  min-width: 95%;
  align-items: center;


  min-height: 200px;
  height:auto;
  z-index: 471;
  


}

.DincaraINTRO{

  font-family: "Roboto", sans-serif;
  color: rgba(193, 183, 183, 0.84);
  font-size: 1em;

text-align: center;
margin:auto;

width: 99%;
min-height: 30px;


}

.DincaraINTRO h2{

  font-size: 1.2em; 
}
.DincaraINTROrefs {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 1em; 
  text-align: justify;
  color: rgba(193, 183, 183, 0.84);
  
}
.DincaraINTROrefs h3{
  font-size: 1.1em;
  color: rgba(193, 183, 183, 0.84);
}
.DincaraINTROrefs a{

  font-size: 1.3em; 
  color:#84b3e1;
  text-decoration: none;
  
}
.DincaraINTROrefs a:hover {

  font-size: 1.3em; 
  color:#84b3e1;
  animation: glow3 1.3s infinite alternate;
  border-radius: 10px;
  
  
}


.Dincara{

  font-family: "Bilbo Swash Caps", cursive;
  font-weight: 400;
  font-style: normal;

  margin: auto;


  width: 97%;

  



}
.Dincara h1{

  text-align: center;
  font-size: 2em;
}
.Dincara h2{

  text-align: center;
  font-size: 2em;
}
.Dincara h3{

  text-align: center;
  font-size: 2.2em;
  line-height: 1.6;

}
.Dincara h4{

  text-align: left;
  font-size: 1.5em;
}
.lBreak{
  text-align: center;
  margin: auto;
  height:auto;
}
.DincaraPoem{

  font-family: "Bilbo Swash Caps", cursive;
  font-weight: 300;
  font-style: normal;

  margin: auto;
  font-size: 1.8em;

  width: 85%;

  text-align: justify;
  line-height: 1.2;



}
.DincaraPoem h5{
  font-size: 1.25em;
  text-align: left;
}


#MyVideoCarrier{
  position: fixed;
  top:20%;
  left:-90%;
  transform: translate(-50%, 0%);
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  align-items: center;
  margin: auto;
  overflow:auto;
  width: 90vw;
  height:63vh;
  background-color: rgba(86, 14, 14, 0.98);
  border: double 15px rgba(168, 135, 139, 0.1);
  border-radius: 15px;
  z-index: 560;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}


#MyVideo{
  width: 100%;
  padding-bottom:5px;
  padding-top:5px;
  margin-top: 72px;



  z-index: 431;
  font-family: "Bilbo Swash Caps", cursive;
  font-weight: 400;
  font-style: normal;



}
#MyVideo h1{
  text-align: center;
  font-size: 1.8em;
  line-height: 1.2;

}
#MyVideo h2{
  text-align: center;
  font-size: 1.2em;
  font-weight: 300;

}

#MyVideo p {

  text-align: center;
  font-size: 1.2em;
  font-weight: 200;



}
.MyVIDEOCardContainer{

  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
  
  row-gap: 10px;
  
 



}
.MyVIDEOCard{
  display: flex;
  flex-direction: column;
  width:85%;
  background-color: rgba(78, 8, 12, 0.9);
  border-radius: 15px;
  border-style: groove;
  min-height: 300px;
  text-align:center;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}
.MyVIDEOCard video{
  margin-left:50%;
  margin-top:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  filter: drop-shadow(7px 7px 10px #892424);
  border-radius: 15px;
  width:85%;
  max-width: 85%;
  height: auto;
  box-shadow: 0 0 20px rgba(234, 229, 229, 0.1),  0 0 40px rgba(225, 221, 221, 0.1),    0 0 60px rgba(235, 231, 231, 0.1),    0 0 80px rgba(219, 216, 216, 0.1);
  -webkit-filter: drop-shadow(7px 7px 10px #892424);
  transition: transform 400ms ease;
  -webkit-transition: transform 400ms ease;
  -moz-transition: transform 400ms ease;
  -ms-transition: transform 400ms ease;
  -o-transition: transform 400ms ease;
}

.MyVIDEOCard video:hover{
  margin-left:47%;
  margin-top:47%;

  filter: drop-shadow(12px 12px 12px #893e3e) sepia(50%) blur(0.5px) grayscale(50%) brightness(1.5);
  -webkit-filter: drop-shadow(12px 12px 12px #893e3e) sepia(50%) blur(0.5px) grayscale(50%) brightness(1.5);
  transition: transform 400ms ease;
  -webkit-transition: transform 400ms ease;
  -moz-transition: transform 400ms ease;
  -ms-transition: transform 400ms ease;
  -o-transition: transform 400ms ease;
  cursor:pointer;
}

.popup-video {

  top: 0;
  left: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.9);

  height: 100%;
  width: 100%;
  display: none;

  position: absolute;
  isolation: isolate;
}

.popup-video::after{

  content: '';
  position:absolute;
  z-index: 1001;
  inset: 0;
  background-image: url("/ICE-images/IMG-SRC/BG-Ice-750.jpg"); 
  opacity: 0.4;
  mix-blend-mode:exclusion;

}

.popup-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 750px;
  border-radius: 5px;
  border: 3px solid rgba(250, 250, 250, 0.9);
  object-fit: contain;
  opacity: 1;
  z-index: 1002;
}
.popup-video span {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 150px;
  color: blanchedalmond;
  font-weight: bolder;
  z-index: 1003;
  cursor: pointer;
}






 nav{
    padding:10px;
    margin: auto;
    display:flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;

  


 }

 .Zcontainer {
    margin: auto;
    padding:2px;
  }
  
  .Title {
    font-family: "Catamaran", sans-serif;
    color: white;
    cursor: pointer;
    position: relative;
  }
  .Title h1 {
    position: relative;
    margin: 0;
    padding: 0px;
    overflow: hidden;
    text-transform: uppercase;
    font-size: 1.5em;
    -webkit-text-stroke: 1px white;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
  }
  .Title__underline {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0.1em;
    height: 3px;
    background-color: #17bdef;
    z-index: 5;
    transition: transform 580ms cubic-bezier(0.2, 0.1, 0.15, 1.32);
    -webkit-transition: transform 580ms cubic-bezier(0.2, 0.1, 0.15, 1.32);
    -moz-transition: transform 580ms cubic-bezier(0.2, 0.1, 0.15, 1.32);
    -ms-transition: transform 580ms cubic-bezier(0.2, 0.1, 0.15, 1.32);
    -o-transition: transform 580ms cubic-bezier(0.2, 0.1, 0.15, 1.32);
}
  .Title__highlight {
    position: absolute;
    width: 100%;
    bottom: -50;
    left: 0;
    height: 60px;
    background-color: #43ffbe;
    z-index: -1;
    transition: transform 400ms ease;
    -webkit-transition: transform 400ms ease;
    -moz-transition: transform 400ms ease;
    -ms-transition: transform 400ms ease;
    -o-transition: transform 400ms ease;
}
  .Title__filled {
    position: absolute;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-size: 1.5em;
    top: 0;
    -webkit-clip-path: polygon(0% 100%, 0% 99%, 100% 99%, 100% 100%);
            clip-path: polygon(0% 100%, 0% 99%, 100% 99%, 100% 100%);
    transition: -webkit-clip-path 600ms cubic-bezier(0.2, 0.1, 0.15, 1.32);
    transition: clip-path 600ms cubic-bezier(0.2, 0.1, 0.15, 1.32);
    transition: clip-path 600ms cubic-bezier(0.2, 0.1, 0.15, 1.32), -webkit-clip-path 600ms cubic-bezier(0.2, 0.1, 0.15, 1.32);
  }
  .Title:hover .Title__filled {
    -webkit-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%);
            clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%);
  }
  .Title:hover .Title__underline {
    transform: translateY(-1em);
    -webkit-transform: translateY(-1em);
    -moz-transform: translateY(-1em);
    -ms-transform: translateY(-1em);
    -o-transform: translateY(-1em);
}
  .Title:hover .Title__highlight {
    transform: translateY(-1.2em);
    -webkit-transform: translateY(-1.2em);
    -moz-transform: translateY(-1.2em);
    -ms-transform: translateY(-1.2em);
    -o-transform: translateY(-1.2em);
}

   /*   ******((((((((&&&&&&&&&&%%%%%^^^^^^^^^^^^^^^^^^^^^^^^^^       &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&  GAlleries   */

   #MyGalleriesCarrier{
    position: fixed;
    top:-75%;
    left:50%;
    transform: translate(-48%,0%);
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 90vw;
    height:63vh;
    background-color: rgba(58, 3, 58, 0.9);
    border: double 15px rgba(255,255,255,0.1);
    border-radius: 15px;
    overflow:auto;
    z-index: 560;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}


 #MyGalls{


    width: 95%;
    padding-bottom:5px;

 

    

    min-height: 200px;
    height:100%;

    


 } 

.MyGallsTitle{

  font-family: "Catamaran", sans-serif;
  font-size: 1.0em;
  color:aliceblue;
  font-weight: 300;
  width: 90%;
  margin:auto;

}
.MyGallsTitle h1{
  font-size: 1.1em;
  line-height: 1.0;
  width: 99%;
  text-align: center;
}
.MyGallsTitle h2{
  font-size: 1.0em;
  width: 99%;
  text-align: center;
}
.MyGallsTitle h3{
  font-size: 1.0em;
  width: 99%;
  text-align: center;
}
.MyGallsTitle p{
  font-size: 1.0em;
  width: 99%;
  text-align: justify;
  font-weight: 100;
  text-indent: 1em;
}

.MyGallsCardContainer{

  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow-x: hidden;
  row-gap: 10px;
  
 



}
.MyGallsCard{
  margin:auto;
  margin-top:0px;
  left:0px;
  display: flex;
  flex-direction: column;
  width:490px;
  background-color: rgba(58, 3, 58, 0.9);
  border-radius: 15px;
  border-style: groove;
  min-height: 600px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}
.MyGallsCardGall{
  display:block;
  width:100%;
  font-family: "Catamaran", sans-serif;
  color:aliceblue;
  margin-top: 10px;
  padding:5px;
  text-align: center;
  filter: drop-shadow(14px 14px 10px #ababab);
  -webkit-filter: drop-shadow(14px 14px 10px #ababab);
}
.MyGallsCardGall a{
  font-family: "Catamaran", sans-serif;
  font-size: 1.6em;
  color:rgb(184, 206, 225);
  font-weight: 200;
  filter: drop-shadow(5px 5px 10px #292727);
  text-decoration: none;
  -webkit-filter: drop-shadow(5px 5px 10px #292727);
}
@keyframes glowZ {
  from {
    filter:brightness(1);
    -webkit-filter:brightness(1);
}
  to {
    filter:brightness(2);
    -webkit-filter: drop-shadow(15px 10px 10px #29FF27);
    filter: drop-shadow(15px 10px 10px #29FF27);
}


}
.MyGallsCardGall a:hover{

  filter: drop-shadow(5px 5px 10px #29FF27);
  animation: glowZ 0.5s infinite alternate;
  -webkit-filter:drop-shadow(5px 5px 10px #29FF27);
}
.MyGallsCardTitle{

  display:block;
  width:100%;
  font-family: "Bilbo Swash Caps", cursive;
  font-weight: 300;
  font-style: normal;
  font-size:2em;
  color:aliceblue;

  background-color: rgba(79, 4, 79, 0.9);
margin-top: 10px;  


  text-align: center;
  



}
.MyGallsCardMage{

  width: 100%;

  max-height: 500px;
  text-align: center;

  margin:auto;



}
.MyGallsCardMage img{
  filter: drop-shadow(7px 7px 10px #892424);
  border-radius: 15px;
  max-width: 100%;
  height: auto;
  box-shadow: 0 0 20px rgba(234, 229, 229, 0.1),  0 0 40px rgba(225, 221, 221, 0.1),    0 0 60px rgba(235, 231, 231, 0.1),    0 0 80px rgba(219, 216, 216, 0.1);
  -webkit-filter: drop-shadow(7px 7px 10px #892424);
  transition: transform 400ms ease;
  -webkit-transition: transform 400ms ease;
  -moz-transition: transform 400ms ease;
  -ms-transition: transform 400ms ease;
  -o-transition: transform 400ms ease;
}

.MyGallsCardMage img:hover{
  filter: drop-shadow(12px 12px 12px #893e3e) sepia(50%) blur(0.5px) grayscale(50%) brightness(1.5);
  -webkit-filter: drop-shadow(12px 12px 12px #893e3e) sepia(50%) blur(0.5px) grayscale(50%) brightness(1.5);
  transform: translate(-3px,-3px);
  -webkit-transform: translate(-3px,-3px);
  -moz-transform: translate(-3px,-3px);
  -ms-transform: translate(-3px,-3px);
  -o-transform: translate(-3px,-3px);
  transition: transform 400ms ease;
  -webkit-transition: transform 400ms ease;
  -moz-transition: transform 400ms ease;
  -ms-transition: transform 400ms ease;
  -o-transition: transform 400ms ease;
}

.MyGallsCardChat{

  width: 100%;

}
.MyGallsCardChat p{

  font-family: "Roboto", sans-serif;

  font-size: 1em; 
  text-align: justify;
  color: rgba(193, 183, 183, 0.84);
  padding:4px;
  text-indent: 1em;

}


#MySearch{
    position: fixed;
    top:-50%;
    left:-75%; 

    transform: translate(-50%, -30%);
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    max-height:75vh;
    width: 75vw;
    height:65vh;
    background-color: rgba(65, 7, 73, 0.968);
    border: double 15px rgba(228, 155, 10, 0.676);
    border-radius: 5%;
    overflow:auto;
    z-index: 750;
    -webkit-transform: translate(-50%, -30%);
    -moz-transform: translate(-50%, -30%);
    -ms-transform: translate(-50%, -30%);
    -o-transform: translate(-50%, -30%);
}
#MySearch .Tit{
  margin-top:20px;
  text-align: center;
  padding:4px;
}

#MySearch .Tit h1{
  font-family: "Bilbo Swash Caps", cursive;
  font-weight: 800;
  font-style: normal;
  font-size: 4em;

  display: inline;
  position: relative;
  max-width: 99%;
  color: #b5e0eb;
  filter:drop-shadow(10px 10px 5px rgb(120, 12, 12));
  -webkit-filter:drop-shadow(10px 10px 5px rgb(120, 12, 12));
}
#MySearch .Tit p{
    font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 1em; 
  text-align: justify;
  color: rgba(193, 183, 183, 0.84);
  padding-left: 4px;
  padding-right: 4px;

  

}
.Searcher label, input{

  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 1em; 
  text-align: justify;
  color: rgba(193, 183, 183, 0.84);



}
.Searcher input{

  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 1em; 
  text-align: justify;
  color: rgba(80, 0, 0, 0.84);



}
.Searcher button{
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 1em;
  text-align: justify;
  color: rgb(0, 0, 0);
  background-color: blueviolet;
  filter:drop-shadow(7px 7px 7px rgba(255, 255, 255, 0.478));
  -webkit-filter:drop-shadow(7px 7px 7px rgba(255, 255, 255, 0.478));
}
 #BTN-CloseSearch{

  display:block;

  max-width: 184px;
  width:184px;
  height: 50px;
  background-image: url("/ICE-images/Buttons/BTN-Close-OFF.png"); 
  cursor: default;

  z-index: 775;
  

}

#BTN-CloseSearch:hover{


  background-image: url("/ICE-images/Buttons/BTN-Close-ON.png") ; 
  cursor: pointer;
  transition: background-image 0.5s ease-in-out; 

}
 #BTN-CloseGs{

  display:block;

  max-width: 184px;
  width:184px;
  height: 50px;
  background-image: url("/ICE-images/Buttons/BTN-Close-OFF.png"); 
  cursor: default;

  z-index: 415;
  

}

#BTN-CloseGs:hover{


  background-image: url("/ICE-images/Buttons/BTN-Close-ON.png") ; 
  cursor: pointer;
  transition: background-image 0.5s ease-in-out; 

}



#MyLinksCarrier{
    position: fixed;
    top:100%;
    left:50%;
    transform: translate(-50%, 0%);
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:first baseline;
    max-width: 800px;
    max-height:75vh;
    width: 85vw;
    height:65vh;
    background-color: rgb(9, 44, 6);
    border: double 15px rgba(68, 210, 111, 0.935);
    border-radius: 15px;
    overflow-x:hidden;
    z-index: 450;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}


 #MyLinks{
    position: inherit;

    top: 53px;
    
    margin: auto;
    margin-top: 10px;

    width: 95%;

   
    display: flex;
    align-items: center;



    min-height: 200px;
    height:auto;
    z-index: 451;
    overflow-x: hidden;
    


 }
 .LxWords{
  display:inline-block;
  max-width:99%;
  height: auto;
  
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 1em; 
  text-align: justify;
  color: rgba(233, 183, 183, 0.84);

 }

 .LxWords article{
  width:99%;

 }
  .LxWords article a {
  font-family: "Bilbo Swash Caps", cursive;
  font-weight: 800;
  font-style: normal;
  font-size: 3em;

  
 }
 .LxCardCarry{

  width:99%;
  margin-top:550px;
  display:flex;
  flex-wrap: wrap;
  justify-content:space-around;
  row-gap: 20px;
  padding:5%;
 }

 .LxCard1 {
  display:block;
  width:310px;
  height:500px;
  background-color: #000;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-style: groove;
  text-align: center;
}


 .LxCard2 {
  display:block;

  width:190px;
  height:700px;
  background-color: #2f0303;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-style: groove;
  text-align: center;

}




 #BTN-CloseLx{

  display:block;

  max-width: 184px;
  width:184px;
  height: 50px;
  background-image: url("/ICE-images/Buttons/BTN-Close-OFF.png"); 
  cursor: default;

  z-index: 415;
  

}

#BTN-CloseLx:hover{


  background-image: url("/ICE-images/Buttons/BTN-Close-ON.png") ; 
  cursor: pointer;
  transition: background-image 0.5s ease-in-out; 

}


@media print {
  * {
      background: transparent !important;
      color: black !important;
      text-shadow: none !important;
      filter: none !important;
      -ms-filter: none !important;
  }
  a,
  a:visited {
      text-decoration: underline;
  }
  a[href]:after {
      content: " (" attr(href) ")";
  }
  abbr[title]:after {
      content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
      content: "";
  }
  pre,
  blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
  }
  thead {
      display: table-header-group;
  }
  tr,
  img {
      page-break-inside: avoid;
  }
  img {
      max-width: 100% !important;
  }
  @page {
      margin: 0.5cm;
  }
  p,
  h2,
  h3 {
      orphans: 3;
      widows: 3;
  }
  h2,
  h3 {
      page-break-after: avoid;
  }
}

/* ########################################################################## above is smallest Mobile Phone  ########################### */
@media screen and (min-width: 480px) {


  .Orb{

  width:100px;
  height:100px;

}
#MyGalleriesCarrier{
    padding-top: 15px;
    padding-bottom: 15px;
    width: 95vw;
    max-width:500px;
    height:63vh;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}


.MyGallsTitle{
  font-size: 1.2em;
  font-weight:lighter;
  width: 90%;
}
.MyGallsTitle h1{
  font-size: 2.1em;
  font-weight:lighter;
  line-height: 1.2;
}
.MyGallsTitle h2{
  font-size: 1.9em;
      font-weight:lighter;

  width: 99%;
}
.MyGallsTitle h3{
  font-size: 1.6em;
  font-weight:lighter;
  width: 99%;
}
.MyGallsTitle p{
  font-size: 1.2em;
  width: 99%;
 font-weight:lighter;
}

.MyGallsCardContainer{

  row-gap: 20px;
}
.MyGallsCard{
  width:490px;
  background-color: rgba(58, 3, 58, 0.9);
  border-radius: 10px;
  min-height: 600px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.MyGallsCardGall{

  width:100%;
  margin-top: 10px;
  padding:5px;
}
.MyGallsCardGall a{
  font-size: 2.2em;
  font-weight: 200;
}

.MyGallsCardTitle{
  width:100%;
  font-weight: 300;
  font-size:3em;
margin-top: 10px;  

}
.MyGallsCardMage{

  width: 100%;

  max-height: 500px;

}



.MyGallsCardChat{

  width: 100%;

}
.MyGallsCardChat p{
  font-size: 1.5em; 
  padding:4px;
  text-indent: 1em;

}
  .lineSpacer{

  min-height: 30px;

  }
  #MyMenuCarrier{
    max-width: 800px;
    width: 95vw;
    height:63vh;

 }
  #MyInformationCarrier{
    max-width: 800px;
    max-height:75vh;
    width: 95vw;
    height:65vh;
  }
   #MyInformation{
    max-width: 90%;
    min-width: 85%;

   }
  .ZTitle{

    font-size:1em;
  }
  .ZTitle h1{

    font-size:3em;
  }
  .ZTitle h2, h3{

    font-size:2em;
  }
  .ZTitle h4{

    font-size:2em;
  }
  .ZTitle h5{

    font-size:2em;
  }
  .ZTitle p{

    font-size:1.3em;
  }
  .ZTitle ul, li{

    font-size:1.2em;
  }

  .Title h1 {

    padding: 2px;

    font-size: 2em;

  }
  .Title__underline {

    bottom: 0.3em;
    height: 3px;
}
  .Title__highlight {

    bottom: -50;
    left: 0;
}
  .Title__filled {
    font-size: 2em;
    top: 0;
  }

  .Title:hover .Title__underline {
    transform: translateY(-2em);
  }
  .Title:hover .Title__highlight {
    transform: translateY(-5.2em);
  }
   nav{
    padding:10px;
 }

 .Zcontainer {
    padding:2px;
  }
#MyVideoCarrier{
  padding-top: 15px;
  padding-bottom: 15px;
  width: 500px;
  height:63vh;

}


#MyVideo{
  width: 100%;
  padding-bottom:5px;
  padding-top:5px;

  font-weight: 400;




}
#MyVideo h1{

  font-size: 3em;
  line-height: 1.2;

}
#MyVideo h2{

  font-size: 2.2em;
  font-weight: 300;

}

#MyVideo p {

  font-size: 2.2em;
  font-weight: 200;
}
.MyVIDEOCardContainer{

  
  row-gap: 20px;

}
.MyVIDEOCard{
  width:490px;
  min-height: 500px;
}
.MyVIDEOCard video{


  border-radius: 15px;
  max-width: 85%;

}

.MyVIDEOCard video:hover{
  margin-left:47%;
  margin-top:47%;

}
#MyPoetryCarrier{
  padding-top: 5px;
  padding-bottom: 5px;
  
  max-width: 800px;
  max-height:75vh;
  width: 75vw;
  height: 75vh;

}


#MyPoetry{

  top: 33px;
 
  margin-top: 10px;

  max-width: 95%;
  min-width: 95%;



  min-height: 200px;
  height:auto;

  


}

.DincaraINTRO{

  font-size: 1.2em;


width: 99%;
min-height: 30px;


}

.DincaraINTRO h2{

  font-size: 1.5em; 
}
.DincaraINTROrefs {

  font-weight: bold;
  font-size: 1.1em; 

  
}
.DincaraINTROrefs h3{
  font-size: 1.2em;

}
.DincaraINTROrefs a{

  font-size: 1.1em; 
  
}
.DincaraINTROrefs a:hover {

  font-size: 1.1em; 

  
}


.Dincara{

  font-weight: 400;

  width: 97%;

  



}
.Dincara h1{

  font-size: 2em;
}
.Dincara h2{

  font-size: 1.6em;
}
.Dincara h3{

  font-size: 1.7em;
  line-height: 1.2;

}
.Dincara h4{

  font-size: 1.0em;
}

.DincaraPoem{
  font-weight: 300;
  font-size: 1.6em;

  width: 75%;
  line-height: 1.2;



}
.DincaraPoem h5{
  font-size: 1.8em;

}
#MySearch .Tit p{
  font-size: 1.5em; 
  padding-left: 4px;
  padding-right: 4px;

  

}
.Searcher label, input{

  font-size: 1.5em; 

}
.Searcher input{

  font-weight: bold;
  font-size: 1.5em; 

}
.Searcher button{
  font-size: 1.5em;
}
#MyLinksCarrier{




    position: fixed;
    top:100%;
    left:50%;

    transform: translate(-50%, 0%);

    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:first baseline;



    
    max-width: 800px;
    max-height:75vh;
    width: 75vw;
    height:65vh;

    background-color: rgb(9, 44, 6);
    border: double 15px rgba(68, 210, 111, 0.935);
    border-radius: 5%;

    overflow-x:hidden;
   


    z-index: 450;



 }


 #MyLinks{


    top: 53px;
    margin-top: 10px;
    width: 95%;
    min-height: 200px;
    height:auto;
 }
 .LxWords{
  max-width:99%;
  font-weight: bold;
  font-size: 1.5em; 

 }

  .LxWords article a {
  font-weight: 800;
  font-size: 3em;

  
 }




}

@media screen and (min-width: 768px) {
  .ZTitle p{

    font-size:1.7em;


}
.Title h1 {
  line-height:1.8em;
}
.Title__filled {
 line-height:1.8em;
}
.Title  {
  line-height:2em;

}
}
@media screen and (min-width: 1024px) {
  .ZTitle p{

    font-size:1.8em;
  }
    #MyInformationCarrier{
    max-width: 800px;
    max-height:75vh;
    width: 800px;
    height:65vh;
  }

  .DincaraINTRO{

  font-size: 1.8em;


width: 99%;
min-height: 30px;


}

.DincaraINTRO h2{

  font-size: 2em; 
}
.DincaraINTROrefs {

  font-weight: bold;
  font-size: 1.6em; 

  
}
.DincaraINTROrefs h3{
  font-size: 1.34em;

}
.DincaraINTROrefs a{

  font-size: 1.5em; 
  
}
.DincaraINTROrefs a:hover {

  font-size: 1.5em; 

  
}


.Dincara{

  font-weight: 400;

  width: 97%;

  



}
.Dincara h1{

  font-size: 2.8em;
}
.Dincara h2{

  font-size: 2em;
}
.Dincara h3{

  font-size: 2em;
  line-height: 1.2;

}
.Dincara h4{

  font-size: 1.0em;
}

.DincaraPoem{
  font-weight: 300;
  font-size: 2.3em;

  width: 75%;
  line-height: 1.2;



}
.DincaraPoem h5{
  font-size: 1.8em;

}
#MyGalleriesCarrier{
    padding-top: 15px;
    padding-bottom: 15px;
    width: 95vw;
    max-width:800px;

}
}

@media screen and (min-width: 1280px) {
 #MyMenuCarrier{

    top:30%;
    left:165%;
    transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    -o-transform: translate(-50%,0%);
}
  .ZTitle p{

    font-size:2em;
  }
  #MyGalleriesCarrier{
    padding-top: 15px;
    padding-bottom: 15px;
    width: 95vw;
    max-width:1200px;

}
#MyVideoCarrier{
  padding-top: 15px;
  padding-bottom: 15px;
  width: 90vw;
  max-width: 1050px;
  height:63vh;

}
.Title h1 {
  line-height:2em;
}
.Title__filled {
 line-height:2em;
}
.Title  {
  line-height:1.8em;

}

}