::backdrop {
    background-color: aliceblue;
    opacity: 70;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.welcome-header {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: black;
}

.modal-bar {
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient colors */
    margin: 10px 0;
}

.camo {
    width: 30vw;
    height: auto;
}

.image-flex {
    display: flex;
}

.mute-button {
    align-self: flex-end;
}

.footer { 
    position: fixed;
    text-align: right;    
    bottom: 0px; 
    width: 100%;
}
/* for cell phones and stuff */
@media screen and (max-width: 600px) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }

    .camo {
        width: 70vw;
        height: auto;
    }
}

/* a hacky way of displaying only certain things based on screen size*/
@media all and (max-width: 959px) {
    .desktop {
      display: block;
    }
    .mobile {
      display: none;
    }
}
  
  @media all and (max-width: 479px) {
    .desktop {
      display: none;
    }
    .mobile {
      display: block;
    }
}