/* CSS Document */
html {
    font-size : 12px;
    margin    : 0;
    padding   : 0;
}

body {
    /*! font-size  : 110%; */
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

h2 {
    color       : #7F3E3E;
    font-family : 'avalon', sans-serif;
    font-size   : clamp(3rem, 18px, 4rem);
    font-weight : 700;
    font-style  : normal;
}

.noscroll {
    overflow : hidden;
    height   : 100vh;
}

#container {
    display               : block;
    z-index               : -1;
    box-sizing            : border-box;
    width                 : 100vw;
    margin                : 0;
    padding               : 0;
    background-color      : #FFFFFF;
    background-image      : url('../images/home_bkg_tr.jpg');
    background-repeat     : no-repeat;
    background-attachment : fixed;
    background-position   : top center;
    background-size       : auto 100vmax;
}

nav.menu {
    display          : flex;
    position         : fixed;
    z-index          : 10;
    top              : 0;
    left             : 0;
    width            : 100vw;
    box-shadow       : 0 2px 3px #777777;;
    background-color : rgb(140, 171, 171);
    transition       : background-color 0.3s ease-out, box-shadow 0.3s ease-out;

    &.transparent {
        box-shadow       : unset;
        background-color : rgb(177, 212, 213, 0.5);

        & menu {
            align-items : center;

            & li:nth-child(1) {
                left : 10px;
            }

            & li:nth-child(2) {
                right : 10px;
            }

            & li a,
            & li a:visited,
            & li a:link {
                color           : #333333;
                text-decoration : none;
            }
        }
    }

    & menu {
        display        : flex;
        position       : relative;
        font-size      : 1.2rem;
        flex-direction : row;
        align-items    : center;
        width          : 100%;
        height         : 3em;
        margin         : 0;
        padding        : 0;

        & li {
            position   : absolute;
            list-style : none;
            padding    : 10px 5vw;
            transition : all 0.5s ease-out;

            &:nth-child(1) {
                left : 25%;
            }

            &:nth-child(2) {
                right : 25%;
            }

            & a,
            & a:visited,
            & a:link {
                color           : #FFFFFF;
                text-decoration : none;
            }
        }
    }
}

.home-container {
    display        : flex;
    flex-direction : column;
    width          : 100%;
    height         : auto;
}

.home-item1 {
    display        : flex;
    position       : relative;
    flex-direction : column;
    align-items    : center;
    height         : 45vh;

    & picture {
        display     : flex;
        overflow    : hidden;
        flex        : 1 0 auto;
        align-items : center;
        margin      : 0;
        padding     : 5vh 0 0 0;

        & img {
            display    : block;
            position   : relative;
            opacity    : 1;
            height     : 25vh;
            margin     : 0;
            padding    : 0;
            transition : all 0.3s ease-out;

            &.hidden {
                height : 5vh;
            }
        }
    }
}

.home-item2 {
    display          : flex;
    position         : relative;
    z-index          : 1;
    flex             : 0 0 auto;
    justify-content  : center;
    box-sizing       : border-box;
    width            : 100%;
    border-top       : 3px solid #FFFFFF;
    border-bottom    : 3px solid #FFFFFF;
    box-shadow       : 0 0 10px 4px #888888;
    background-color : rgba(21, 65, 72, 0.54);

    & #logo {
        box-sizing : border-box;
        padding    : 20px;

        & img {
            display : block;
            height  : 15vh;
            margin  : 0;
        }
    }
}

@media screen and (orientation : landscape) {
    nav.menu {
        position : relative;
    }

    .home-item1 {
        height : 50vh;

        & picture {
            padding-top : 0;

            & img {
                height : 15vw;
            }
        }
    }

    .home-item2 #logo img {
        height : 12vw;
    }
}

#biografia,
#bibliografia {
    display          : flex;
    flex-direction   : column;
    margin           : 10vh 2vw 0 2vw;
    padding          : 20px 0;
    box-shadow       : 0 0 10px 3px #888888;
    background-color : #FFFFFF;

    & h2 {
        display         : flex;
        justify-content : center;
        margin          : 0 2vw;
        padding         : 0 0 1.8vh 0;
    }

    & ul {
        display        : flex;
        list-style     : none;
        flex-direction : column;
        align-items    : center;
        margin         : 0;
        padding        : 2vh 0;
        border-top     : 1px solid #7F3E3E;
        border-bottom  : 1px solid #7F3E3E;

        & li {
            text-align : center;
            width      : 80vw;
            padding    : 1rem 0;

            & em {
                display : block;
                color   : #7F3E3E;
            }
        }
    }
}

#biografia article,
#bibliografia article {
    display    : block;
    box-sizing : border-box;
    padding    : 2vw;

    & picture {
        width         : 40vw;
        shape-outside : border-box;

        &.right {
            float   : right;
            padding : 0 0 10px 10px;
        }

        &.left {
            float   : left;
            padding : 10px 10px 0 0;
        }

        &.center {
            margin-right : auto;
            margin-left  : auto;
        }
    }

    & picture img {
        width  : 100%;
        height : auto;
    }
}

h2.default {
    display       : block;
    margin        : 0 0 2vh 0;;
    padding       : 0 0 1vh 0;
    border-bottom : 1px solid #7F3E3E;
}

p.default {
    color       : #555555;
    font-family : 'utopia-std', serif;
    font-size   : clamp(1.5rem, 1.2vw, 1.8rem);
    font-weight : 400;
    font-style  : normal;
    line-height : 2.5rem;
}

#books-container {
    display         : flex;
    flex-direction  : column;
    justify-content : space-between;
    box-sizing      : border-box;
    width           : 100%;
    padding         : 2vw 5vw;

    & .book-container {
        display          : flex;
        overflow         : hidden;
        flex-direction   : column;
        box-sizing       : border-box;
        width            : 100%;
        margin-bottom    : 5vh;
        border           : 1px solid #777777;
        border-radius    : 15px;
        background-color : #D6DDE3;

        & h3 {
            color            : #F3F3F3;
            text-align       : center;
            margin           : 0;
            padding          : 1rem;
            background-color : #7F3E3E;
        }

        .book {
            display         : flex;
            flex-direction  : column;
            align-items     : center;
            justify-content : center;
            padding         : 1rem;

            & picture {
                display    : block;
                box-sizing : border-box;
                width      : 200px;
                height     : 200px;
                margin     : 2vh 0;
                padding    : 0;

                & img {
                    width           : 200px;
                    height          : 200px;
                    border          : 2px solid #FFFFFF;;
                    border-radius   : 15px;
                    box-shadow      : 0 0 6px #333333;
                    object-fit      : cover;
                    object-position : center;
                }
            }

            & p {
                display       : block;
                text-align    : center;
                margin        : 2vw 0;
                padding       : 2vw;
                border-top    : 1px solid #7F3E3E;
                border-bottom : 1px solid #7F3E3E;
            }
        }
    }
}

@media screen and (orientation : landscape) {
    #biografia article picture {
        max-width : 60vh;

        &.center {
            float   : right;
            padding : 0 0 10px 10px;
        }
    }

    #biografia ul li {
        width : 50vw;
    }

    #books-container .book-container {
        flex-direction : column;
    }

    #books-container .book-container .book {
        flex-direction : row;
    }

    #books-container .book-container p.default {
        margin : 0 20px;
    }
}

#contatti {
    display          : flex;
    position         : fixed;
    z-index          : 11;
    top              : 0;
    left             : 0;
    flex-direction   : column;
    align-items      : center;
    justify-content  : space-between;
    box-sizing       : border-box;
    width            : 100vw;
    height           : 100vh;
    background-color : #A2C4CB;
    transition       : left 0.3s ease-out;

    &.hidden {
        left : -110%;
    }

    & .contact-container {
        display         : flex;
        flex            : 0 0 auto;
        flex-direction  : column;
        align-items     : center;
        justify-content : space-evenly;
        width           : 100%;
        height          : 30%;

        & #phone,
        & #email {
            display     : block;
            font-size   : 1.5rem;
            font-weight : bold;
            padding     : 0;
        }
    }

    & .close-button-container {
        display         : flex;
        flex            : 1 1 auto;
        align-items     : center;
        justify-content : center;
        width           : 100%;
        height          : 70%;

        & .closeContacts {
            display         : flex;
            position        : relative;
            font-size       : 1.6rem;
            align-items     : center;
            justify-content : center;
            width           : 10vw;
            height          : 10vw;
            margin          : 0;
            padding         : 0;
            border          : 1px solid #111111;
            border-radius   : 50%;
        }
    }
}

@media screen and (orientation : landscape) {
    #contatti .close-button-container .closeContacts {
        width  : 10vh;
        height : 10vh;
    }
}

#endpage {
    display          : flex;
    flex-direction   : row;
    align-items      : center;
    justify-content  : space-around;
    padding          : 5vw;
    background-color : rgba(188, 205, 201, 0.5);

    & picture {
        display          : block;
        padding          : 3vw;
        box-shadow       : 0 0 10px 3px #777777;
        background-color : rgba(235, 235, 235, 1.00);

        & img {
            width   : 60vw;
            margin  : 0;
            padding : 0;
            border  : none;
        }
    }
}

#gallery {
    display            : block;
    position           : fixed;
    z-index            : 20;
    top                : 0;
    left               : 0;
    visibility         : visible;
    overflow-x         : hidden;
    overflow-y         : scroll;
    width              : 100vw;
    height             : 100vh;
    background-color   : #333333;
    transition         : left 0.3s ease-out;
    overflow-scrolling : touch;

    &.hidden {
        left : -110%;
    }

    &.no-touch {
        visibility : hidden;
    }
}

.gallery-header {
    display          : flex;
    position         : fixed;
    z-index          : 21;
    align-items      : center;
    box-sizing       : border-box;
    width            : 100vw;
    height           : 45px;
    margin           : 0;
    padding          : 10px 0;
    background-color : #222222;

    & menu {
        display         : flex;
        list-style      : none;
        flex            : 1 0 auto;
        flex-direction  : row;
        align-items     : center;
        justify-content : space-around;
        margin          : 0;
        padding         : 0;

        & li {
            display         : flex;
            font-size       : 1.3rem;
            align-items     : center;
            justify-content : center;
            margin          : 0;
            padding         : 0;

            & a,
            & a:visited {
                color           : #BFBFBF;
                text-decoration : none;
            }

            & a.active {
                color : #FF38F5;
            }
        }
    }

    & .arrow_close_gallery {
        display          : flex;
        flex             : 0 0 auto;
        align-items      : center;
        justify-content  : center;
        width            : 30px;
        height           : 30px;
        margin-left      : 15px;
        border           : 1px solid #BFBFBF;
        border-radius    : 50%;
        background-color : #222222;
    }
}

@media screen and (orientation : landscape) {
    .gallery-header {
        flex-direction : column;
        width          : 45px;
        height         : 100vh;

        & menu {
            flex-direction : column;

            & li {
                transform : rotate(-90deg);

                & a {
                    margin  : 0;
                    padding : 0;
                }

                & a,
                & a:visited {
                    color           : #BFBFBF;
                    text-decoration : none;
                }

                & a.active {
                    color : #FF38F5;
                }
            }
        }

        & .arrow_close_gallery {
            margin-left : 0;
        }

    }
}

.left-arrow {
    display      : block;
    width        : 50%;
    height       : 50%;
    fill         : none;
    stroke       : #BFBFBF;
    stroke-width : 3px;

    &.black {
        stroke : #333333;
    }

    &.white {
        stroke : #BFBFBF;
    }
}

.grid-container {
    display        : block;
    opacity        : 1;
    flex           : 0 0 auto;
    flex-direction : column;
    width          : 100vw;
    height         : calc(100vh - 45px);
    margin         : 45px 0 0 0;
    padding        : 0;
    transition     : opacity 0.3s ease-out;

    &.hidden {
        opacity : 0;
    }

    & #grid {
        display               : grid;
        position              : relative;
        box-sizing            : border-box;
        width                 : 100%;
        grid-template-columns : repeat(auto-fill, minmax(45vw, 2fr));
        grid-auto-rows        : 45vw;
        grid-auto-columns     : 45vw;
        grid-gap              : -14.5px;
    }
}

@media screen and (orientation : landscape) {
    .grid-container {
        width  : calc(100vw - 45px);
        height : 100vh;
        margin : 0 0 0 45px;

        & #grid {
            grid-template-columns : repeat(auto-fill, minmax(45vh, 2fr));
            grid-auto-rows        : 45vh;
            grid-auto-columns     : 45vh;
        }
    }
}

.grid-item {
    display    : block;
    position   : relative;
    overflow   : hidden;
    box-sizing : border-box;
    padding    : 5%;
    transition : all 0.2s ease-out;

    & img {
        opacity         : 1;
        box-sizing      : border-box;
        width           : 100%;
        height          : 100%;
        margin          : 0;
        transition      : opacity 0.5s ease-out;
        object-fit      : cover;
        object-position : center center;

        &.hidden {
            opacity : 0;
        }
    }
}

.lightbox {
    display          : flex;
    position         : fixed;
    z-index          : 22;
    top              : 0;
    left             : 0;
    opacity          : 1;
    flex-direction   : column;
    width            : 100vw;
    height           : 100vh;
    background-color : #000000;
    transition       : opacity 0.3s ease-out;

    &.hidden {
        visibility : hidden;
        opacity    : 0;
    }

    & .lightbox-header {
        display          : flex;
        position         : relative;
        z-index          : 23;
        flex             : 0 0 auto;
        align-items      : center;
        justify-content  : space-around;
        box-sizing       : border-box;
        width            : 100vw;
        height           : 40px;
        margin           : 0;
        background-color : #000000;

        & .icon-container {
            display         : flex;
            position        : relative;
            align-items     : center;
            justify-content : center;

            &.hidden {
                display : none;
            }

            & img {
                width : 20px;

                &.hidden {
                    visibility : hidden;
                }
            }
        }
    }

    & .lightbox-content {
        display          : flex;
        position         : relative;
        z-index          : 23;
        align-items      : center;
        justify-content  : center;
        width            : 100%;
        height           : 100%;
        background-color : #131313;

        & .new-image {
            opacity    : 1;
            width      : 100%;
            height     : auto;
            transition : opacity 0.3s ease-out;

            &.hidden {
                opacity : 0;
            }

            &.rotate {
                transform : rotate(90deg);
            }
        }
    }
}

@media screen and (orientation : landscape) {
    .lightbox {
        flex-direction : row;

        & .lightbox-header {
            flex-direction : column;
            width          : 40px;
            height         : 100vh;
        }

        & .lightbox-content {
            & .new-image {
                width  : auto;
                height : 100%;
            }
        }
    }

}

#main-footer {
    display          : flex;
    font-size        : 1.2rem;
    flex-direction   : column;
    align-items      : center;
    justify-content  : center;
    width            : 100vw;
    min-height       : 100px;
    background-color : #405454;

    & span {
        color           : #FFFFFF;
        font-family     : 'utopia-std', serif;
        font-size       : clamp(1rem, 1.2vw, 1.4rem);
        font-weight     : 400;
        font-style      : normal;
        text-align      : center;
        text-decoration : none;
        margin          : 0;
        padding         : 0;
    }
}