:root {
  --login-panel-size-desktop: 500px;
  --login-panel-size-mobile: 360px;

  --panel-padding-desktop: 5px;
  --panel-padding-mobile: 0px;

  --live-link-size-desktop: 280px;
  --live-link-size-mobile: 240px;

  --login-button-size-desktop: 200px;
  --login-button-size-mobile: 170px;

  --brand-button-size-desktop: 90px;
  --brand-button-size-mobile: 85px;
}

.home-panel {
  background-color: var(--transparent-bg);
  position: relative;
}

.live-link {
  position: absolute;
  background-image: url("../../assets/entry/live_link_bg.svg");
}

.enter-button {
  position: absolute;
  border-style: none;
  background-image: url("../../assets/entry/login_link.svg");
}

.enter-button:hover{
  transform:scale(110%);
}

.create-button {
  position: absolute;
  border-style: none;
  background-image: url("../../assets/entry/create_link.svg");
}

.create-button:hover{
  transform:scale(110%);
}

.brand-button {
  position: absolute;
  border-style: none;
  background-image: url("../../assets/entry/brand_logo.svg");
}

.login-button {
  cursor: pointer;
}

/*for desktop*/
@media (min-width:600px) {

  .home-panel {
    height: var(--login-panel-size-desktop);
    width: var(--login-panel-size-desktop);
    padding: var(--panel-padding-desktop);
  }

  .live-link {
    top: calc(0% + 5px);
    left: 50%;
    transform: translateX(-50%);

    height: var(--live-link-size-desktop);
    width: var(--live-link-size-desktop);
  }

  .login-button {
    top: calc(0% + 257.6px);
    height: var(--login-button-size-desktop);
    width: var(--login-button-size-desktop);
  }

  .enter-button {
    left: calc(0% + 33.6px);
  }

  .create-button {
    right: calc(0% + 33.6px);
  }

  .brand-button {
    height: var(--brand-button-size-desktop);
    width: var(--brand-button-size-desktop);

    bottom: calc(0% - 11.2px);
    left: 50%;

    transform: translateX(-50%);
  }
}

/*for mobile*/
@media (max-width:600px) {

  .home-panel {
    height: var(--login-panel-size-mobile);
    width: var(--login-panel-size-mobile);
    padding: var(--panel-padding-mobile);
  }

  .live-link {
    top: calc(0% + 5px);
    left: 50%;
    transform: translateX(-50%);

    height: var(--live-link-size-mobile);
    width: var(--live-link-size-mobile);
  }

  .login-button {
    top: calc(0% + 220.8px);
    height: var(--login-button-size-mobile);
    width: var(--login-button-size-mobile);
  }

  .enter-button {
    left: calc(0% - 2px);
  }

  .create-button {
    right: calc(0% - 2px);
  }

  .brand-button {
    height: var(--brand-button-size-mobile);
    width: var(--brand-button-size-mobile);

    bottom: calc(0% - 70px);
    left: 50%;

    transform: translateX(-50%);
  }
}