/*  ////////////           Cafe.css            ////////////////////              */


/*  ////////////           Var            ////////////////////              */

:root {
	
  --paint_banner_color: rgba(100, 10, 10, .8);  
  --paint_item_color: rgba(200, 10, 10, .8);
  --paint_tag_color: rgba(100, 10, 10, .8);
  --paint_foot_color: rgba(100, 10, 10, .8);

  --music_banner_color: rgba(5, 5, 5,  .5);  
  --music_item_color: rgba(50, 50, 251, .8);
  --music_tag_color: rgba(100, 100, 200, .8);
  --music_player_color: rgba(50, 50, 251, .8);
  --music_foot_color: rgba(100, 100, 200, .8);

  --writer_banner_color: rgba(255, 255, 255, .8); 
  --writer_item_color: rgba(255, 255, 255, .5);
  --writer_tag_color: rgba(5, 5, 5, 1);
  --writer_h2_color: rgba(5, 5, 5, 1);  
  --writer_foot_color: rgba(0, 0, 0, .9);
  --writer_foot_text_color: rgba(255, 255, 255, 1);
   --writer_p_color: rgba(5, 5, 5, .8);

}

/*  ////////////          end Var            ////////////////////              */


  
.wrapper {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;

}

/*  ////////////           Header           ////////////////////              */

header {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	transform-style: preserve-3d;
	z-index: -1;
}

@font-face {
    font-family: segoe;
    src: url(fonts/segoesc.ttf);
}

 img.mainheader {
	display: block;
	position:relative; left:0; top:0; right:0;   margin: 0 auto; 
	width: 100%;
	opacity: 1;
}

 .menu {
	display: block;
	position:relative; left:0; top:0; right:0; 
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:0px;
	width: 60%;
	opacity: 1;
	transform-style: preserve-3d;
	z-index: -1;
}


/*  ////////////           Body            ////////////////////              */

 body {
	background-image: url('/img/bg/bg.avif');
	background-repeat: repeat-y;
	background-attachment: fixed;  
	background-size: cover;
	margin: 0;
}



/*  ////////////           Music            ////////////////////              */


 .item_music {
  display: block;
	position:relative; left:0; top:0; right:0;   margin: 0 auto; 
	margin-top:0px;
	background: var(--music_item_color);
	width: 80%;
	opacity: 1;
	border-top:    3px solid;
	border-right:  3px solid;
	border-bottom: 3px solid;
	border-left:   3px solid;
	border-radius: 10px 10px 5px 5px ;
}

 img.item_banner_music {
	display: block;
	position:relative; left:0; top:0; right:0;   margin: 0 auto; 
	width: 100%;
	opacity: 0.9;
	border-top:    0px solid;
	border-right:  0px solid;
	border-bottom: 3px solid;
	border-left:   0px solid;
	border-color: black;
	background: var(--music_banner_color);

}

 img.item_face_music {
	display: block;
	position:relative; left:0; top:0; right:0;   margin: 0 auto; 
	margin-top: 15px;
	width: 90%;
	opacity: 0.9;
	border-top:    3px solid;
	border-right:  3px solid;
	border-bottom: 0px solid;
	border-left:   3px solid;
	border-color: black;

}

.item_music_tag{
	font-weight: bold;
	border-top:    0px solid;
	border-right:  3px solid;
	border-bottom: 3px solid;
	border-left:   3px solid;
	border-color: black;
	padding-top:10px;
	padding-bottom:10px;
	background: var(--music_tag_color);
}

 .player_music {
  display: block;
	position:relative; left:0; top:0; right:0;   margin: 0 auto; 
	margin-top:0px;
	background: var(--music_player_color);
	width: 80%;
	opacity: 1;
 }
 
.footer_music {
	font-weight: bold;
	font-size: 12px;
	text-align:right;
	text-indent:-20px;
	border-top:    0px solid;
	border-right:  3px solid;
	border-bottom: 3px solid;
	border-left:   3px solid;
	border-color: black;
	background: var(--music_foot_color);
}


/*  ////////////           Paint            ////////////////////              */


 .item_paint {
  display: block;
	position:relative; left:0; top:0; right:0;   margin: 0 auto; 
	margin-top:0px;
	background: var(--paint_item_color);
	width: 80%;
	opacity: 1;
	border-top:    3px solid;
	border-right:  3px solid;
	border-bottom: 3px solid;
	border-left:   3px solid;
	border-radius: 10px 10px 5px 5px ;
}

 img.item_banner_paint {
	display: block;
	position:relative; left:0; top:0; right:0;   margin: 0 auto; 
	width: 100%;
	opacity: 0.9;
	border-top:    0px solid;
	border-right:  0px solid;
	border-bottom: 3px solid;
	border-left:   0px solid;
	border-color: black;

	background: var(--paint_banner_color);
}

 img.item_face_paint {
	display: block;
	position:relative; left:0; top:0; right:0;   margin: 0 auto; 
	margin-top: 15px;
	width: 90%;
	opacity: 0.9;
	border-top:    3px solid;
	border-right:  3px solid;
	border-bottom: 0px solid;
	border-left:   3px solid;
	border-color: black;

}

.item_paint_tag{
	font-weight: bold;
	border-top:    0px solid;
	border-right:  3px solid;
	border-bottom: 0px solid;
	border-left:   3px solid;
	border-color: black;
	background: var(--paint_tag_color);
	padding-top:10px;
	padding-bottom:10px;
}

 img.painting {
	display: block;
	position:relative; left:0; top:0; right:0;   margin: 0 auto; 
	width: 90%;
	border-top:    0px solid;
	border-right:  3px solid;
	border-bottom: 3px solid;
	border-left:   3px solid;
	border-color: black;
	opacity: 1;
}

.footer_paint {
	font-weight: bold;
	font-size: 12px;
	text-align:right;
	text-indent:-20px;
	border-top:    0px solid;
	border-right:  3px solid;
	border-bottom: 3px solid;
	border-left:   3px solid;
	border-color: black;
	background: var(--paint_foot_color);
}


/*  ////////////           writer            ////////////////////              */


 .item_writer {
  display: block;
	position:relative; left:0; top:0; right:0;   margin: 0 auto; 
	margin-top:0px;
	background: var(--writer_item_color);
	width: 80%;
	opacity: 1;
	border-top:    3px solid;
	border-right:  3px solid;
	border-bottom: 3px solid;
	border-left:   3px solid;
	border-radius: 10px 10px 5px 5px ;
}

 img.item_banner_writer {
	display: block;
	position:relative; left:0; top:0; right:0;   margin: 0 auto; 
	width: 100%;
	opacity: 0.9;
	border-top:    0px solid;
	border-right:  0px solid;
	border-bottom: 3px solid;
	border-left:   0px solid;
	border-color: black;

	background: var(--writer_banner_color);
}

 img.item_face_writer {
	display: block;
	position:relative; left:0; top:0; right:0;   margin: 0 auto; 
	margin-top: 15px;
	width: 90%;
	opacity: 0.9;
	border-top:    3px solid;
	border-right:  3px solid;
	border-bottom: 0px solid;
	border-left:   3px solid;
	border-color: black;

}

.item_writer_tag{
	border-top:    0px solid;
	border-right:  3px solid;
	border-bottom: 3px solid;
	border-left:   3px solid;
	border-color: black;
	font-weight: bold;
	background: var(--writer_tag_color);
	padding-top:10px;
	padding-bottom:10px;
}

.item_writer_p{
	border-top:    0px solid;
	border-right:  3px solid;
	border-bottom: 3px solid;
	border-left:   3px solid;
	border-color: black;
	background: var(--writer_p_color);
		font-size:5vw;
}


.item_writer_h2{
	border-top:    3px solid;
	border-right:  0px solid;
	border-bottom: 3px solid;
	border-left:   0px solid;
	border-color: black;
	background: var(--writer_h2_color);
}

.footer_writer {
	font-weight: bold;
	font-size: 12px;
	text-align:right;
	text-indent:-20px;
	border-top:    0px solid;
	border-right:  3px solid;
	border-bottom: 3px solid;
	border-left:   3px solid;
	border-color: black;
	background: var(--writer_foot_color);
	color: var(--writer_foot_text_color);
}

/*  ////////////           END ITEM            ////////////////////              */

/*  ////////////           TAG            ////////////////////              */

 p {
	border: solid 3px;
	border-color: black;
	display: block;	
	/* background-color: #000;*/
	background: rgba(5, 5, 5,  .5);
	width: 90%;
	font-family: 'Loved by the King';
	  /*font-size: 50px;*/
	text-align: center;

	text-justify: inter-word;
	color: #FAEDE8;
	margin-bottom:0px;
	margin-top:0px;
	margin: auto;/*center item */
	position:relative; 
	font-size:3vw;
	-webkit-animation: fadeInLeft 5s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadeInLeft 5s; /* Firefox < 16 */
    -ms-animation: fadeInLeft 5s; /* Internet Explorer */
    -o-animation: fadeInLeft 5s; /* Opera < 12.1 */
    animation: fadeInLeft 5s;

}

h2 {
  background: rgba(5, 5, 5,  .5);
  width: 100%;
  font-family: 'Loved by the King';
  font-size: 4vw;
  text-align: center;
  color: #FAEDE8;
  position:relative; left:0; top:0; right:0;   margin: 0 auto; 
	padding-top:10px;
	padding-bottom:10px;
  -webkit-animation: fadeInLeft 5s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeInLeft 5s; /* Firefox < 16 */
  -ms-animation: fadeInLeft 5s; /* Internet Explorer */
   -o-animation: fadeInLeft 5s; /* Opera < 12.1 */
   animation: fadeInLeft 5s;	
	
	
} 


/*  ////////////           background foreground for parallax           ////////////////////              */

.background {
  transform: translateZ(-10px) scale(2);
}

.foreground {
  transform: translateZ(-5px) scale(1.5);
}

.background,
.foreground {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}




/*  ///////////////////////////////////////////////////////////////////////////////////////  */
/*  ///////////////////////////////////////////////////////////////////////////////////////  */
/*  ///////////////////////////////////////////////////////////////////////////////////////  */