body {
        margin: 0;
        padding: 0;
        font-family: Roboto, sans-serif;
        font-size: 18px;
        line-height: 1.4;
    }

    h1 {
        margin: 0;
        padding: 0;
        font-family: Roboto, sans-serif;
        font-size: 28px;
        line-height: 1.2;
    }

    .video-container {
        position: relative;
        overflow: hidden;
        background-color: #333333;
        margin: 0;
        padding: 0;
    }

    .video-container iframe {
        width: 100%;
        max-width: 980px;
        min-height: 520px;
        margin: 0 auto;
        display: block;
        border: none;
    }

	.shield-overlay {
		width: 100%;
		max-width: 980px;
		height: 25%;
		background-color: rgba(0, 0, 0, 0);
		border: none;
		
		z-index: 1;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.shield-overlay2 {
		width: 100%;
		max-width: 980px;
		height: 40%;
		background-color: rgba(0, 0, 0, 0);
		border: none;
		
		z-index: 1;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	
    .content {
        text-align: center;
        margin-top: 20px;
    }

    .text-block {
        max-width: 60%; /* Adjust the maximum width as needed */
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 28px;
		text-align: center;
    }

    .large-button {
        display: inline-block;
        padding: 12px 14px;
        background-color: #f06100;
        color: #fff;
        text-decoration: none;
        border-radius: 20px;
        font-size: 22px;
        margin-top: 18px;
    }

    .email-input {
        text-align: center;
        border: none;
        border-bottom: 2px solid #ccc; /* Set the underline style and color */
        padding: 5px; /* Adjust padding as needed */
        font-size: 22px;
        outline: none; /* Remove the rectangular highlight on focus */
        width: 320px;
        margin-bottom: -5px;
    }

    @media (max-width: 768px) {
        .video-container {
            width: 100%; /* Set the width to 100% to occupy the full width of the screen */
            height: auto; /* Allow the height to adjust based on the aspect ratio */
        }

        .video-container iframe {
            min-height: 260px; /* Set a minimum height of 260px for phone screens */
            width: 100%; /* Ensure the video occupies the full width of the container */
            height: 100%; /* Allow the height to adjust based on the aspect ratio */
        }

        .text-block {
            max-width: 90%; /* Adjust the maximum width of the text block for smaller screens */
        }

        .email-input {
            max-width: 68%; /* Adjust the maximum width of the email input for smaller screens */
        }
    }
	
	#form-container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  margin: 0 auto;
	  max-width: 360px;
	  padding: 20px;
	  border: 2px solid #ccc;
	  border-radius: 10px;
	  background-color: #f9f9f9;
	  font-family: Arial, sans-serif;
	  font-size: 15px;
	  color: grey;
	  font-weight: normal;
	}

	#user-form label {
	  display: block;
	  margin-bottom: 10px;
	  margin-top: -4px;
	  font-weight: normal;
	  color: #333;
	}


	#user-form input[type="text"],
	#user-form input[type="email"] {
	  width: calc(100% - 20px); /* Adjusting for padding */
	  padding: 10px;
	  margin-bottom: 10px;
	  border: 2px solid #ccc;
	  border-radius: 4px;
	  box-sizing: border-box;
	}

	#user-form input[type="submit"] {
	  width: calc(100% - 20px); /* Adjusting for padding */
	  background-color: #488b48;
	  color: white;
	  padding: 10px 20px;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	  font-size: 16px;
	}


	#user-form input[type="submit"]:hover {
	  background-color: #45a049;
	}

	.form-field {
	  color: #333;
	}

	.form-field input[type="text"],
	.form-field input[type="email"] {
	  color: #333;
	  font-size: 14px;
	  padding: 8px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  box-sizing: border-box;
	  margin-bottom: 10px;
	  width: 100%;
	}

	.videoWrapper2 {
	  position: relative;
	  padding-bottom: 56.25%; /* 16:9 aspect ratio */
	  height: 0;
	}

	.videoWrapper2 video {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
	}
				
	.videoWrapper {
	  position: relative;
	}

	.overlay {
	  position: absolute;
	  top: 0;
	  left: 0;
	  background-color: rgba(0, 0, 0, 0);
	  color: #000;
	  padding: 0px 10px;
	}

	.floating-icon {
	  position: fixed;
	  bottom: 20px;
	  right: 20px;
	  z-index: 9999;
	}

	.floating-icon img {
	  width: 50px;
	  height: 50px;
	  border-radius: 50%;
	  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
	}

	#messenger-icon {
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 9999;
	}

	.fb-share-button img {
	  display: block;
	  height: auto;
	  max-width: 100%;
	  margin-top: 10px;
	  margin-bottom: 5px;
	}

	.error {
	  border: 2px solid red;
	}


	@media (max-width: 360px) {
	  pre {
		font-size: 20px;
	  }
	}
	
	.timestamp-btn {
		display: block;
		margin: 10px auto;
		padding: 10px;
		background-color: #488b48;
		color: #fff;
		text-decoration: none;
		border-radius: 22px;
		font-size: 18px;
		text-align: center;
		letter-spacing: 0.5px;
		cursor: pointer;
		max-width: 100%; /* set the maximum width to 100% */
		width: 100%; /* set the width to 100% */
	}
	
	.supporter-item {
		flex: 0 0 100px; /* Set fixed width for each item (100px in this case) */
		margin: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
	  }
	  .supporter-name {
		text-decoration: none;
		color: #888;
		white-space: nowrap;
		overflow: hidden;
		max-width: 100%;
	  }

	  /* Media query for mobile screens */
		@media (max-width: 340px) {
		.supporter-name {
		overflow: hidden;
		text-overflow: hidden;
	}