:root {
  --padding-desktop: 5px;
  --padding-mobile: 3px;
}

.blur-full-screen {
  position: fixed;
  backdrop-filter: blur(10px);

  /*conflicts with the opacity*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/*panel containing the login options*/
.create-room-form {
  background-image: url("../../assets/hex-bg.svg");

  /*flex box*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.new-room-name {
  width: 60%;
  height: 10%;
  min-height:20px;

  margin-top:40px;

  padding-left:10px;
  padding-right:10px;
  padding-top:5px;
  padding-bottom:5px;

  font-size: 20px;

  border-radius: 40px;
  border-style:none;
  outline:none;

  background-color: rgba(0,0,0,0.3);
  color:white;
}

.create-new-room-submit{
  background-image: url("../../assets/did_eclipse.png");

  border-style:none;
  outline:none;
}

.create-room-back-button{
  background-image: url("../../assets/entry/brand_logo.svg");
  color:transparent;
}

/*for desktop*/
@media (min-width:600px) {
  .blur-full-screen {
    top: calc(0px + var(--padding-desktop));
    left: calc(0px + var(--padding-desktop));

    width: calc(100% - 2 * var(--padding-desktop));
    height: calc(100% - 2 * var(--padding-desktop));
    border-radius: var(--corner-radius-desktop);
  }

  .create-room-form {
    width: 480px;
    height: 480px;
  }

  .create-new-room-submit{
    width:100px;
    height:100px;
    margin-top:20px;
  }

  .create-room-back-button{
    width:90px;
    height:90px;
    margin-top:10px;
  }
}

/*for mobile*/
@media (max-width:600px) {
  .blur-full-screen {
    top: calc(0px + var(--padding-mobile));
    left: calc(0px + var(--padding-mobile));

    width: calc(100% - 2 * var(--padding-mobile));
    height: calc(100% - 2 * var(--padding-mobile));
    border-radius: var(--corner-radius-mobile);
  }

  .create-room-form {
    width: 90vw;
    height: 90vw;
  }

  .create-new-room-submit{
    width:80px;
    height:80px;
    margin-top:20px;
  }

  .create-room-back-button{
    width:70px;
    height:70px;
    margin-top:5px;
  }
}