* {
  margin: 0;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Standard syntax */

  --white-color : #fefefe;
  --black-color: #131313;
  --meme-font-size: 2em; /* desktop size */

  
  --sk-button-background: #0071e3;
  --sk-button-background-active: #006edb;
}

body.light-theme {
  --background-color: #000;
  --text-color: white;
}

body.dark-theme {
  --background-color: #000;
  --text-color: black;

}

@media (max-width: 767px) {
  /* Your mobile-specific styles go here */
  .z_text{
      --meme-font-size: 1.2em !important; 
  }
}

.hide-screen{
    height: 100vh;
    z-index: 10;
    width: 100%;
    position: absolute;
    color: var(--black-color);
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--white-color);

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.hide-screen .show-msg-button:active{
    background-color: var(--sk-button-background-active);
}

.hide-screen .bubble{
    background: red;
    width: 12px;
    height: 12px;
    font-size: x-small;
    text-align: center;
    border-radius: 100%;
    padding: 1px;
    color: var(--white-color);
    position: relative;
    top: 0.5rem;
    left: 1.5rem;

}
.hide-screen span{
    margin-top: 0.5rem;
    font-size: 14px;
    font-weight: bold;

}
.hide-screen .show-msg-button{
    margin-top: 0.8rem;
    background-color: var(--sk-button-background);
    color: var(--white-color);
    border: none;
    font-size: 14px;
    padding: 0.5em 3.5em;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    
}


.container {
  padding: 1rem;
  height: 100vh;
  display: flex;
  /* align-content: center; */
  justify-content: center;
  align-items: center;
  background-color: var(--background-color);
}

#img_main {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90vh;
}

.z_text {
  color: var(--text-color);
  z-index: 1;
  position: absolute;
  text-align: center;

  font-size: var(--meme-font-size);
  font-family: Arial, Helvetica, sans-serif;

  /* text-shadow: 3px 1px 7px #000000; */
  text-shadow: 2px 1px 6px #000000;
}

.main_img_container .upper_text {
}
.main_img_container .lower_text {
}
.main_img_container .middle_text {
}