@font-face {
	font-family: fon;
    src: url(tailwind.ttf);	
}
/* The Big Headline Txt : Whatcha Watchin ? */
.headline{
font-size:90px;
font-family: fon;

}

.layer{
	position: absolute;
    top:10%;
    left: 5%;
    right:50%;
}

body{
overflow-x: hidden;
overflow-y: hidden;
background-image: url("mediaNstuff/tv.jpg") ;
background-repeat: no-repeat;
background-size: 100% 100%;
box-shadow: inset 0 0 10000px black;
}

.box{
    position: absolute;
    top:30%;
    left: 51%;
    right:5%;
	height: 45%;
	width: 40%;
	border-radius: 80px;
	border-color: grey;
	box-shadow: 0px 0px 20px 1px #404040;
font-size:30px;
font-family: fon;
}


/*buttons customizatoiions*/

.buttons .wrong {
	position: absolute;
	z-index: 10;
	font-size: 25px;
	top: 40%;
	left: 10px;
	font-weight: 700;
  
}
.buttons .right {
  right: 10px;
  position: absolute;
  font-size: 25px;
  z-index: 10;
  top: 40%;

}

.buttons .nav-btn {
  border-width: 0;
  cursor: pointer;
  border-radius: 50%;
  width: 12%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.buttons .wrong:hover {
	background: #FFcccb;
}

.buttons .right:hover {
  background: #90ee90;
}
/*--------------Image class Start------------*/
.icon{
  width: 100%;
  height: 100%;
  opacity: 0.8;
}
.img{
 display: flex;
 align-items: center;
  justify-content: center;
  margin: 5%;
  height: 65%;
}

.imgclass{
  
  width:  65%;
  object-fit: scale-down;
}
.upper{
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.down{
  z-index: 1;
}

.title{
    display: flex;
  align-items: center;
  justify-content: center;
  font-size:15px;
  text-align: center;
  z-index: 50;
}

/* ---------ToolTip Hover Code CopyPasta START----------- */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  font-family: fon;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* ---------ToolTip Hover Code CopyPasta END----------- */
/* ---------ToolTip Bottom Hover Code CopyPasta start----------- */
.tooltip .tooltipbot{
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
  font-family: fon;
}

.tooltip .tooltipbot::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltipbot {
  visibility: visible;
}

/* ---------ToolTip Bottom Hover Code CopyPasta END----------- */