@import url('https://fonts.googleapis.com/css?family=Arial&display=swap');
@import url('https://fonts.googleapis.com/css?family=Red+Hat+Text&display=swap');

body {width:100%; background-color:black; font-size:4vw; margin:0;border:0; text-align:center;color:white;font-family:Arial}
a {text-decoration:none;color:white;}
img {width:95%}
table {width:100%;margin:auto;border:1px solid white;text-align:center;table-layout: fixed}
th,td{width:25%;border:0px solid yellow}
#page {max-width:900px;margin:auto;text-align:center}
#header {width:100%;  background-repeat: no-repeat;}
#headerbuttoncontainter {padding:1vw;margin:4vw;margin-bottom:9vw;display:none}
#headerbuttoncontainter img {width:50%;display:none}
#headerbuttonshare {display:none;float:right;width:10%;background:gray;min-height:4vw;max-height:4vw;padding:2vw;text-align:center;vertical-align:middle;margin-left:2vw;justify-content: center;align-items: center;border-radius:1vw;margin-right:0vw}
#headerbuttonshare:active {background-color: red; box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0.5) inset;}
#headerbuttonsubscribe {float:right;width:30%;background:gray;padding:2vw;min-height:4vw;max-height:4vw;text-align:center;vertical-align:middle;display:none; justify-content: center;align-items: center;border-radius:1vw}
#headerbuttonsubscribe:active {background-color: red; box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0.5) inset;}
#headerbuttonprofile {display:none;}
#socials {margin-bottom:2vw;}
#socials img {width:80%;}
#socials td {position: relative;
  animation-name: bounce;
  animation-duration: 0.5s;}
#socials td:active { animation-name: none;
  transform: scale(1.2);}
#profilepicture {width:86%;text-align:left;margin-left:7%;margin-right:7%;margin-top:3vw}
#profilepicture img {width:40%;}
#container {display:flex;width:90%;background-color:white;margin:auto;margin-top:4vw;border-bottom:1vw solid yellow;min-height:15vw;vertical-align:middle;border-radius:2vw;  justify-content: center; align-items: center;}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#containertext {width:100%;display:block;justify-content: center; align-items: center;
;padding:2vw;color:black;text-align:center;vertical-align:middle;}
#containernobg {width:90%;background-color:transparent;margin:auto;margin-top:5vw;}
#newsletter {width:90%;background-color:transparent;margin:auto;margin-top:5vw;border-radius:2vw;}
		.bounce {
			animation: bounce 1s ease;
		}

		@keyframes bounce {
			0% { transform: translateY(0); }
			50% { transform: translateY(-20px); }
			100% { transform: translateY(0); }
		}
#container img {clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 80%);
			width: 100%; /* adjust the width as needed */
			height: auto;display:flex;vertical-align:middle;text-align:center;align-items:center;margin:auto;padding:0px;margin-top:2vw}
#newsletter input { max-width:40%;font-size:1vw;background:white;padding:2vw;min-height:5vw;max-height:5vw;text-align:center;vertical-align:middle; justify-content: center;align-items: center;border-radius:1vw;border:0}

.blink {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}