HTML  
{
   height: 100%;
}
BODY
{
   -cursor: wait;
   font-family: MyriadPro-Light;
   font-size: 18px;
   color: #dddddd;
   filter: DropShadow(Color=#000000, OffX=0, OffY=0);
   OVERFLOW: auto;
   WIDTH: 100%;
   height: 100%;
   PADDING: 0px;
   MARGIN: 0px;
   Z-INDEX: 0;
   background-size: cover;
   background-color: black;
}
A {
	text-decoration: none;
	color: white;
}
A:hover {
	color: gold;
}
/* SHARED ################################################################# */
.mainTab
{
   -display: none;
   width: 100%;
   height: 100%;
}
.halfTab {
   -float: left;
   width: 50%;
   height: 100%;
}
.bttTab {
   z-index: 5;
   position: absolute;
   top: 73%;
   width: 100%;
   transition: opacity 1.2s;
}
.bttTab1 {
   top: 50%;
   margin-top: -28px;
}

.bttClose {
   cursor: default;
   font-size: 18px;
   position: relative;
   top: -37px;
   z-index: 10;
}
.bttClose1 {
   cursor: default;
   font-size: 16px;
   position: relative;
   top: -5px;
   z-index: 10;
}
.contTab {
   font-family: 'MyriadPro-Light';
   font-size: 20px;
   letter-spacing: 1px;
   position: absolute;
   bottom: 100%;
   width: 100%;
   height: 28%;
   border-top: solid 1px #777;
   z-index: 5;
   opacity: 0;
   transition: bottom 1s, opacity 1s;
}
.contTab1 {
   font-size: 16px;
   letter-spacing: 0px;
   width: 100%;
   height: 60%;
   border-top: solid 1px #777;
   z-index: 5;
   opacity: 0;
   transition: bottom 1s, opacity 1s;
}
.ytTab {
   font-family: 'MyriadPro-Light';
   font-size: 20px;
   -letter-spacing: 1px;
   position: absolute;
   top: -61%;
   width: 100%;
   height: 55%;
   z-index: 10;
   opacity: 0;
   transition: top 1s, opacity 1s;
}
.ytTab1 {
   top: -61%;
   left: -2px;
   width: 100%;
   height: 31%;
}

iframe {
   height: 100%;
   aspect-ratio: 16 / 9;
   background-color: black;
   border: 0;
   box-shadow: 0px 0px 25px 0px #44c2e7;
}
.iframe1 {
   height: 100%;
   aspect-ratio: 16 / 9;
   background-color: black;
   border: 0;
   box-shadow: 0px 0px 25px 0px #44c2e7;
}

.black {
   background: linear-gradient(to bottom, rgb(0,0,0,.7) 0%, rgb(0,0,0,.7) 100%);
}
.black1 {
   background: linear-gradient(to bottom, rgb(0,0,0,.9) 0%, rgb(0,0,0,.9) 100%);
}
.infoBtt {
   font-family: 'MyriadPro-Light';
   font-size: 23px;
   font-weight: bolder;
   letter-spacing: 3px;
   padding: 10px 25px 10px 30px;
   border: 3px solid white;
   border-radius: 25px 10px 25px 10px;
   background-color: black;
   box-shadow: 0px 0px 15px #000;
   text-shadow: 3px 3px 2px #000;
   transition: transform .4s;
}
.infoBtt1 {
   transition: transform .4s;
}

.infoBtt:hover {
   cursor: pointer;
   transform: scale(1.15);
}
.copyR {
   cursor:default;
   z-index: 10;
   font-family: Arial;
   font-size: 16px;
   color: #888;
   position: fixed;
   bottom: 0px;
   width: 100%;
   background: black;
   opacity: .60;
   transition: color .2s
}
.copyR:hover {
   color: white;
}
.copyR1 {
   font-size: 12px;
   color: #aaa;
   position: fixed;
   bottom: 0px;
   width: 100%;
   background: black;
   opacity: .60;
}
.icon {
   position: relative;
   height: 25px;
   bottom: 4px;
   margin-left: 1px;
   margin-right: 3px;
}
.flag {
   position: relative;
   width: 25px;
   height: 18px;
   bottom: 4px;
   margin-left: 2px;
   margin-right: 2px;
   margin-top: 2px;
   box-shadow: inset 0px 0px 20px 10px black;
   transition: transform .2s;
}
.flag:hover {
   transform: scale(1.3);
}

/* diamondEyes ################################################################# */
.diaETab1 {
   background-image: url('../img/bg/diamondEyes.png');
   background-repeat: no-repeat;
   background-position: 65% top;
   background-size: 120%;
   width: 100%;
   height: 100%;
}
.diaETab11 {
   background-position: 65% 10%;
   background-size: 110%;
}

.diaETab2 {
   width: 100%;
   height: 100%;
}

.diaELogo {
   position: relative;
   width: 70%;
   margin-top: 40px;
   filter: drop-shadow(0 0 1rem black);
}
.diaELogo1 {
   -width: 67%;
   margin-top: 20px;
}

.diaESub {
   background-image: linear-gradient(to bottom, rgb(0,0,0,0) 0%, rgb(0,0,0,.55) 40%, rgb(0,0,0,1) 100%);
   font-family: 'MyriadPro-Regular';
   font-size: 22px;
   letter-spacing: 10px;
   height: 30%;
   padding-bottom: 10%;
   text-shadow: #000 0px 0px 15px;
}
.diaESub1 {
   font-size: 15px;
   letter-spacing: 4px;
   padding-bottom: 12%;
}

/* Back to Amy ################################################################# */
.b2aTab1 {
   background-image: linear-gradient(to right bottom, #666, #090909);
   background-repeat: no-repeat;
   background-size: 100%;
   width: 100%;
   height: 100%;
}
.b2aTab2 {
   background-image: url('../img/bg/Amy_siluette.png');
   background-repeat: no-repeat;
   background-position: -75% 25%;
   background-size: 115%;
   width: 100%;
   height: 100%;
}
.b2aTab21 {
   background-position: -100% 45%;
   background-size: 108%;
}
.b2aLogo {
   position: relative;
   filter: drop-shadow(0 0 0.75rem black);
   width: 70%;
   margin-top: 40px;
}
.b2aLogo1 {
   width: 50%;
   height: 25%;
   top: 0px;
}

.b2aSub {
   font-family: 'MyriadPro-Regular';
   font-size: 22px;
   letter-spacing: 10px;
   height: 40%;
   padding-bottom: 8%;
   text-shadow: #000 0px 0px 15px;
}
.b2aSub1 {
   font-size: 15px;
   letter-spacing: 4px;
   height: 20%;
   padding-bottom: 13%;
}
/* BOX   #######################################################################*/
.b2aLogo {
   filter: drop-shadow(0 0 0.75rem black);
   width: 70%;
   margin-top: 40px;
}

.imgYT1 {
   background-image: url('../img/bgBox/Show reel 2023.png');
}
.imgYT2 {
   background-image: url('../img/bgBox/Lullaby of Birdland.png');
}
.imgYT3 {
   background-image: url('../img/bgBox/Something Got Me Started.png');
}
.imgYT4 {
   background-image: url('../img/bgBox/Sweetie Pie 02.png');
}
.imgYT5 {
   background-image: url('../img/bgBox/Rio De Janeiro Blue.png');
}
.imgYT6 {
   background-image: url("../img/bgBox/You Know I'm No Good.png");
}
.boxYT {
   -width: 100%;
   -height: 100%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow: 0px 0px 15px #000;
   transition: transform .2s;
}
.boxYT:hover {
   cursor: pointer;
   transform: scale(1.15);
}

.ifBlu {
   border: solid 1px #44c2e7;
}
.ifRed {
   border: solid 1px #d84e68;
}
.ytBtt {
   width: 20%;
   aspect-ratio: 16 / 9;
   transition: width .2s;
}
/* ###################################################################################*/
/* ANIMATION   #######################################################################*/
/* ###################################################################################*/
.gradient-background {
   background: linear-gradient(-45deg,#d84e68,#a056ff,#44c2e7);
   background-size: 180% 180%;
   animation: gradient-animation 5s ease;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}

@keyframes gradient-animation {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}