/* Start https://www.cursors-4u.com */ * {cursor: url(https://ani.cursors-4u.net/nature/nat-11/nat1040.ani), url(https://ani.cursors-4u.net/nature/nat-11/nat1035.png), auto !important;} /* End https://www.cursors-4u.com */
body {
  margin: 0;
  padding: 0;
 background-color: black;
  height: 100vh;
      background: linear-gradient(to bottom, black 50%, #F9007B 50%);
}
.back-cover{
  width: 300px;
  height: 500px;
  background-color: #CC1671; 
  margin: 40px auto;
  /*radius*/
  -webkit-border-radius: 30px;
     -moz-border-radius: 30px;
          border-radius: 30px;
  z-index: -9;
  /*shadow*/
  -webkit-box-shadow: 0px 2px 5px 0px rgba(106,42,224,0.4);
     -moz-box-shadow: 0px 2px 5px 0px rgba(13,13,14,0.4);
          box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.4);
}
.webAPI {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto; /* Adjust height automatically based on content */
    max-width: 50%; /* Set maximum width */
    font-family: Arial, sans-serif;
    color: white;
    padding: 10px; /* Reduce padding */
    margin: 20px auto; /* Center horizontally and add margin for vertical spacing */
}


  /* Style the buttons */
button {
    background-color: skyblue; /* Green background color */
    border: none; /* Remove button border */
    color: white; /* White text color */
   /* Padding */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make buttons inline */
    font-size: 16px; /* Font size */
    margin: 4px 2px; /* Margin */
    cursor: pointer; /* Cursor style */
  /* Rounded corners */
}



/* Style the disabled button */
button:disabled {
    background-color: #cccccc; /* Light gray background color */
    color: #666666; /* Dark gray text color */
    cursor: not-allowed; /* Change cursor to not-allowed */
}

.main{
  width: 300px;
  height: 500px;
  background: #F9007B; ;
  margin: auto;
  overflow: hidden;
  /*radius*/
  -webkit-border-radius: 30px;
     -moz-border-radius: 30px;
          border-radius: 30px;
  /*position front body */
  position: relative;
  top: -8px;
  left: 8px;
}

.screen{
  width: 260px;
  height: 200px;
  background: #2AED13;
  margin: 20px auto;
  border: 4px solid #EBEC14;
  /*radius*/
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.screen img{
  width:260px;
  height: 100%;
}

.navigator{
  width: 260px;
  height: 230px;
  margin: auto;
  overflow: hidden;
  position: relative;
}

.keys{
  width: 210px;
  height: 210px;
  background: rgb(37,227,25);
  margin: 10px auto;
  overflow: hidden;
  /*radius*/
  -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
          border-radius: 100%;
  /*shadow*/
  -webkit-box-shadow: 0px 2px 5px 0px rgba(219,20,20,0.2);
     -moz-box-shadow: 0px 2px 5px 0px #673AB7;
          box-shadow: 0px 2px 5px 0px #9C27B0;
}

.keys:hover{
  -webkit-box-shadow: 0px 0px 22px 3px rgba(146,226,40,0.32);
-moz-box-shadow: 0px 0px 22px 3px rgba(179,35,212,0.32);
box-shadow: 0px 0px 22px 3px rgba(224,226,23,0.32);
}


.menu-btn{
  display: block;
  position: absolute;
  top: 32px;
  left: 107px;
  font-family: arial;
  font-weight: bold;
  font-size: 16px;
  color: rgb(95,96,92);
}

.menu-btn:hover{
  color: #69ED11;
  /* duration / speed */
  -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
       -o-transition: all 0.2s;
      -ms-transition: all 0.2s;
          transition: all 0.2s;
}

.fwd{
  width: 22px;
  position: absolute;
  top: 108px;
  left: 195px;
}

img.fwd{  
  /*filter*/
  filter: grayscale(1);
	-webkit-filter: grayscale(1);
	   -moz-filter: grayscale(1);
	     -o-filter: grayscale(1);
	    -ms-filter: grayscale(1);
  /* duration / speed */
  -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
       -o-transition: all 0.2s;
      -ms-transition: all 0.2s;
          transition: all 0.2s;
}


img.fwd:hover{
  /*filter*/
  filter: grayscale(0);
	-webkit-filter: grayscale(0);
	   -moz-filter: grayscale(0);
	     -o-filter: grayscale(0);
	    -ms-filter: grayscale(0);
  /* duration / speed */
  -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
       -o-transition: all 0.2s;
      -ms-transition: all 0.2s;
          transition: all 0.2s;
}


.bkd{
  width: 22px;
  position: absolute;
  top: 108px;
  left: 41px;
}

img.bkd{  
  /*filter*/
  filter: grayscale(1);
	-webkit-filter: grayscale(1);
	   -moz-filter: grayscale(1);
	     -o-filter: grayscale(1);
	    -ms-filter: grayscale(1);
  /* duration / speed */
  -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
       -o-transition: all 0.2s;
      -ms-transition: all 0.2s;
          transition: all 0.2s;
}


img.bkd:hover{
  /*filter*/
  filter: grayscale(0);
	-webkit-filter: grayscale(0);
	   -moz-filter: grayscale(0);
	     -o-filter: grayscale(0);
	    -ms-filter: grayscale(0);
}

.play-pause{
  width: 28px;
  position: absolute;
  top: 182px;
  left: 120px;
}

img.play-pause{  
  /*filter*/
  filter: grayscale(1);
	-webkit-filter: grayscale(1);
	   -moz-filter: grayscale(1);
	     -o-filter: grayscale(1);
	    -ms-filter: grayscale(1);
}


img.play-pause:hover{
  /*filter*/
  filter: grayscale(0);
	-webkit-filter: grayscale(0);
	   -moz-filter: grayscale(0);
	     -o-filter: grayscale(0);
	    -ms-filter: grayscale(0);
}


.play{
  width: 100px;
  height: 100px;
  background: #F7D0F4;
  margin: 54px auto;
  border-radius: 100%;
  /*shadow*/
  -webkit-box-shadow: inset 0px -2px 14px -1px rgba(233,88,88,0.3);
     -moz-box-shadow: inset 0px -2px 14px -1px rgba(165,25,197,0.3);
          box-shadow: inset 0px -2px 14px -1px rgba(0,0,0,0.3);
}
  .guest-book {
            margin: 20px;
            padding: 20px;
            background-color: #F9007B;
            border-radius: 15px;
            max-width: 300px;
            margin: 0 auto;
            border: 4px solid #EBEC14;
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
        }

        .guest-book h2 {
            font-size: 18px;
            color: #fff;
            text-align: center;
            margin-bottom: 10px;
        }

        .guest-list {
            list-style-type: none;
            padding: 0;
            color: #fff;
        }

        .guest-list li {
            margin-bottom: 5px;
            padding: 5px;
            background-color: #CC1671;
            border-radius: 5px;
        }

        /* Styling for the form */
        .guest-form label {
            display: block;
            font-weight: bold;
            color: #fff;
            margin-bottom: 5px;
        }

        .guest-form input[type="text"] {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
            border: 2px solid #F9007B;
            border-radius: 5px;
        }

        .guest-form button {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 5px;
        }

        .guest-form button:hover {
            background-color: #0056b3;
        }
@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 */
}

/* Reset some default styles for the navigation */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Style the navigation bar with a border */
nav {
    background-color: #2AED13;
    color: #fff;
    border: 20px solid black; /* Green border with a thickness of 20px */
    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 */
}

/* Style the navigation list */
nav ul {
    list-style-type: none;
    margin: 0;
    display: flex;
    border: 20px solid black; /* Black border with a thickness of 20px */
    padding: 10px;
    width: 100%; /* Take up the full width */
    box-sizing: border-box; /* Include padding and border in the width calculation */
}

/* Style the navigation list items */
nav ul li {
    margin-right: 10px;
}

/* 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: blueviolet;
    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;
}

/* Style the navigation bar with a border */
nav {
    background-color: #2AED13;
    color: #fff;
    border: 20px solid: black; /* Green border with a thickness of 20px */
    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 */
}


/* Style the navigation list */
nav ul {
    list-style-type: none;
    margin: 0;
    display: flex;
     border: 20px solid black; /* Black border with a thickness of 20px */
    padding: 10px;
}

/* Style the navigation list items */
nav ul li {
    margin-right: 10px;
}

/* 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: blueviolet;
    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 */
    }
}
/* 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 */
    }
}
.text {
   
    top: 50%; 
   
    transform: translate(50%,-50%);
    text-transform: cursive;
    font-family: verdana;
    font-size: 10em;
    font-weight: 500;
    color: mediumpurple;
    text-shadow: 1px 1px 1px hotpink,
        1px 2px 1px hotpink,
        1px 3px 1px hotpink,
        1px 4px 1px hotpink,
        1px 5px 1px hotpink,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
}
#background-wrap {
    bottom: 0;
	left: 0;
	padding-top: 50px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: -1;
}

/* KEYFRAMES */

@-webkit-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@-moz-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

/* ANIMATIONS */

.x1 {
	-webkit-animation: animateCloud 35s linear infinite;
	-moz-animation: animateCloud 35s linear infinite;
	animation: animateCloud 35s linear infinite;
	
	-webkit-transform: scale(0.65);
	-moz-transform: scale(0.65);
	transform: scale(0.65);
}

.x2 {
	-webkit-animation: animateCloud 20s linear infinite;
	-moz-animation: animateCloud 20s linear infinite;
	animation: animateCloud 20s linear infinite;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x3 {
	-webkit-animation: animateCloud 30s linear infinite;
	-moz-animation: animateCloud 30s linear infinite;
	animation: animateCloud 30s linear infinite;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

.x4 {
	-webkit-animation: animateCloud 18s linear infinite;
	-moz-animation: animateCloud 18s linear infinite;
	animation: animateCloud 18s linear infinite;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}

.x5 {
	-webkit-animation: animateCloud 25s linear infinite;
	-moz-animation: animateCloud 25s linear infinite;
	animation: animateCloud 25s linear infinite;
	
	-webkit-transform: scale(0.55);
	-moz-transform: scale(0.55);
	transform: scale(0.55);
}

/* OBJECTS */

.cloud {
	background: #fff;
	background: -moz-linear-gradient(top,  #fff 5%, #f1f1f1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1));
	background: -webkit-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	background: -o-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	background: -ms-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	background: linear-gradient(top,  #fff 5%,#f1f1f1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
	
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	
	-webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

	height: 120px;
	position: relative;
	width: 350px;
}

.cloud:after, .cloud:before {
    background: #fff;
	content: '';
	position: absolute;
	z-indeX: -1;
}

.cloud:after {
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;

	height: 100px;
	left: 50px;
	top: -50px;
	width: 100px;
}

.cloud:before {
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;

	width: 180px;
	height: 180px;
	right: 50px;
	top: -90px;
}
.container {
  position: relative;
  width: 20%;
  height: 55%;
  margin: 0 auto; /* Center the container horizontally */
  padding: 20px;
      font-size: 18px; /* Increase font size for paragraphs */
  font-family: 'Comic Sans MS', cursive; /* Choose a cuter font */
  color: #333; /* Adjust text color as needed *
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
p {
  font-size: 18px; /* Increase font size for paragraphs */
  font-family: 'Comic Sans MS', cursive; /* Choose a cuter font */
  color: #333; /* Adjust text color as needed */
}
h1 {
  text-align: center;
  color: #ff66b2;
  font-size: 24px; /* Increase font size for readability */
  font-family: 'Comic Sans MS', cursive; /* Choose a cuter font */
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
  color: #ff66b2;
  font-size: 16px; /* Increase font size for labels */
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ff66b2;
  border-radius: 5px;
  font-family: 'Comic Sans MS', cursive; /* Choose a cuter font */
  font-size: 16px; /* Increase font size for input fields */
}

input[type="submit"] {
  background-color: #ff66b2;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Comic Sans MS', cursive; /* Choose a cuter font */
  font-size: 18px; /* Increase font size for buttons */
  transition: background-color 0.3s;
}

input[type="submit"]:hover {
  background-color: #ff3385;
}

textarea {
  height: 150px;
}
.textbox {
    width: 100%; /* Adjust width to span the entire container */
    padding: 20px;
    background-color: black
    margin: 20px auto; /* Center horizontally and add margin for vertical spacing */
    font-size: 18px; /* Increase font size for paragraphs */
    font-family: Arial, sans-serif; /* Change font to Arial or any other preferred sans-serif font */
    color: white; /* White text color */
     /* Red-purple background with some transparency */
    border: 2px solid white; /* White border */
    border-radius: 0; /* Remove border radius */
    text-align: center;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4); /* Add a shadow for depth */
    transition: transform 0.3s ease-in-out;
}

.textbox h1 {
    color: #fff; /* White text color */
}

.textbox p {
    margin-bottom: 15px; /* Add some spacing between paragraphs */
}
.textbox2 {
  width: 100%; /* Adjust width to span the entire container */
    padding: 20px;
    background-color: black
    margin: 20px auto; /* Center horizontally and add margin for vertical spacing */
    font-size: 18px; /* Increase font size for paragraphs */
    font-family: Arial, sans-serif; /* Change font to Arial or any other preferred sans-serif font */
    color: white; /* White text color */
     /* Red-purple background with some transparency */
    border: 2px solid white; /* White border */
    border-radius: 0; /* Remove border radius */
    text-align: center;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4); /* Add a shadow for depth */
    transition: transform 0.3s ease-in-out;
}

.textbox2 img {
  display: block;
  margin: 0 auto 20px; /* Center images horizontally and add spacing below */
  max-width: 100%; /* Ensure images don't exceed the box width */
}

.textbox2:hover {
  transform: scale(1.02); /* Grow slightly on hover */
}
p{
    color: aliceblue
         font-family: 'Comic Sans MS', cursive; 
}

h1 {
  color: #ff66b2;
}

.content {
  margin-top: 20px;
}

.add-comment {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.comment-input {
  width: 70%;
  padding: 10px;
  border: 1px solid #ff66b2;
  border-radius: 5px;
}

.comment-button {
  background-color: #ff66b2;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}