/* Removes default browser spacing */


  
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Prevents scrollbars if video dimensions slightly exceed viewport */
}

a {
  color: black;
}



/* Styles the video to cover the viewport */
#myVideo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    /* `object-fit: cover` ensures the video fills the screen and maintains its aspect ratio without stretching */
    object-fit: cover;
    /* `z-index: -1` places the video behind all other content on the page */
    z-index: -1;
}


/* Styles the overlay content */
.content {
    position: relative; /* Keeps content on top of the video */
    z-index: 1; /* Ensures the content is layered above the video */
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white; /* Example text color for visibility */
    font-family: sans-serif;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4); /* Optional semi-transparent overlay for text legibility */
  
}

.colored-box {
    background-color: #db4437; /* Blue color for the box */
    color: white; /* Text color */
    padding: 10px;
    position: fixed; /* Position relative to the nearest positioned ancestor (body) */
    bottom: 70px; /* 20px from the bottom */
}

@media only screen and (min-width: 601px) {
.colored-box {
    background-color: #db4437; /* Blue color for the box */
    color: white; /* Text color */
    padding: 20px;
    position: absolute; /* Position relative to the nearest positioned ancestor (body) */
    bottom: 70px; /* 20px from the bottom */
    right: 20px; /* 20px from the right */
    border-radius: 20px; /* Optional: rounded corners */
}
}




.box-text {
    font-family: Courier, monospace;
    font-size: 14px;
}   


.social-wrapper {
  display: flex; /* Enables Flexbox layout for direct children */
  justify-content: center; /* Horizontally centers the icons */
  align-items: center; /* Vertically centers the icons */
  gap: 15px; /* Adds space between each icon */
}

/* Base styles for all social icons */
/* Common icon styles */
.social-icon i {
  font-size: 16px; /* Adjust size */
  color: #333; /* Default color */
}

/* Hover effect on all icons */
.social-icon:hover i {
  color: #007bff; /* Change color on hover */
}

/* Specific color for each icon */