:root{
    --banner-text: 3px 3px 2px rgb(21, 56, 56), 1px 1px 3px rgb(9, 3, 68), 0 0 15px rgb(21, 56, 56);
    --nav-hover: 7px 3px 2px rgb(21, 56, 56), 8px 1px 3px rgb(34, 25, 110), 6px 7px 15px rgb(244, 247, 247);
    --nav-shadow1:  3px 10px 12px rgb(229, 241, 241, .25), 1px 12px 13px rgb(9, 3, 68, .30), 0 0 15px rgba(227, 231, 231, 0.45);
    --nav-shadow:  3px 10px 12px rgb(21, 56, 56), 1px 12px 13px rgb(9, 3, 68), 0 0 15px rgb(21, 56, 56);
    --website-background: url("./nongallery/imageback1.jpg");
}
html{
    background-color: black;
    color: white;
}
body{
    /* background-color: black; */
    background-image: var(--website-background);
    background-repeat: no-repeat;
    background-size: cover;
    /* height: 100vh; */
    font-family: 'Courgette', cursive;

}
#main-banner{
    background-image: url("./optimages/image2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 45vh;
 }
.banner-text{
    color: white;
    text-shadow: var(--banner-text);
}
a.nav-links{
    color: white;
    text-shadow: var(--banner-text);
    text-decoration: none;
}
a.nav-links:hover{
    text-shadow: var(--nav-hover);
}
.nav-setup{
    background-image: linear-gradient(darkgray,rgb(29, 28, 28),rgb(27, 27, 27));
    box-shadow: var(--nav-shadow1);
}
.picture-size{
    height: 120px;
}
.text-container{
     color: white;
    text-shadow: var(--banner-text);
    text-indent: 30px;
}
.login-container{
    background-color: black;
    height: 100vh;
    width: 100vh;
    margin: 0;
}
.heading{
    color: white;
    text-shadow: var(--banner-text);
}
.picture{
    height: 250px;
    width: 250px;
    
}
.image-view{
   object-fit: contain;
   max-height: 100vh;
   max-width: 100vh;
}
.backdrop{
    background-image: url(./nongallery/imageback.png);
    z-index: -1;
    height: 100vh;
    width: 100vh;
}
.container-back{
    background-color: transparent;
    height: 100vh;
    width: 100vh;
}
.container-birthday{
    background-image: url("https://i.pinimg.com/originals/ec/c2/12/ecc2124116aa5a0ee1bc466c7b69dd8a.gif");
    background-size: cover;
    height: 100vh;
    width: 100vh;
}
h1.birthday-text{
   background-clip: text;
    /* color: transparent; */
}
.image-container{
    min-height: 100vh;
    min-width: 100vh;
}