@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
  background:#ede8f1;
  font-family: 'Poppins', "lucida grande", "Segoe UI", arial, verdana, "lucida sans unicode", tahoma, sans-serif;
  color: #a256af;
  margin:0 auto;
  overflow: hidden; 
  position:relative
}
.holder {
  margin:0 auto;
  overflow: hidden; 
}
p.contact {
  font-size: 20px;
}
p.stream {
  font-size: 22px;
  padding-bottom: 10px;
  max-width: 75%;
}
p.logo {
  margin-top: 3em;
  margin-bottom: 5em;
  width: 20em;
}
p.social {
  padding:7em 0 20em 0;
  width: 15em;	
}
.social img{
    width: 5em;
}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
}
a, a:hover, a:active, a:visited, strong {
  color: #a256af;
}
  .social {
    margin: auto;
    width: 15em;
    padding-top: 3em;
    padding-bottom: 3em;
    }
  img.social-left {
    float: left;
  }
  img.social-right {
    float: right;
  }
.bar{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
	z-index:999999;
	overflow: auto;
}
.videoWrapper {
	position: relative;
	width: 100vw;
	height: 100vh; /* Full viewport height */
	overflow: hidden;
  }
  iframe.lightwidget-widget {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; /* Fills the width of .videoWrapper */
	height: 100%; /* Fills the height of .videoWrapper */
	border: none;
	overflow: hidden;
  }
  @media only screen and (max-width: 768px) { 
	  p.logo {margin-top: 150px; padding-bottom: 5em; padding-top: 10em;}
	  p.social {padding-bottom: 15em !important;}
	  iframe.lightwidget-widget {width: 225% !important;position: absolute;left: 50%;transform: translateX(-50%);}
	}
 * {
	 box-sizing: border-box;
}
 .button-container {
   position: relative;
   width: 20em;
   margin: 2em;
}
 .button-container button {
	 color: #a256af;
	 padding: 10px 20px;
	 font-family: 'Poppins', sans-serif;
	 font-size: 2em;
	 background-color: #fff;
	 border: 5px solid #a256af;
	 border-radius: 20px;
	 cursor: pointer;
	 position: relative;
	 box-sizing: border-box;
     height: 6em;
     width: 10em;
}
 .button-container:hover .dog {
	 transform: translate(20px, -55px) rotate(15deg);
	 transition-delay: 0.6s;
}
 .button-container:hover .paw {
	 transition-delay: 0.3s;
	 right: -5px;
}
 .button-container:hover .paw::after {
	 transition-delay: 0s;
	 left: 0;
}
 .button-container:hover .paw.top {
	 transition-delay: 0.4s;
	 right: 40px;
	 top: -8px;
}
 .button-container:hover .tail {
	 opacity: 1;
	 transition-delay: 0.6s;
}
 .dog {
	 position: absolute;
	 width: 65px;
	 height: 65px;
	 top: -10px;
	 right: 1px;
	 transform: translate(0, 0) rotate(0);
	 transition: 0.3s transform cubic-bezier(0.33, 1, 0.68, 1);
}
 .dog div {
	 position: absolute;
}
 .dog .tail {
	 width: 10%;
	 height: 35%;
	 left: -50%;
	 bottom: -34%;
	 transform: rotate(-25deg);
	 transition: 0.1s opacity;
	 transition-delay: 0s;
	 opacity: 0;
}
 .dog .tail::after {
	 content: '';
	 position: absolute;
	 transform-origin: bottom center;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 border-radius: 50% 50% 0 0;
	 background-color: #e1a46e;
	 animation: infinite alternate tailSkew 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
 @keyframes tailSkew {
	 from {
		 transform: skewX(15deg);
	}
	 to {
		 transform: skewX(-15deg);
	}
}
 .dog .body {
	 width: 70%;
	 height: 50%;
	 bottom: -20%;
	 left: 50%;
	 transform: translateX(-50%);
	 background-color: #9f6a43;
	 border-radius: 50% 50% 0 0;
}
 .dog .head {
	 width: 65%;
	 height: 70%;
	 bottom: 5%;
	 left: 50%;
	 transform: translateX(-50%);
	 border-radius: 80% 80% 60% 60%;
	 background-color: #e1a46e;
}
 .dog .nuzzle {
	 width: 70%;
	 height: 40%;
	 bottom: 0%;
	 left: 50%;
	 transform: translateX(-50%);
}
 .dog .nuzzle::before, .dog .nuzzle::after {
	 content: '';
	 width: 50%;
	 height: 100%;
	 display: inline-block;
	 position: absolute;
	 top: 0;
	 left: 0;
	 background-color: #c28e5f;
	 border-radius: 70% 30% 50% 20%;
	 z-index: 1;
}
 .dog .nuzzle::after {
	 left: auto;
	 right: 0;
	 transform: scaleX(-1);
}
 .dog .mouth {
	 width: 50%;
	 height: 90%;
	 border-radius: 100%;
	 background-color: #111827;
	 left: 50%;
	 bottom: -20%;
	 transform: translateX(-50%);
}
 .dog .tongue {
	 width: 50%;
	 height: 50%;
	 background-color: #ef4444;
	 left: 50%;
	 transform: translateX(-50%);
	 bottom: 5%;
	 border-radius: 50%;
	 animation: 0.3s alternate tongueBounce infinite cubic-bezier(0.45, 0, 0.55, 1);
}
 @keyframes tongueBounce {
	 from {
		 bottom: 20%;
	}
	 to {
		 bottom: 15%;
	}
}
 .dog .nose {
	 width: 30%;
	 height: 20%;
	 left: 50%;
	 top: 0;
	 transform: translateX(-50%);
	 z-index: 10;
}
 .dog .nose::before {
	 content: '';
	 width: 100%;
	 height: 60%;
	 top: -50%;
	 left: 0;
	 position: absolute;
	 display: inline-block;
	 background-color: #1f2937;
	 border-radius: 1000px 1000px 0 0;
}
 .dog .nose::after {
	 content: '';
	 width: 100%;
	 height: 100%;
	 top: 10%;
	 left: 0;
	 position: absolute;
	 display: inline-block;
	 background-color: #1f2937;
	 border-radius: 0 0 1000px 1000px;
}
 .dog .nose .nostrils {
	 width: 90%;
	 height: 100%;
	 top: 0;
	 z-index: 1;
	 left: 50%;
	 transform: translateX(-50%);
}
 .dog .nose .nostrils::before {
	 content: '';
	 display: inline-block;
	 width: 30%;
	 left: 10%;
	 height: 100%;
	 position: absolute;
	 background-color: #000;
	 border-radius: 100%;
}
 .dog .nose .nostrils::after {
	 content: '';
	 display: inline-block;
	 width: 30%;
	 right: 10%;
	 height: 100%;
	 position: absolute;
	 background-color: #000;
	 border-radius: 100%;
}
 .dog .nose .highlight {
	 top: -50%;
	 left: 50%;
	 width: 80%;
	 height: 30%;
	 transform: translateX(-50%);
	 background-color: #fff;
	 border-radius: 1000px 1000px 0 0;
	 background: linear-gradient(#fff, rgba(255, 255, 255, 0));
	 opacity: 0.3;
}
 .dog .eyes {
	 width: 80%;
	 height: 35%;
	 top: 25%;
	 transform: translateX(-50%);
	 left: 50%;
}
 .dog .eyes .left, .dog .eyes .right {
	 border-radius: 1000px;
	 background-color: #111;
	 width: 25%;
	 height: 52%;
	 top: 50%;
	 transform: translateY(-50%);
}
 .dog .eyes .left::after, .dog .eyes .right::after {
	 content: '';
	 display: inline-block;
	 position: absolute;
	 width: 30%;
	 height: 30%;
	 background-color: #fff;
	 opacity: 0.7;
	 border-radius: 1000px;
	 left: 15%;
	 top: 15%;
}
 .dog .eyes .left {
	 left: 15%;
}
 .dog .eyes .right {
	 right: 15%;
}
 .dog .ears {
	 width: 90%;
	 height: 90%;
	 top: 70%;
	 left: 50%;
	 transform: translate(-50%, -50%);
}
 .dog .ears div {
	 width: 30%;
	 height: 50%;
	 left: 0;
	 top: 0;
	 background-color: #9f6a43;
	 transform: rotate(15deg);
	 border-radius: 60% 20% 80% 10%;
	 z-index: 1;
}
 .dog .ears div.right {
	 transform: rotate(-15deg) scaleX(-1);
	 left: auto;
	 right: 0;
}
 .paw {
	 position: absolute;
	 right: -20px;
	 top: 15px;
	 overflow: hidden;
	 width: 20px;
	 height: 20px;
	 transition: 0.3s right cubic-bezier(0.33, 1, 0.68, 1);
}
 .paw::after {
	 content: '';
	 position: absolute;
	 left: -100%;
	 top: 0;
	 width: 100%;
	 height: 100%;
	 border-radius: 50%;
	 background-color: #e1a46e;
	 transition: 0.3s left cubic-bezier(0.33, 1, 0.68, 1);
	 transition-delay: 0.3s;
}
 .paw.top {
	 transform: rotate(-90deg);
	 top: -20px;
	 right: 40px;
	 transition: 0.3s top cubic-bezier(0.33, 1, 0.68, 1);
}