@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Source+Sans+Pro:wght@900&display=swap");

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
}

.content-wrapper {
  text-align: center;
}

h1 {
  color: white;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 5em;
  letter-spacing: -0.04em;
}

p {
  color: rgb(82 255 0);
  font-family: "Comfortaa", cursive;
  font-size: 1.5em;
  margin: 15px 0;
}

.divider {
  color: white;
}

.icon {
  color: white;
  padding: 15px;
  border-radius: 50%;
}

.icon:hover {
  cursor: pointer;
  background-color: rgb(22, 22, 22);
}

.rainbow {
  
   /* Font options */
  font-family: 'Comfortaa', cursive;
  text-shadow: 2px 2px 4px #000000;
  font-size:1.5em;
  
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 5s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 5s infinite;
  
  /* Standar Syntax */
  animation: rainbow 5s infinite; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
  0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Internet Explorer */
@-ms-keyframes rainbow{
   0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Standar Syntax */
@keyframes rainbow{
    0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

.video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;  /* Ensures video covers entire area */
            z-index: -2;  /* Sends the video behind all other content */
        }
		
		.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Adjust opacity here */
    z-index: -1; /* Places overlay above video but behind content */
}

 /* Media query for mobile devices */
        @media (max-width: 768px) {
            .content {
                width: 90%; /* Increase width on smaller screens */
                padding: 30px; /* Reduce padding */
                margin: 5% auto; /* Adjust margins */
            }

            h1 {
                font-size: 2.5em; /* Scale down header size */
            }

            p {
                font-size: 1.2em; /* Scale down paragraph text */
            }
        }

        @media (max-width: 480px) {
            .content {
                width: 95%; /* Maximize width for small mobile screens */
                padding: 20px; /* Further reduce padding */
                margin: 2% auto; /* Adjust margins */
            }

            h1 {
                font-size: 2em; /* Smaller font size on very small devices */
            }

            p {
                font-size: 1em;
            }
        }