body {
 background-color: #ffffdc;
 font-family: arial,sans-serif;
 font-size: 12px;
}


table {
  /* make <td> sizes relative to body size! */
  font-size: 1em;
}

TABLE.BODY{
 border-style: solid;
 border-color: #464646;
 background-color: #EEDD99;
}

TABLE.menu{
 border-style: solid;
 border-color: #777777;
 background-color: #ffffb7;
}
TABLE.menu2{
 border-style: solid;
 border-color: #777777;
 background-color: #EEDD99;
 margin-top: 10px;
}

FONT.te{
 color: #383838;
 font-weight: bold;
 text-decoration: none;}

FONT.desc{
color: #777777;
text-decoration: none;
font-size: 0.9em;}

FONT.dirdesc{
color: #777777;
text-decoration: none;
}

A:link.me{
 color: #464646;
 font-weight: bold;
 text-decoration: none;}
A:visited.me{
 color: #464646;
 font-weight: bold;
 text-decoration: none;}
A:hover.me{
 color: #464646;
 font-weight: bold;
 text-decoration: underline;}
A:active.me{
 color: #464646;
 font-weight: bold;
 text-decoration: none;}

A:link.me3{
 color: #777777;
 font-weight: bold;
 text-decoration: none;}
A:visited.me3{
 color: #777777;
 font-weight: bold;
 text-decoration: none;}
A:hover.me3{
 color: #777777;
 font-weight: bold;
 text-decoration: underline;}
A:active.me3{
 color: #777777;
 font-weight: bold;
 text-decoration: none;}

A:link.me4{
 color: #777777;
 font-weight: bold;
 text-decoration: none;}
A:visited.me4{
 color: #777777;
 font-weight: bold;
 text-decoration: none;}
A:hover.me4{
 color: #777777;
 font-weight: bold;
 text-decoration: none;}
A:active.me4{
 color: #777777;
 font-weight: bold;
 text-decoration: none;}

A:link.me2{
 color: #464646;
 font-weight: bold;
 text-decoration: none;}
A:visited.me2{
 color: #464646;
 font-weight: bold;
 text-decoration: none;}
A:hover.me2{
 color: #464646;
 font-weight: bold;
 text-decoration: none;}
A:active.me2{
 color: #464646;
 font-weight: bold;
 text-decoration: none;}

A:link.logo{
 font-size: 58;
 color: #464646;
 font-weight: bold;
 text-decoration: none;}
A:visited.logo{
 font-size: 58;
 color: #464646;
 font-weight: bold;
 text-decoration: none;}
A:hover.logo{
 font-size: 58;
 color: #464646;
 font-weight: bold;
 text-decoration: none;}
A:active.logo{
 font-size: 58;
 color: #464646;
 font-weight: bold;
 text-decoration: none;}
TD{
color: #464646;
}
TD.boxhead {
color: #464646;
background-color: #ffffdc;
}
TD.boxbody {
color: #383838;
background-color: #ffffb7;
}
FONT.photodesc {
color: #464646;
}
TD.thmb {
background-color: #EEDD99;
}
TD.photo {
background-color: #FFFFFF;
}
TD.txt {
color: #464646;
}
TD.logo {
font-size: 72px;
color: #464646;
background-color: #EEDD99;
}
IMG.thmb {
border-color: #FFFFFF;
border-style: solid;
border-width: 5;
}
IMG.thmb_dir {
border-color: #FFFFFF;
border-style: solid;
border-width: 2;
}
IMG.movie {
border-color: #FFFFFF;
border-style: solid;
border-width: 0;
}

TABLE.F {
	border-style: solid;
	border-color: #ffffdc;
	background-color: #EEDD99;
}
TD.F {
	color: #464646;
	font-weight: bold;
	font-size: 0.8em;
}
TD.N {
	color: #464646;
	font-weight: normal;
	font-size: 0.8em;
}
TR.H {
	background-color: #ffffdc;
	color: #464646;
	font-weight: bold;
	font-size: 0.8em;
}
A:link.mex{
 color: #464646;
 font-weight: bold;
 text-decoration: none;}
A:visited.mex{
 color: #464646;
 font-weight: bold;
 text-decoration: none;}
A:hover.mex{
 color: #464646;
 font-weight: bold;
 text-decoration: underline;}
A:active.mex{
 color: #464646;
 font-weight: bold;
 text-decoration: none;}
 
INPUT.login{
border: 1px solid #464646;
padding: 3px;
background-color: #ffffb7;
color: #464646;
font-size: 0.9em;
font-weight: bold;
}
INPUT.login_btn{
border: 1px solid #464646;
padding: 2px;
background-color: #464646;
color: #ffffb7;
font-size: 0.9em;
font-weight: bold;
}

.photo img{
    animation: fadeInPhoto 0.8s;
}

@keyframes fadeInPhoto{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

.modern_shadow{
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/* ========================= */
/* Responsive Mobile Layout  */
/* ========================= */

@media screen and (max-width:768px){

    img{
        max-width:100% !important;
        height:auto !important;
    }

    table{
        width:100% !important;
    }

    td{
        word-wrap:break-word;
    }

    body{
        overflow-x:hidden;
    }

    .photo_details{
        width:100% !important;
    }

    #slideshow_controls{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:5px;
        margin:10px 0;
    }

}

/* Fotografia principală */

#main_photo{

    border-radius:12px;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.35);

}

.darkmode #main_photo{

    box-shadow:
        0 10px 35px rgba(0,0,0,0.7);

}

.thmb{

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.thmb:hover{

    transform:scale(1.04);

}

.photo-details summary{
    cursor:pointer;
    font-size:18px;
    font-weight:bold;
    padding:10px;
    text-align:center;
}

.photo-details[open] summary{
    margin-bottom:10px;
}