.upload_button {

  width: 250px;

  padding: 14px 28px;

  border-radius: 16px;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: white;

  font-size: 18px;
  font-weight: 600;

  cursor: pointer;

  transition: all 0.25s ease;
}

.upload_button_purple {
  background: rgba(90, 20, 90, 0.45);
  border: 1px solid rgba(255, 80, 255, 0.5);
}

.upload_button_disabled {

  background: rgba(120,120,120,0.22);
  border: 1px solid rgba(200,200,200,0.15);
  cursor: not-allowed;
}

.upload_button_ready {
  background: rgba(90,20,90,0.45);
  border: 1px solid rgba(255,80,255,0.5);
  /*color: rgba(255,80,255,0.5);*/
  cursor: not-allowed;
}

.upload_button_rendering {
  background: rgba(140,60,20,0.55);
  border: 1px solid rgba(255,170,80,0.5);
  cursor: not-allowed;
}

.upload_button_done {
  background: rgba(70, 90, 140, 0.42);
  border: 1px solid rgba(140, 180, 255, 0.45);
  color: rgba(255,255,255,0.95);
  box-shadow: 0 0 18px rgba(120,160,255,0.18);
  transition: all 0.3s ease;
}

.get_started_button
{
  --translateY: -50%;

  position: absolute;

  top: 72%;
  left: 50%;

  transform: translate(-50%, var(--translateY));

  padding: 16px 42px;

  border-radius: 18px;

  /*
  border: 1px solid rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.18);
  */

  background: rgba(90, 20, 90, 0.45);
  border: 1px solid rgba(255, 80, 255, 0.5);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: white;

  font-size: 22px;
  font-weight: 600;

  cursor: pointer;

  box-shadow: 0 8px 24px rgba(0,0,0,0.25);

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

@media screen and (max-width:300px)
{
  .get_started_button
  {
    --translateY: -80%;
    left:50%;
    top:90%;
    font-size: 15;
  }
}

@media screen and (min-width:301px) and (max-width:800px)
{
  .get_started_button
  {
    --translateY: -80%;
    left:50%;
    top:110%;
    font-size: 15px;
  }
}

@media screen and (min-width:801px) and (max-width:1200px)
{
  .get_started_button
  {
    --translateY: -80%;
    left:30%;
    top:90%;
    font-size: 17px;
  }
}

@media screen and (min-width:1201px)
{
  .get_started_button
  {
    --translateY: -80%;
    left:20%;
    top:90%;
    font-size: 19px;
  }
}

.get_started_button:hover
{
  transform:
    translate(-50%, var(--translateY))
    translateY(-2px);
}

.logoutButton
{
  background-color:rgba(0,123,255,0.8);
  color: #fff;
  border: none;
  padding: 1px 5px;
  font-weight: normal;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.logoutButton:hover
{
 background-color:rgba(0,86,182,0.8);
}

.loginButton
{
  background-color:rgba(255,255,255,1.0);
  color: #000;
  border: none;
  padding: 1px 5px;
  font-weight: normal;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.loginButton:hover
{
 background-color:rgba(255,255,255,0.8);
}

.resetButton
{
  background-color:rgba(255,255,255,1.0);
  color:rgba(100,100,255,1.0);
  border: none;
  padding: 1px 5px;
  font-weight: normal;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.resetButton:hover
{
  color:rgba(0,0,255,1.0);
}

.UserVideoButton
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 26px;
  color: #fff;
  background-color: #fff;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color 0.3s;
  min-width:10%;
}

.UserVideoButton:hover
{
    background-color: #9f5;
}

.UserVideoButton i
{
    margin-right: 8px;
}

@media screen and (max-width:300px)
{
  .UserVideoButton { font-size:4vw; }
}

@media screen and (min-width:301px) and (max-width:800px)
{
  .UserVideoButton { font-size:4vw; }
}

@media screen and (min-width:801px) and (max-width:1200px)
{
  .UserVideoButton { font-size:1vw; }
}

@media screen and (min-width:1201px)
{
  .UserVideoButton { font-size:0.9vw; }
}

.photo-grid-button {
  width: 32px;
  height: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 8px;
  border: none;
  border-radius: 10px;
  background: white;
  cursor: pointer;
}

.photo-grid-button span {
  background: #0d3037;
  border-radius: 2px;
}

.photo-grid-button:hover {
  opacity: 0.8;
}