:root{ 
    --frame_scale:869px;
    --frame_bottom_shelf:50px;
    --frame_spacing:50px;
    --font_size:12; 
    /*More info var*/  
    --more_info_shelf_h:100px; 
    --ico_size:32px;
    --ico_offset:72px;
    /*End OF more info var*/     

    /*COLORS*/
    --main_col:#0D1B2A;
    --second_col:#1B263B; 
    --high_1_col:#778DA9;
    --high_2_col:#415A77; 
    --high_3_col:#E0E1DD; 
    /*COLORS*/

}
/*Animations*/
@keyframes fade_in_lighter{
    from{
        filter:sepia(0%);
    }

    to {
        filter: 
        sepia(100%)
        brightness(115%)
        contrast(85%)
        saturate(70%)
        hue-rotate(195deg);
    }
}

@keyframes drop_down{
    from{
        opacity:0%;
        height:0px;
    }
    to{
        opacity:100%;        
    }
}
@keyframes rot90{
    from{
        transform:rotate(0);
    }
    to{
        transform:rotate(90deg);
    }
}
/*End OF animations*/

body{
    background-color:var(--main_col);
}
.menu{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:60px;
    background-color:var(--main_col);    

}
.content{
    position:relative;
    top:60;
    left:0;
    width:100%;    
    background-color:var(--main_col);     
}

.img_frame{
    position:relative;    
    width:var(--frame_scale);
    height:auto; 
    background-color:var(--second_col);
    left:50%;
    transform:translate(-50%,0%); 
    margin-bottom:calc(var(--more_info_shelf_h) + var(--frame_spacing));
}

.bottom_shelf{
    position:relative;   
    height:var(--frame_bottom_shelf);
    width:100%; 
    bottom:3px;     
}

.ico{
    position:absolute;
    top:0px;
    left:0px;
    width:var(--ico_size);
    height:auto; 
    user-select:none; 
}
#loc_ico{
    width:calc(var(--ico_size) - 2px);
}

.ico_text{
    position:relative;
    top:0px;
    margin-left:calc(var(--ico_offset) - var(--ico_size));  
    color:var(--high_1_col);
    font-family:Helvetica;
    font-weight:600; 
    font-size:var(--font_size); 
    
}


.img{
    position:relative;
    top:0;
    left:50%;
    transform:translate(-50%,0);
    width:100%;
    height:auto;       
}

/*Location Area Div*/
.location_area{
    position:absolute;
    top:10px;
    left:100px; 
    width:130px;
    user-select:none; 
    cursor:pointer;
}

#loc_text{    
    top:0px; 
    font-size:var(--font_size);
    font-weight:600;   
}

.location_area:hover{
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-name:fade_in_lighter;
    animation-duration:0.1s; 
    
}

/*End OF location Area Div*/

/*More info icon transofrmation & animation*/
.more_info_ico{
    position:absolute;
    top:9px;
    width:var(--ico_size);
    left:15px; 
    height:auto;
    z-index:4;
    user-select:none;
}

.more_info_btn{
    position:absolute;
    bottom:9px;
    left:15px; 
    width:var(--ico_size);
    height:var(--ico_size);
    opacity:0%;
    z-index:5;
    cursor:pointer;
}
.more_info_shelf{
    display:none;
    position:absolute;
    background-color:var(--second_col); 
    top:var(--frame_bottom_shelf); 
    width:100%;
    height:var(--more_info_shelf_h);
    border-top:2px dotted var(--high_2_col);  
    
    animation-fill-mode:forwards;
    animation-name:drop_down;
    animation-duration:0.1s;
    animation-timing-function:ease-in-out; 

}

.more_info_btn:checked + label > .more_info_shelf{
    display:block;
}

.more_info_btn:checked + label > .more_info_ico{
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-name:fade_in_lighter;
    animation-duration:0.1s; 
}


/*End OF more info icon transofrmation & animation*/


/*Bottom Shelf*/
.more_info_sub_box{
    position:absolute;
    top:10px;
    left:17px; 
    width:180px; 
}

#more_info_date_text{
    top:8px;    
}

#more_info_camera_info{
    top:55px; 
}
#more_info_camera_info_text{
    font-size:10;    
}
#more_info_comment{
    left:180px; 
}
/*End OF bottom Shelf*/

/*Menu*/
.settings_dropdown{
    position:absolute;
    top:10px;
    right:10px;
    width:var(--ico_size); 
    height:var(--ico_size);
    
}

.settings_dropdown_shelf{
    display:none;
    position:absolute;
    top:50px;
    right:0px;
    width:200px;
    height:100px;
    background-color:var(--second_col); 
    z-index:99; 

    border-top:0; 
    border-right:0; 
    border-style:dotted;
    border-color:var(--high_2_col);

    animation-fill-mode:forwards;
    animation-name:drop_down;
    animation-duration:0.1s;
    animation-timing-function:ease-in-out; 
}
#settings_dropdown_btn{
    position:absolute;
    right:0px; 
    z-index:999;
    width:var(--ico_size);
    height:var(--ico_size);
    opacity:0%;
    cursor:pointer; 

}
#settings_dropdown_btn:checked + label > .settings_dropdown_shelf{
    display:block; 
}

#settings_dropdown_btn:checked + label > #settings_ico{    
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-name:fade_in_lighter;
    animation-duration:0.1s; 
}


/*Menu theme setting*/
.sub_box{
    position:absolute;
    top:0;
    left:0;    
}
#ch_theme_sub_box{
    width:100%;
    height:50%; 
    top:10px; 
    left:10px;
}
#ch_theme_text_tilde{
    top:9px; 
}
#ch_theme_text_sparky{
    top:9px;
    display:none; 
}
#switch_theme_btn{
    position:absolute;
    top:-3px; 
    left:-3px; 
    width:160; 
    height:var(--ico_size); 
    z-index:99; 
    opacity:0%; 
}
#switch_theme_btn:checked + label > #ch_theme_text_sparky{
    display:block; 
}
#switch_theme_btn:checked + label > #ch_theme_text_tilde{
    display:none; 
}
#switch_theme_btn:checked + label > #ch_theme_ico{
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-name:fade_in_lighter;
    animation-duration:0.1s; 
}
#switch_theme_btn{
    cursor:pointer;
}

/*End OF menu theme setting*/
/*Login*/
#login_sub_box{
    margin-top:calc(var(--ico_size) + 25px);  
    left:10px; 
    width:100%; 
    height:50%; 
}
#login_text{
    top:7px;
    
}
#login_sub_box:hover{
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-name:fade_in_lighter;
    animation-duration:0.1s; 
}
/*End OF Login*/

/*End OF Menu*/





@media (max-width:1000px){
    body{
        overflow-x:hidden; 
    }
    .menu{
        height:85px; 
        width:100%;       
        z-index:9999; 
    }
    .content{
        top:85px;
        width:100%; 
    }

    .img_frame{
        width:100%; 
        
    }

    :root{
        --frame_spacing:80px;
        --ico_size:55px;
        --frame_bottom_shelf:100px; 
        --more_info_shelf_h:150px; 
        --ico_offset:120px; 
        --font_size:25px;
    }
    .ico_text{
        font-size:25; 
    }
    .settings_dropdown{
        top:15px;
    }
    .settings_dropdown_shelf{
        width:450px; 
        height:190px; 
        top:70px;
        right:-5px;
    }
    #ch_theme_sub_box{
        margin-top:5px;
    }
    #switch_theme_btn{
        width:450px;
    }
    #login_sub_box{
        margin-top:calc(var(--ico_size) + 55px);  
    }

    

    /*More Info*/
    #more_info_comment{
        left:500px;
        width:400px;
    }    

    #more_info_camera_info{
        top:8px;
        left:280px;
        width:190px;
        
    }
    #more_info_camera_info_text{
        font-size:20; 
    }


    .more_info_ico{
        margin-top:10px;
    }
    .more_info_btn{
        top:10px;
    }
    .location_area{
        margin-top:10px;
        left:150px;
    }

    /*End OF More Info*/






}