@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
html { 
    background: url(skzoo.gif) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    cursor: url('leebit.png'), url('leebit.svg'), auto;
  }
    
  /* Style the sidebar */
  #sidebar {
    background-color: #7b5de8; /* Set the background color to purple */
    width: 200px; /* Set the width of the sidebar */
    height: auto; /* Set the height to fill the viewport */
    position: fixed; /* Fix the sidebar in place */
    transform: translateY(60%);
    top: 0; /* Set the top position to the top of the viewport */
    left: 0; /* Set the left position to the left of the viewport */
    display: flex; /* Use flexbox layout for the sidebar */
    flex-direction: column; /* Stack the elements vertically */
    border-radius: 10px;
    border: 6px solid black;
  }

  /* Style the sidebar links */
  #sidebar a {
    color: white; /* Set the text color to white */
    padding: 16px; /* Add some padding to the links */
    text-decoration: none; /* Remove the default underline */
    display: block; /* Display the links as blocks */
  }

  /* Style the active link */
  #sidebar a.active {
    background-color: #6d4c41; /* Set the background color to a darker purple */
  }

  .star {
	display: block;
	position: absolute;
	top: 0%;
	left: 70%;
	width: 48px;
	height: 48px;
	background: #fff; border-radius:50%;
	overflow: hidden;
	z-index: 2;
	animation: glitter 4.5s linear 0s infinite normal;
	-webkit-animation: glitter 4.5s linear 0s infinite normal;
	-moz-animation: glitter 4.5s linear 0s infinite normal;
	-ms-animation: glitter 4.5s linear 0s infinite normal;
	-o-animation: glitter 4.5s linear 0s infinite normal;
}

@-webkit-keyframes glitter {
	0%   { -webkit-transform: scale(1.0); opacity: 1; }
	25%  { -webkit-transform: scale(0.5); opacity: 0; }
	50%  { -webkit-transform: scale(1.0); opacity: 1; }
	75%  { -webkit-transform: scale(0.5); opacity: 0; }
	100% { -webkit-transform: scale(1.0); opacity: 1; }
}
@-moz-keyframes glitter {
	0%   { -moz-transform: scale(1.0); opacity: 1; }
	25%  { -moz-transform: scale(0.5); opacity: 0; }
	50%  { -moz-transform: scale(1.0); opacity: 1; }
	75%  { -moz-transform: scale(0.5); opacity: 0; }
	100% { -moz-transform: scale(1.0); opacity: 1; }
}

.box {
    position: relative;
    left: 2%;
    margin: auto;
    display: block;
    margin-top: 8%;
    width: 600px;
    height: 420px;
    background: none;
  }
  /* Laptop Screen */
  .laptop-screen {
    position: absolute;
    width: 70%;
    height: 65%;
    background: #363636;
    left: 10%;
    top: -5%;
    border: 3px solid #C0C0C0;
    border-radius: 25px 25px 0 0;
  }
  .inner-screen {
    position: absolute;
    width: 92%;
    height: 77.5%;
    background: url('https://elfeelgoodsvintage.uk/wp-content/uploads/2018/09/autumn-avenue-bench-40884.jpg');
    background-position: center;
    background-origin: fill;
    background-repeat: no-repeat;
    background-size: 600px 350px;
    left: 4%;
    top: 8%;
    border-radius: 3px;
  }
  .time:before {
    position: absolute;
    content: '20:52';
    font-family: 'Ubuntu', sans-serif;
    color: #F5F5F5;
    font-size: 1.9em;
    top: 70%;
    left: 2%;
  }
  .date:before {
    position: absolute;
    content: 'Tuesday, July 14';
    font-family: 'Ubuntu', sans-serif;
    color: #F5F5F5;
    font-size: 1em;
    top: 84%;
    left: 2%;
  }
  .camera {
    position: absolute;
    width: 1.8%;
    height: 2.5%;
    left: 47%;
    top: 1.2%;
    background: #484848;
    border: 4px solid #202020;
    border-radius: 50%;
  }
  .support-one {
    position: absolute;
    width: 1.2%;
    height: 10%;
    left: 0%;
    top: 40%;
    background: #202020;
    border-radius: 0 3px 3px 0;
  }
  .support-two {
    position: absolute;
    width: 1.2%;
    height: 10%;
    right: 0%;
    top: 40%;
    background: #202020;
    border-radius: 3px 0 0 3px;
  }
  .support-three {
    position: absolute;
    height: 1.8%;
    width: 10%;
    top: 0.5%;
    left: 16%;
    background: #202020;
    border-radius: 0 0 3px 3px;
  }
  .support-four {
    position: absolute;
    height: 1.8%;
    width: 10%;
    top: 0.5%;
    right: 16%;
    background: #202020;
    border-radius: 0 0 3px 3px;
  }
  .brand:before {
    position: absolute;
    content: 'Lenovo';
    top: 85%;
    left: 4%;
    font-family: 'Righteous', cursive;
    color: #808080;
  }
  /* Connector */
  .connector {
    position: absolute;
    width: 50%;
    height: 5%;
    top: 57.5%;
    left: 19%;
    z-index: 3;
    border-radius: 0 0 5px 5px;
    background: #D0D0D0;
    border-left: 3px solid #363636;
    border-right: 3px solid #363636;
  }
  /* Keyboard Body */
  .keyboard-body {
    position: absolute;
    width: 80%;
    height: 65%;
    top: 37%;
    left: 5.5%;
    clip-path: polygon(6% 36%, 94% 36%, 100% 100%, 0% 100%);
    background: #C0C0C0;
    border-radius: 25px;
    z-index: 2
  }
  /* Keyboard */
  .keyboard {
    position: absolute;
    width: 84%;
    height: 40%;
    background: #B8B8B8;
    z-index: 3;
    left: 8%;
    top: 29%;
    clip-path: polygon(2% 36%, 98% 36%, 100% 100%, 0% 100%);
  }
  .key-one {
    position: absolute;
    width: 75%;
    height: 6%;
    background: #C8C8C8;
    left: 2.8%;
    top: 40%;
    border-radius: 4px;
  }
  .key-two {
    position: absolute;
    width: 18%;
    height: 6%;
    background: #C8C8C8;
    right: 2.8%;
    top: 40%;
    border-radius: 4px;
  }
  .key-three {
    position: absolute;
    width: 18%;
    height: 9%;
    background: #C8C8C8;
    left: 2.8%;
    top: 50%;
    border-radius: 4px;
  }
  .key-four {
    position: absolute;
    width: 75%;
    height: 9%;
    background: #C8C8C8;
    right: 2.8%;
    top: 50%;
    border-radius: 4px;
  }
  .key-five {
    position: absolute;
    width: 95%;
    height: 9%;
    background: #C8C8C8;
    left: 2.6%;
    top: 62.2%;
    border-radius: 4px;
  }
  .key-six {
    position: absolute;
    width: 45%;
    height: 9%;
    background: #C8C8C8;
    left: 2.2%;
    top: 73.5%;
    border-radius: 4px;
  }
  .key-seven {
    position: absolute;
    width: 49%;
    height: 9%;
    background: #C8C8C8;
    right: 2.2%;
    top: 73.5%;
    border-radius: 4px;
  }
  .key-eight {
    position: absolute;
    width: 15%;
    height: 9%;
    background: #C8C8C8;
    left: 2.2%;
    top: 85.5%;
    border-radius: 4px;
  }
  .key-nine {
    position: absolute;
    width: 35%;
    height: 9%;
    background: #C8C8C8;
    left: 19%;
    top: 85.5%;
    border-radius: 4px;
  }
  .key-ten {
    position: absolute;
    width: 42%;
    height: 9%;
    background: #C8C8C8;
    right: 2.2%;
    top: 85.5%;
    border-radius: 4px;
  }
  /* Mousepad */
  .mousepad {
    position: absolute;
    width: 24%;
    height: 20%;
    background: #C0C0C0;
    border-radius: 5px;
    border: 1.9px solid #A0A0A0; 
    z-index: 3;
    left: 20%;
    top: 72%;
    transform: skew(-5deg);
  }
  .partition {
    position: absolute;
    width: 50%;
    height: 40%;
    top: 60%;
    border-right: 1.9px solid #A0A0A0;
  }
  /* Laptop back body */
  .laptop-body {
    position: absolute;
    width: 79%;
    height: 25%;
    top: 78%;
    left: 6%;
    clip-path: polygon(6% 36%, 94% 36%, 100% 100%, 0% 100%);
    background: black;
    border-radius: 25px;
    z-index: 1;
  }
  
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }