body{
    background-color: slategray;
    background-image: radial-gradient(ellipse, rgba(0, 0, 5, 0.1) 5%, rgba(5, 5, 15, 0.8) 90%);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
    transition: 0.5s;
    background-position: 90%;
    backdrop-filter: brightness(75%);
    text-align: center;
}
a{
    text-decoration: none;
    color: whitesmoke;
}
.module-title{
    display: flex;
    justify-content: center;
    align-items: center;
    color: whitesmoke;
    height: 100%;
    width: 100%;
    text-decoration: none;
    font-size: 1.5em;
}
.container{
    height: 95vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.nav-box{
    width: 100vw;
    height: 15rem;

    display: flex;

    background-color: rgba(255, 235, 205, 0.5);
}
.nav-box-element{
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;

    transition: 0.5s;
}
.nav-box-element a{
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    text-align: center;
    justify-content: center;
    align-items: center;
}
.nav-box-element:hover{
    width: 150%;
    opacity: 100%;

    background-color: rgba(255, 235, 205, 0.6);
    filter: brightness(125%) saturate(125%);
}

#nav-box-photography{
    background-image: url("/assets/images/night-background.png");
    background-position: 75% 50%;
    background-size: cover;
    background-repeat: no-repeat;    
    opacity: 95%;
}

.welcome-message{
    position: relative;
    bottom: 10vh;
    animation-name: title-fade-in;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-iteration-count: no-repeat;
}
.module-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
    gap: 1em;
    animation-name: title-fade-in;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
    animation-iteration-count: no-repeat;
}
.module-block{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: min-content;
    padding: .5em;
    background-image: radial-gradient(ellipse,rgba(0,0,0,0.3), rgba(0,0,0,0.6));
}
#hide-for-fade{
    opacity: 0;
}

@media only screen  
  and (max-device-width: 540px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    body{
        background-position: 75%;
        backdrop-filter: brightness(66%);
    }
    .module-block{
        padding: .5em;
        background-image: radial-gradient(ellipse,rgba(0,0,0,0.3), rgba(0,0,0,0.6));
    }

    .nav-box{
        position: relative;
        bottom: 0;
        width: 100vw;
        height: 50rem;
    
        display: flex;
        flex-direction: column; 
        background: none;
    }
    .nav-box-element{
        height: 100%;
        width: 100%;
    
        display: flex;
        justify-content: center;
        align-items: center;
    
        transition: 0.5s;
        background-size: cover;
        background-color: rgba(255, 235, 205, 0.5);
    }

    @supports not (-webkit-touch-callout: none) {
        /* CSS for other than iOS devices */
        .nav-box-element a{
            pointer-events: none;
            cursor: default;
        } 

        .nav-box-element:hover a{
            animation-name: showPointer;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-delay: 0.1s;
        }

        .nav-box-element:hover{
            width: 100%;
            height: 175%;
            opacity: 100%;
        }
      }

    @supports (-webkit-touch-callout: none) {
        /* CSS specific to iOS devices */ 

      }
    
}
/*
  /$$$$$$            /$$                           /$$     /$$                    
 /$$__  $$          |__/                          | $$    |__/                    
| $$  \ $$ /$$$$$$$  /$$ /$$$$$$/$$$$   /$$$$$$  /$$$$$$   /$$  /$$$$$$  /$$$$$$$ 
| $$$$$$$$| $$__  $$| $$| $$_  $$_  $$ |____  $$|_  $$_/  | $$ /$$__  $$| $$__  $$
| $$__  $$| $$  \ $$| $$| $$ \ $$ \ $$  /$$$$$$$  | $$    | $$| $$  \ $$| $$  \ $$
| $$  | $$| $$  | $$| $$| $$ | $$ | $$ /$$__  $$  | $$ /$$| $$| $$  | $$| $$  | $$
| $$  | $$| $$  | $$| $$| $$ | $$ | $$|  $$$$$$$  |  $$$$/| $$|  $$$$$$/| $$  | $$
|__/  |__/|__/  |__/|__/|__/ |__/ |__/ \_______/   \___/  |__/ \______/ |__/  |__/                                                                                
*/

@keyframes title-fade-in {
    from {
        opacity: 0%;
    }
    to {
        opacity: 100%;
    }
}

@keyframes showPointer{
    from {
        pointer-events: none;
    }
    to{
        pointer-events: auto;
    }
}