iframe {
  border: none;
}
.full-screen-bg {
    position: fixed;
    object-fit: fill;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
    display: block;
    z-index: 2;
    transition: all 3s ease;
  }
  .full-screen-bg1 {
    position: fixed;
    object-fit: fill;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    overflow: hidden;
    display: block;
    z-index: 1;
  }
  .full-screen-bg3 {
    position: fixed;
    object-fit: fill;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    overflow: hidden;
    display: block;
    z-index: 3;
  }
  .center-div {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .center-divbtn {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .bottomright {
    position: absolute;
    display: flex;
    bottom: 5%;
    right:5%;

  }
  .resizable-div {
    height: 100%;
    width: 100%;
  }
  @media (min-width: 768px) {
    :root{
      --swidth : 100vw;
    }
    #container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      background-color: #2d2e30;
      border-radius: 3px;
      ;

    }
    .opacitybg{
      background-color: rgba(236, 236, 236, 0.2);
      filter: blur(2px);
    }
    .resizable-div
    {
      height: 100vh;
      width: 100%;
      overflow: hidden;
      object-fit: cover;

    }
    #desktop {
      position: fixed;
      top: 0px;
      left: 0px;
      bottom: 0px;
      zoom: 1.2
       ;
      height: 100%;
      width: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      overflow: hidden;
      transition: filter 0.5s ease;
      /* do not allow scroll function */

    }
    #emerging-div {
      width: fit-content;
      height: fit-content;
      text-align: center;
      position: absolute;
      bottom: -600px;
      left: calc(40vw - 200px);
      transition: bottom 0.5s ease-in-out;
    }
    #app-list {
      list-style: none;
      position: absolute;
      margin: 0;
      padding: 1px;
      display: flex;
      align-items: center;
      justify-content: center;

    }
  /* make a good css with the button id unlock-screen */
  #unlock-screen {
    background-color: rgb(22, 21, 21, 0.2);
    border: none;
    color: white;
    padding: 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px;
    cursor: pointer;
    border-radius: 12px;
  }
  #unlock-screen:hover {
    background-color: #2d2e30;
    color: white;
    box-shadow: 30px 0px 1625px 10px rgba(255, 0, 0, 0.75);
  }
  @media (min-width: 1300px) {
    .resizable-div {
      height: 100%;
      width: 100%;
    }
    #app-list {
      list-style: none;
      position: absolute;
      margin: 0;
      padding: 1px;
      display: flex;
      align-items: center;
      justify-content: center;

    }
    #desktop {
      zoom: 1;
      height: 100vh;
      width: 100vw;
      /* this div covers the whole screen */

      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      overflow: hidden;

      transition: filter 0.5s ease;
    }
    #container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      background-color: #2d2e30;
      border-radius: 3px;
    }
    #emerging-div {
      width: fit-content;
      height: fit-content;
      text-align: center;
      position: absolute;
      bottom: -600px;
      left: calc(50vw - 200px);
      transition: bottom 0.5s ease-in-out;
    }
    .opacitybg{
      background-color: rgba(236, 236, 236, 0.2);
      filter: blur(2px);
    }
  }
  .iconere{
    display: 33.3;
    padding: 5px;
    height: 40px;
    width: 40px;
  }
  .center-divface{
      position: absolute;
      display: none;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);

  }
  .avatar {
      vertical-align: middle;
      width: 300px;
      height: 300px;
      border-radius: 50%;
  }
  .center-divf {
      padding: 5px;
      position: absolute;
      top: 120%;
      left: 50%;
      transform: translate(-50%, -50%);

  }
  .login{
      width: 300px;
      height: 50px;
      border-radius: 25px;
      border: 2px solid #ccc;
      padding: 20px 20px 20px 40px;
      box-sizing: border-box;
      font-size: 16px;
      background-color: white;
      background-position: 10px 10px;
      background-repeat: no-repeat;
      text-align: center;
  }
  #time{
    color: white;
    font-size: 100px;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 10px;
    padding-top: 10px;
    text-decoration: dotted 3px 000000;
    border-color: black;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
  }
  ::placeholder{
    position: relative;
    float: right;
    top : 5px;
    right: -4px;
    font-size: 14px;
    padding: 1px;

}
:-ms-input-placeholder{
    position: relative;
    float: right;
    top : -40px;
}

body {
  background-image: url("../i/inside.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
  transition: filter 0.5s ease;
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 18px;



}

.bg-image-container {
  background-color: rgba(0, 0, 0, 0.5); /* set the background color to semi-transparent black */
  width: 100%;
  height: 100%;
}
}
.unselectable {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Standard */
}
#file-input {
  display: none;
}
.containerrrrr {
  border: 1px solid #000000;
  width: 100%;
  padding: 30px;
  text-align: center;
  margin: 0 auto;
  height: 90%;
  background-color: rgb(0, 0, 0,0.2);
  border-radius: 25px;
}
#fileNameDisplay {
  margin-top: 30px;
}
.progress-bar {
  width: 100%;
  height: 30px;
  background-color: #493737;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-top: 30px;
  color: aliceblue;
}
.progress {
  height: 100%;
  background-color: rgb(28, 143, 182);
  width: 0;
  color: aliceblue;
}
.buttonnn{
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
}
/* on hover animate buttonnn */
.buttonnn:hover {
  background-color: #ddd;
  cursor: pointer;
  /* border outside highlight */
  box-shadow: 0px 0px 25px #ffffff;
  /* increase the  */
}
.face{
  border: 8px solid rgb(19, 48, 143);
  border-radius: 50%;
  padding: 0px;
  margin: 0%;
  margin-bottom: 10px;

}
.facebutton{
  border: 1px solid rgb(14, 67, 114);
  border-radius: 30px;
  padding: 0px;
  margin-left: 5px;
  margin-right: 5px;
  color: #1f1f1f;
  /* center the text */
  text-align: center;
  background-color: rgb(240, 248, 255,0.5);
  margin-bottom: 5px;
  /* make content by column and center it */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* make the content responsive */
  width: 100%;
  height: 100%;



}
.facebutton:hover {
  background-color: rgb(197, 197, 197);
  cursor: pointer;
  /* border outside highlight */
  box-shadow: 0px 0px 155px #d30f0f;
  /* increase the  color of the image*/
  filter: brightness(1.05);
  /* increase the  */

}

.face:hover {
  background-color: rgb(240, 248, 255,0.8);
  cursor: pointer;
  /* border outside highlight */
  box-shadow: 0px 0px 125px #ff6600;
  /* increase the  color of the image*/
  filter: brightness(1.05);
  /* increase the  */

}

.email{
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  margin-top: 20px;
  color: #1f1f1f;
  /* center the text */
  text-align: center;
  background-color: rgb(240, 248, 255,0.5);
  /* make content by column and center it */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* make the content responsive */
  width: 90%;
  height: 100%;

}

.password{
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
  margin-top: 10px;
  color: #1f1f1f;
  /* center the text */
  text-align: center;
  background-color: rgb(240, 248, 255,0.5);
  /* make content by column and center it */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* make the content responsive */
  width: 90%;
  height: 100%;

}
#loginbtn{
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 10px;
  margin-top: 10px;
  color: #1f1f1f;
  /* center the text */
  text-align: center;
  background-color: rgb(240, 248, 255,0.5);
  /* make content by column and center it */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* make the content responsive */
  width: fit-content;
  height: 100%;
  font-size: large;

}
#registration{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:100%;
  height: 100%;
  font-size: large;
  background-color: #493737;

}
#regname{
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  font-size: large;
  color: #ffffff;
  /* center the text */
  text-align: center;
  background-color: rgb(240, 248, 255,0.5);
  /* make content by column and center it */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
/* change the placeholder text color */


}
#regname::-webkit-input-placeholder {
  color: #ffffff;
  font-size: large  ;

}
#regemail{
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  font-size: large;
  color: #ffffff;
  /* center the text */
  text-align: center;
  background-color: rgb(240, 248, 255,0.5);
  /* make content by column and center it */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
}
#regemail::-webkit-input-placeholder {
  color: #ffffff;
  font-size: large  ;
}
#regpassword{
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  font-size: large;
  color: #ffffff;
  /* center the text */
  text-align: center;
  background-color: rgb(240, 248, 255,0.5);
  /* make content by column and center it */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
}
#regpassword::-webkit-input-placeholder {
  color: #ffffff;
  font-size: large  ;
}
#registerbtn{
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  margin-top: 10px;
  color: #ffffff;
  /* center the text */
  text-align: center;
  background-color: rgb(240, 248, 255,0.5);
  /* make content by column and center it */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* make the content responsive */
  width: fit-content;
  height: fit-content;
  font-size: large;
}
#registerbtn:hover{
  background-color: rgb(240, 248, 255,0.8);
  cursor: pointer;
  /* border outside highlight */
  box-shadow: 0px 0px 25px #000000;
  /* increase the  color of the image*/
  filter: brightness(1.0001);
  color: #000000;
  /* increase the  */

}

.loginimg{
  margin-top: 80px;
  margin-bottom: 20px;
}
#smallqr{
  width: 80px;
  height: 80px;
}