/* Reset some default styles */
@font-face {
font-family: 'YourCustomFont';
    src: url('Cookiemonster-gv11.ttf') format('truetype');
    /* Add more src declarations for other font formats if needed */
}
.bg {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 300% 300%;
  background-image: linear-gradient(-45deg, yellow 0%, yellow 25%, yellow 51%, #ff357f 100%);
  -webkit-animation: AnimateBG 20s ease infinite;
          animation: AnimateBG 20s ease infinite;
}

@-webkit-keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
text-box {
    position: absolute;
    top:20%;
        right:0%
    width: 800px;
    padding: 20px;
   background-color: black;
    border: 2px solid #444;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

.text {
      font-family: 'YourCustomFont', Arial Rounded MT, sans-serif;
    font-size: 2em;
    font-weight: 700;
    color: #FFEB3B;
    text-transform: uppercase;
   // text-shadow: 1px 1px 1px #5ff6ff, 1px 2px 1px #008aff, 1px 3px 1px #008aff, -1px 3px 2px #008aff, -1px -1px 1px #0064b8, 2px -1px 2px #0064b8, 1px 7px 4px rgba(0, 9, 35, 0.4), 1px 9px 10px rgba(0, 64, 255, 0.2), 1px 9px 35px rgba(0, 64, 255, 0.2), 1px 9px 60px rgba(0, 64, 255, 0.4);
}

.text2 {
      font-family:  sans-serif;
    font-size: 2em;
    font-weight: 700;
    color: #F5F0F2;
    
   text-shadow: 1px 1px 1px #DFF0F2, 1px 2px 1px #008aff, 1px 3px 1px #008aff, -1px 3px 2px #008aff, -1px -1px 1px #0064b8, 2px -1px 2px #0064b8, 1px 7px 4px rgba(0, 9, 35, 0.4), 1px 9px 10px rgba(0, 64, 255, 0.2), 1px 9px 35px rgba(0, 64, 255, 0.2), 1px 9px 60px rgba(0, 64, 255, 0.4);
}
.text3 {
      font-family:  'YourCustomFont', Arial Rounded MT, sans-serif;
    font-size: 2em;
    font-weight: 700;
    color: #F35EEA;
    
   
}
.text4 {
      font-family:   Arial Rounded MT, sans-serif;
    font-size: 2em;
    font-weight: 700;
    color: #91E991;
     text-shadow: 1px 1px 1px #E2EDEE, 1px 2px 1px #E0E6EB, 1px 3px 1px #008aff, -1px 3px 2px #008aff
   
}

/* Optional: Add some cute icons or images for each video if desired */

/* Optional: Add some cute icons or images for each video if desired */


body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Align content at the bottom */
  min-height: 100vh; /* Make the container at least full height of the viewport */
}

/* Style the container for the JavaScript sketch */
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/nature/nat-9/nat858.cur), auto !important;} /* End https://www.cursors-4u.com */

/* Style the container for the Vimeo videos */
.video-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 10px;
}

/* Style each video iframe */
.video-container iframe {
  border: 2px solid #e1e1e1;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Optional: Add some kawaii-style decorations */
.video-container iframe:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease-in-out;
  border-color: #ff6b6b;
}
@font-face {
    font-family: 'Cookiemonster'; /* Give your custom font a name */
    src: url('Cookiemonster-gv11.ttf') format('truetype'); /* Specify the font file path and format */
}

/* Style the navigation bar with a border */
/* Style the navigation bar with a border */
nav {
    background-color: ; /* Add your desired background color */
    color: #fff;
    border: 20px solid blue; /* Blue border with a thickness of 20px */
    /* Set border width only for top and bottom */
    padding: 10px; /* Add some padding to create space between the border and the content */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a text shadow to the navigation bar text */
    width: 200%; /* Take up the full width */
    box-sizing: border-box; /* Include padding and border in the width calculation */
    border-width : 200%
}

/* Style the navigation list */
nav ul {
    list-style-type: none;
    margin: 0;
    display: flex;
    border: 20px solid blue; /* Blue border with a thickness of 20px */
    border-width: 0 20px; /* Set border width only for left and right */
    padding: 10px;
    width: 300%; /* Take up the full width */
    box-sizing: border-box; /* Include padding and border in the width calculation */
}


/* Style the navigation list */
nav ul {
    list-style-type: none;
    margin: 0;
    display: flex;
}

/* Style the navigation list items */

/* Style the navigation button container */
.nav-button {
    text-align: center;
}

/* Style the navigation links as images */
.nav-button img {
    display: block;
    width: 300px; /* Fixed width for the images */
    height: 120px; /* Fixed height for the images */
    margin-bottom: 5px; /* Spacing between image and text */
    transition: transform 0.3s, opacity 0.5s; /* Add transitions for transform and opacity */
}

/* Style the text below each button with the custom font */
.nav-button span {
    display: block;
    font-size: 44px;
    color: hotpink;
    font-family: 'Cookiemonster', sans-serif; /* Apply the custom font */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a text shadow to the text */
}

/* Change the link image size and opacity on hover */
.nav-button:hover img {
    transform: scale(1.5); /* Increase the size by 0.5x on hover */
    opacity: 0.7;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column; /* Stack the list items vertically */
        align-items: center; /* Center the list items horizontally */
    }
}