/* Basic reset for body */
body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent scrolling */
}

/* Styling for the entire laptop container */
.laptop {
  width: 80vw; /* Set width to 80% of viewport width */
  height: 70vh; /* Set height to 70% of viewport height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: auto; /* Center horizontally */
}

/* Styling for the laptop screen */
.screen {
  border-radius: 20px; /* Rounded corners for the screen */
  box-shadow: inset 0 0 0 2px #c8cacb, inset 0 0 0 10px #000; /* Inner border and shadow */
  height: 318px; /* Original height */
  width: 518px; /* Original width */
  padding: 9px 9px 23px 9px; /* Padding inside the screen */
  position: relative; /* Relative positioning for internal elements */
  display: flex; /* Flexbox for centering content */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  background-image: linear-gradient( /* Gradient background */
    15deg,
    #3f51b1 0%,
    #5a55ae 13%,
    #7b5fac 25%,
    #8f6aae 38%,
    #a86aa4 50%,
    #cc6b8e 62%,
    #f18271 75%,
    #f3a469 87%,
    #f7c978 100%
  );
  transform-style: preserve-3d; /* 3D transform style */
  transform: perspective(1900px) rotateX(-88.5deg); /* 3D perspective and rotation */
  transform-origin: 50% 100%; /* Origin of the transform */
  animation: open 4s infinite alternate; /* Animation for opening and closing effect */
}

/* Animation for the screen opening and closing */
@keyframes open {
  0% {
    transform: perspective(1900px) rotateX(-88.5deg); /* Initial state */
  }
  100% {
    transform: perspective(1000px) rotateX(0deg); /* Final state */
  }
}

/* Top edge of the screen with gradient */
.screen::before {
  content: ""; /* Empty content for pseudo-element */
  width: 518px; /* Match the screen width */
  height: 12px; /* Height of the edge */
  position: absolute; /* Absolute positioning */
  background: linear-gradient(#979899, transparent); /* Gradient background */
  top: -3px; /* Position from the top */
  transform: rotateX(90deg); /* Rotate to create the top edge */
  border-radius: 5px 5px; /* Rounded corners */
}

/* Text styling */
.text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; /* Font family */
  color: #fff; /* White text color */
  letter-spacing: 1px; /* Spacing between letters */
  text-shadow: 0 0 5px #fff; /* White text shadow */
  text-align: center; /* Center text horizontally */
  font-size: 2em; /* Increase font size */
}

/* Header styling */
.header {
  width: 100px; /* Width of the header */
  height: 12px; /* Height of the header */
  position: absolute; /* Absolute positioning */
  background-color: #000; /* Black background */
  top: 10px; /* Position from the top */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -0%); /* Center horizontally */
  border-radius: 0 0 6px 6px; /* Rounded bottom corners */
}

/* Bottom shadow of the screen */
.screen::after {
  background: linear-gradient(to bottom, #272727, #0d0d0d); /* Gradient background */
  border-radius: 0 0 20px 20px; /* Rounded bottom corners */
  bottom: 2px; /* Position from the bottom */
  content: ""; /* Empty content for pseudo-element */
  height: 24px; /* Height of the shadow */
  width: 518px; /* Match the screen width */
  position: absolute; /* Absolute positioning */
}

/* Styling for the website content */
.website {
  display: none; /* Initially hidden */
  text-align: center;
}

/* Transition effect for screen to website */
.fade-out {
  animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Responsive styles for mobile devices */
@media (max-width: 600px) {
  .laptop {
    width: 90vw; /* Increase width for smaller screens */
    height: auto; /* Adjust height to maintain aspect ratio */
    padding: 10px; /* Add padding around the laptop */
  }

  .screen {
    height: 200px; /* Adjust height for mobile */
    width: 300px; /* Adjust width for mobile */
  }

  .text {
    font-size: 1.5em; /* Adjust font size for mobile */
  }
}