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

@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:aliceblue;
    font-family: "Roboto", sans-serif;
    font-size: 1em;
	overscroll-behavior: none;
    max-width: 99vw;
    width: 99vw;
    background-image: url("/ICE-images/IMG-SRC/BG-Ice-750.jpg");
}

img, video {
  max-width: 100%;
  height: auto;
  border-style: none;
  border-radius: 5%;

}

.body22 {
	margin: 0;
    position:absolute;
    display: block;
	background-color: #000;
    top:10px;
    left:10;

	color:aliceblue;
    font-family: "Roboto", sans-serif;
    font-size: 1em;

    max-width: 99vw;
    width: 99vw;
    background-image: url("/ICE-images/IMG-SRC/BG-Ice-750.jpg");
}

.body22 img{


    position: absolute;
    display:block;
    top:10px;
    left:10px;
    margin:auto;
}


.LOGO{
    position:fixed;
    left:0px;
    top:0px;
    margin-top: 0px;
    max-width: 36px;
    width:36px;
    height: 36px;

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

    animation: glow2 3s infinite alternate;

    z-index:810;


}

.LOGO:hover{
    display:block;
    background-image: url("/ICE-images/Buttons/3DPoetry-OVER-smller.png");
    cursor:pointer;
    animation: glow3 2s infinite alternate;
    -webkit-animation: glow3 2s infinite alternate;
}
@keyframes glow3 {
    from {
      box-shadow: 0 0 10px -10px #449fdb;
      box-shadow: inset 0 0 20px -20px #8cc6d5;
    }
    to {
      box-shadow: 0 0 10px 10px #4d99cf;
      box-shadow: inset 0 0 20px 20px #7bb4c6;
      filter: brightness(1);
      -webkit-filter: brightness(1);
}
  }
  @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);
}
  }

.titleBAR{
    top:20px;
    left:50%;
    transform:translate(-50%,0);
    position:absolute;
    margin-top:12px;
    width: 85vw;
    max-width:1100px;
    padding-left: 20px;
    padding-right: 20px;

    margin: auto;
    text-align: center;
    font-family: "Bilbo Swash Caps", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5em;
    background-color: rgba(61, 61, 149, 0.95);
    z-index: 800;
    -webkit-transform:translate(-50%,0);
    -moz-transform:translate(-50%,0);
    -ms-transform:translate(-50%,0);
    -o-transform:translate(-50%,0);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    border-style: groove;
    -o-border-radius: 30px;
    border-width: 3px;
}
.titleBAR h1{
    font-size: 1.6em;
    font-weight: 400;
    text-shadow: 10px 5px 10px #b0aeb9;
    line-height:0.5em;
}
.titleBAR h2{
    font-size: 1.5em;
    font-weight: 200;
    text-shadow: 10px 5px 10px #b0aeb9;
    line-height:1.2em;

}

.titleBAR a{

    color:aliceblue;
}
.titleBAR a:hover {

    color:rgb(36, 153, 46);
}

.cardHolder{
    position:absolute;


    width: 95vw;
    max-width: 600px;

    left:50%;
    top:350px;
    transform:translate(-50%,0);
    padding: 15px;
 
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow-x: hidden;
    row-gap: 20px;

 
    -webkit-transform:translate(-50%,0);
    -moz-transform:translate(-50%,0);
    -ms-transform:translate(-50%,0);
    -o-transform:translate(-50%,0);
}

.container{
    width:99vw;

    overflow-x: hidden;
}

.containerMager{
    width:99vw;
    min-height: 150vh;
    height:max-content;
    background-color: rgb(60, 6, 49);
    background-image: url("/ICE-images/IMG-SRC/BG-224466.jpg");
    background-position: 0px 0px;
    background-repeat: repeat;
    z-index: 100;
    overflow-x: hidden;


}
.Mager{

    position: absolute;
    display:flex;

    width:98vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}
.Mager .Entitle{

    font-family: "Bilbo Swash Caps", cursive;
    font-weight: 600;
    font-style: normal;
    font-size: 1.2em;
    text-align: center;
    background-color: #3d0b30;
    padding:15px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-style: double;
    border-color: #b0aeb9;
    border-width: 1em;
}
.Mager .Entitled{
    font-family: "Bilbo Swash Caps", cursive;
    font-weight: 600;
    font-style: normal;

    font-size: 0.8em;  


}
.happyDays{

    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 0.5em; 
    text-align: justify;
    color: rgba(193, 183, 183, 0.84);
}
.Mager .mage{
    display: block;
    border-style: groove;
    border-color: darkgoldenrod;
    border-radius:20px ;
    -webkit-border-radius:20px ;
    -moz-border-radius:20px ;
    -ms-border-radius:20px ;
    -o-border-radius:20px ;
    border-width: 5px;
    max-width: 98%;
}
.Mager img{

    border-style: groove;
    border-color: darkgoldenrod;
    border-radius:20px ;
    -webkit-border-radius:20px ;
    -moz-border-radius:20px ;
    -ms-border-radius:20px ;
    -o-border-radius:20px ;
    border-width: 5px;
    max-width: 100%;
    height:auto;

}

.card{

    display:flex;
    flex-wrap: wrap;
    width:500px;
    min-height:650px;
    border-style: ridge;
    border-width: 5px;
    border-radius: 15px;
    background-color: rgba(61, 61, 149, 0.95);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    padding: 5px;
}
.card .titled{

    margin-top:5px;
    display: block;



    width:100%;


}
.card .titled a{

    margin-top:5px;
    display: block;

    color:aliceblue;

    width:100%;


}
.card .titled a:hover{

    margin-top:5px;
    display: block;

    color:aqua;

    width:100%;


}

.card .titled p{

    margin-top:5px;
    display: block;
    text-align:justify;
    font-size: 1em;
    font-weight: normal;

    line-height: 1.2em;

    width:100%;


}

.card .titled h3{

    font-family: "Bilbo Swash Caps", cursive;
    font-weight: 600;
    font-style: normal;
    font-size: 2.1em;

}
.card .titled h4{

	color:aliceblue;
    font-family: "Roboto", sans-serif;
    font-weight: 200;
    font-size: 1em;
}
.card .titled h5{

	color:aliceblue;
    font-family: "Roboto", sans-serif;
    font-weight: 200;
    font-size: 0.8em;
}


.card .holdMage{

    width:100%;

    text-align: center;

    min-height: 120px;

}
.card .holdMage img{
    max-width: 100%;
    height: auto;
    border-style: none;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-box-shadow: 0px 3px 0px 2px rgba(94, 58, 195, 0.106), 0px 6px 0px 4px rgba(94, 58, 195, 0.106), 0px 9px 0px 6px rgba(94, 58, 195, 0.106), 0px 12px 0px 8px rgba(94, 58, 195, 0.106), 0px 15px 0px 10px rgba(94, 58, 195, 0.106), 0px 18px 0px 12px rgba(94, 58, 195, 0.106), 0px 21px 0px 14px rgba(94, 58, 195, 0.106), 0px 24px 0px 16px rgba(94, 58, 195, 0.106), 0px 27px 0px 18px rgba(94, 58, 195, 0.106), 0px 30px 0px 20px rgba(94, 58, 195, 0.106), 15px 13px 15px 5px rgba(140,24,124,0);
    box-shadow: 0px 3px 0px 2px rgba(94, 58, 195, 0.106), 0px 6px 0px 4px rgba(94, 58, 195, 0.106), 0px 9px 0px 6px rgba(94, 58, 195, 0.106), 0px 12px 0px 8px rgba(94, 58, 195, 0.106), 0px 15px 0px 10px rgba(94, 58, 195, 0.106), 0px 18px 0px 12px rgba(94, 58, 195, 0.106), 0px 21px 0px 14px rgba(94, 58, 195, 0.106), 0px 24px 0px 16px rgba(94, 58, 195, 0.106), 0px 27px 0px 18px rgba(94, 58, 195, 0.106), 0px 30px 0px 20px rgba(94, 58, 195, 0.106), 15px 13px 15px 5px rgba(140,24,124,0);
    transition:transform ease 400ms;
    -webkit-transition:transform ease 400ms;
    -moz-transition:transform ease 400ms;
    -ms-transition:transform ease 400ms;
    -o-transition:transform ease 400ms;
}


.card .holdMage img:hover{
    opacity:0.5;
    filter:sepia(0.2) brightness(1.5);
    -webkit-box-shadow: 0px 3px 0px 2px rgba(58, 195, 117, 0.106), 0px 6px 0px 4px rgba(58, 195, 117, 0.106), 0px 9px 0px 6px rgba(58, 195, 117, 0.106), 0px 12px 0px 8px rgba(58, 195, 117, 0.106), 0px 15px 0px 10px rgba(58, 195, 117, 0.106), 0px 18px 0px 12px rgba(58, 195, 117, 0.106), 0px 21px 0px 14px rgba(58, 195, 117, 0.106), 0px 24px 0px 16px rgba(58, 195, 117, 0.106), 0px 27px 0px 18px rgba(58, 195, 117, 0.106), 0px 30px 0px 20px rgba(58, 195, 117, 0.106), 15px 13px 15px 5px rgba(140,24,124,0);
    box-shadow: 0px 3px 0px 2px rgba(58, 195, 117, 0.106), 0px 6px 0px 4px rgba(58, 195, 117, 0.106), 0px 9px 0px 6px rgba(58, 195, 117, 0.106), 0px 12px 0px 8px rgba(58, 195, 117, 0.106), 0px 15px 0px 10px rgba(58, 195, 117, 0.106), 0px 18px 0px 12px rgba(58, 195, 117, 0.106), 0px 21px 0px 14px rgba(58, 195, 117, 0.106), 0px 24px 0px 16px rgba(58, 195, 117, 0.106), 0px 27px 0px 18px rgba(58, 195, 117, 0.106), 0px 30px 0px 20px rgba(58, 195, 117, 0.106), 15px 13px 15px 5px rgba(140,24,124,0);
    -webkit-filter:sepia(0.2) brightness(1.5);
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}




.card .tale{

	color:aliceblue;
    font-family: "Roboto", sans-serif;
    font-weight: 200;
    font-size: 1em;
}


@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) {

.LOGO{

    left:25px;
    top:25px;
    margin-top: 25px;
}
.titleBAR{
    top:20px;

    margin-top:12px;
    max-width:500px;
    padding-left: 20px;
    padding-right: 20px;


    font-weight: 400;
    font-style: normal;
    font-size: 1.6em;


}
.titleBAR h1{
    font-size: 2.1em;
    font-weight: 400;

    line-height:0.5em;
}
.titleBAR h2{
    font-size: 1.5em;
    font-weight: 200;

    line-height:0.5em;

}
.cardHolder{
    width: 95vw;
    max-width: 600px;


    top:350px;



}

.happyDays{


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

}


}

@media screen and (min-width: 768px) {
  .gfg-div {
    background-color: #031606;
    color: #fff;
  }

}

@media screen and (min-width: 1024px) {
  .gfg-div {
    background-color: #ed0909;
    color: #fff;
  }
  .LOGO{

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

    background-image: url("/ICE-images/Buttons/3DPoetry-OFF-sml.png");



}

.LOGO:hover{

    background-image: url("/ICE-images/Buttons/3DPoetry-OVER-sml.png");

}
}

@media screen and (min-width: 1280px) {
.cardHolder{
    width: 95vw;
    max-width: 1150px;


    top:350px;



}
}