/*global layout*/

    body{
        background-color: #F9F4F7;
        color: #333133;
        font-family: "Special Gothic Condensed One", sans-serif;
        font-weight: 400;
        font-style: normal;
    }

/*banner*/

    /*background banner*/

        header{
            background-image: url(Images/banner.jpg);
            background-size:cover;
            background-position: top;
            background-repeat: no-repeat;
            padding-left: 2em;
            border-bottom: 2px solid #F9F4F7;
        }

    /*text banner*/

        .text-banner{
            justify-self: left;
            background-color: #4C4A4C88;
            padding: 1em;
            a{
                text-decoration: none;
            };
            a:hover{
                opacity: 75%;
            };
        }
        /*title*/

            .title{
                padding-top: 0.5em;
                text-wrap: nowrap;
                color: #F9F4F7;
                font-size: 3em;
            
                @media all and (orientation: portrait){
                    font-size: 4em;
                }
            }

        /*subtitle*/

            .subtitle{
                padding-bottom: 0.5em;
                text-wrap: nowrap;
                color: #F9F4F7;
                font-size: 2.5em;
                @media all and (orientation: portrait){
                    font-size: 3.5em;
                }
            }

        /*page-title*/
            .page-title{
                color: #F9F4F7;
                font-size: 3em;
                justify-self: left;
                padding-bottom: 0.5em;
                border-top: 4px solid #FFC1DC;
                text-wrap: nowrap;
                @media all and (orientation: portrait){
                    font-size: 4em;
                    border-top: 8px solid #FFC1DC;
                }
            }
        
    
/*Menu*/

    nav{
        background-color: #333133;
        color: #F9F4F7;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        gap: 1em;
        padding: 0.5em;
        a{
            text-decoration: none;
        };
        @media all and (orientation: portrait){
            justify-content: center;
        }
    }
    
    .menu {
        color: #F9F4F7;
        border: 2px solid #8E8B8D;
        background-color: #8E8B8D;
        border-radius: 8px;
        font-size: 2em;
        text-align: center;
        padding-right: 0.5em;
        padding-left: 0.5em;
        @media all and (orientation: portrait){
            font-size: 3.5em;
        }
    }


/*introduction*/

    .introduction{
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        @media all and (orientation: portrait){
            flex-direction: column;
        }
    }

        .introduction-picture{
            align-self: center;
            justify-content: center;
        }


        .text-introduction{
            background-color: #333133;
            color: #F9F4F7;
            box-shadow: 10px 10px 10px #333133;
            text-align: justify;
            border: 1px solid #333133;
            border-radius: 5px;
            margin: 1em;
            padding-top: 0.25em;
            padding-bottom: 0.25em;
            padding-left: 1em;
            padding-right: 1em;
            font-size: 1.5em;
            .important{
                font-weight: 600;
                color: #FA8CD7;
                text-decoration: none;
            }
            align-self: flex-start;
        }

/*work*/

    .grid-work{
        display: grid;
        justify-content: start;
        grid-template: auto auto auto auto auto auto auto / minmax(0px, 1.5fr) 8.5fr minmax(0px, 1.5fr);
        gap: 2em;
        margin: 1em;
        font-size: 1.5em;
        .subject{
            padding-top: 1em;
            padding-bottom: 0.5em;
            font-weight: 600;
            font-size: 1.25em;
            border-bottom: 4px solid #FFC1DC;
        }
        .place{
            font-size: 1.25em;
            padding-top: 0.5em;
            padding-left: 0.5em;
        }
        .date{
            font-style: italic;
            padding-bottom: 1em;
            padding-top: 0.25em;
            padding-left: 0.625em;
        }
        .important{
            font-weight: 600;
            color: #FA8CD7;
            text-decoration: none;
        };
        @media all and (orientation: portrait){
            grid-template: auto auto auto auto auto auto auto auto / 1fr 1fr;
        }
    }

    .grid-work-1-a{
        grid-area: 1 / 1 / 8 / 2 ;
        padding-top: 2em;
        max-height: 100%;
        max-width: 100%;
        position: sticky;
        bottom: 20px;
        justify-self: center;
        align-self: end;
        @media all and (orientation: portrait){
            grid-area: 8 / 1 / 9 / 2 ;
            visibility: hidden;      
        }
    }
    .grid-work-1-b{
        grid-area: 1 / 3 / 8 / 4 ;
        padding-top: 2em;
        max-height: 100%;
        max-width: 100%;
        position: sticky;
        bottom: 20px;
        justify-self: center;
        align-self: end;
        @media all and (orientation: portrait){
            grid-area: 8 / 2 / 9 / 3 ;
            visibility: hidden;             
        }  
    }
    .grid-work-1-c{
        grid-area: 1 / 1 / 8 / 2 ;
        padding-top: 2em;
        max-height: 100%;
        max-width: 100%;
        justify-self: center;
        align-self: end;
        visibility: hidden;   
        @media all and (orientation: portrait){
            grid-area: 8 / 1 / 9 / 3 ;
            visibility: visible;   
        }
    }
    .grid-work-2-a{
        grid-area: 1 / 2 / 2 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 1em;
        padding-right: 1em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 1 / 1 / 2 / 3 ;
        }  
    }
    .grid-work-2-b{
        grid-area: 2 / 2 / 3 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 1em;
        padding-right: 1em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 2 / 1 / 3 / 3 ;
        }  
    }
    .grid-work-2-c{
        grid-area: 3 / 2 / 4 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 1em;
        padding-right: 1em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 3 / 1 / 4 / 3 ;
        }  
    }
    .grid-work-2-d{
        grid-area: 4 / 2 / 5 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 1em;
        padding-right: 1em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 4 / 1 / 5 / 3 ;
        }  
    }
    .grid-work-2-e{
        grid-area: 5 / 2 / 6 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 1em;
        padding-right: 1em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 5 / 1 / 6 / 3 ;
        }  
    }
    .grid-work-2-f{
        grid-area: 6 / 2 / 7 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 1em;
        padding-right: 1em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 6 / 1 / 7 / 3 ;
        }  
    }
    .grid-work-2-g{
        grid-area: 7 / 2 / 8 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 1em;
        padding-right: 1em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 7 / 1 / 8 / 3 ;
        }  
    }

/*education*/

    .grid-education{
        display: grid;
        justify-content: start;
        grid-template: auto auto auto auto / minmax(0px, 1.5fr) 8.5fr minmax(0px, 1.5fr);
        gap: 2em;
        margin: 1em;
        font-size: 1.5em;
        .subject{
            padding-top: 1em;
            padding-bottom: 0.5em;
            font-weight: 600;
            font-size: 1.25em;
            border-bottom: 4px solid #FFC1DC;
        }
        .place{
            font-size: 1.25em;
            padding-top: 0.5em;
            padding-left: 0.5em;
        }
        .date{
            font-style: italic;
            padding-bottom: 1em;
            padding-top: 0.25em;
            padding-left: 0.625em;
        }
        .important{
            font-weight: 600;
            color: #FA8CD7;
            text-decoration: none;
        };
        @media all and (orientation: portrait){
            grid-template: auto auto auto auto auto / 1fr 1fr;
        }
    }

    .grid-education-1-a{
        grid-area: 1 / 1 / 5 / 2 ;
        padding-top: 2em;
        max-height: 100%;
        max-width: 100%;
        position: sticky;
        bottom: 20px;
        justify-self: center;
        align-self: end;
        @media all and (orientation: portrait){
            grid-area: 5 / 1 / 6 / 2 ;
            visibility: hidden;   
        }
    }
    .grid-education-1-b{
        grid-area: 1 / 3 / 5 / 4 ;
        padding-top: 2em;
        max-height: 100%;
        max-width: 100%;
        position: sticky;
        bottom: 20px;
        justify-self: center;
        align-self: end;
        @media all and (orientation: portrait){
            grid-area: 5 / 2 / 6 / 3 ;
            visibility: hidden;             
        }  
    }
    .grid-education-1-c{
        grid-area: 1 / 1 / 5 / 2 ;
        padding-top: 2em;
        max-height: 100%;
        max-width: 100%;
        justify-self: center;
        align-self: end;
        visibility: hidden;   
        @media all and (orientation: portrait){
            grid-area: 5 / 1 / 6 / 3 ;
            visibility: visible;   
        }
    }
    .grid-education-2-a{
        grid-area: 1 / 2 / 2 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 1em;
        padding-right: 1em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 1 / 1 / 2 / 3 ;
        }  
    }
    .grid-education-2-b{
        grid-area: 2 / 2 / 3 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 1em;
        padding-right: 1em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 2 / 1 / 3 / 3 ;
        }  
    }
    .grid-education-2-c{
        grid-area: 3 / 2 / 4 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 1em;
        padding-right: 1em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 3 / 1 / 4 / 3 ;
        }  
    }
    .grid-education-2-d{
        grid-area: 4 / 2 / 5 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 1em;
        padding-right: 1em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 4 / 1 / 5 / 3 ;
        }  
    }

/*hobbies*/

    .grid-hobbies{
        display: grid;
        justify-content: start;
        grid-template: auto auto auto / minmax(0px, 1.5fr) 8.5fr minmax(0px, 1.5fr);
        gap: 2em;
        margin: 1em;
        font-size: 1.5em;
        .subject{
            padding-top: 1em;
            padding-bottom: 0.5em;
            font-weight: 600;
            font-size: 1.25em;
            border-bottom: 4px solid #FFC1DC;
        }
        .place{
            font-size: 1.25em;
            padding-top: 0.5em;
            padding-left: 0.5em;
        }
        .date{
            font-style: italic;
            padding-bottom: 1em;
            padding-top: 0.25em;
            padding-left: 0.625em;
        }
        .important{
            font-weight: 600;
            color: #FA8CD7;
            text-decoration: none;
        };
        @media all and (orientation: portrait){
            grid-template: auto auto auto auto / 1fr ;
        }
    }

    .grid-hobbies-1-a{
        grid-area: 1 / 1 / 2 / 2 ;
        padding-top: 2em;
        max-height: 100%;
        max-width: 100%;
        justify-self: center;
        align-self: center;
        @media all and (orientation: portrait){
            grid-area: 4 / 1 / 5 / 2 ;
            visibility: hidden;
            height: 0%; 
        }
    }
    .grid-hobbies-1-b{
        grid-area: 2 / 3 / 3 / 4 ;
        padding-top: 2em;
        max-height: 100%;
        max-width: 100%;
        justify-self: center;
        align-self: center;
        @media all and (orientation: portrait){
            grid-area: 4 / 1 / 5 / 2 ;
            visibility: hidden;
        }  
    }
    .grid-hobbies-1-c{
        grid-area: 3 / 1 / 4 / 2 ;
        padding-top: 2em;
        max-height: 100%;
        max-width: 100%;
        justify-self: center;
        align-self: center;
        @media all and (orientation: portrait){
            grid-area: 4 / 1 / 5 / 2 ;
            visibility: hidden;
        }
    }
    .grid-hobbies-1-d{
        grid-area: 1 / 1 / 2 / 2 ;
        max-height: 100%;
        max-width: 100%;
        justify-self: center;
        align-self:center;
        visibility: hidden; 
        @media all and (orientation: portrait){
            grid-area: 4 / 1 / 5 / 2 ;
            visibility: visible;    
        }
    }
    .grid-hobbies-2-a{
        grid-area: 1 / 2 / 2 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 2em;
        padding-right: 2em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 1 / 1 / 2 / 2 ;
        };
        .details{
            display: flex;
            background-color: #F9F4F7BB;
            color: #333133;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            text-align: justify;
            border: 1px solid #F9F4F7BB;
            border-radius: 5px;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 1em;
            padding:1em;
            align-items: center;
            .img-details{
                max-width: 20%;
                max-height: 20%;
                justify-self: center;
                align-self: flex-start;
                border-radius: 50% 50%;
            }
        }
    }
    .grid-hobbies-2-b{
        grid-area: 2 / 2 / 3 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 2em;
        padding-right: 2em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 2 / 1 / 3 / 2 ;
        };
        .details{
            display: flex;
            background-color: #F9F4F7BB;
            color: #333133;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            text-align: justify;
            border: 1px solid #F9F4F7BB;
            border-radius: 5px;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 1em;
            padding:1em;
            align-items: center;
            .img-details{
                max-width: 20%;
                max-height: 20%;
                justify-self: center;
                align-self: flex-start;
                border-radius: 50% 50%;
            }
        }
    }
    .grid-hobbies-2-c{
        grid-area: 3 / 2 / 4 / 3 ;
        background-color: #333133;
        color: #F9F4F7;
        box-shadow: 10px 10px 10px #333133;
        text-align: justify;
        border: 1px solid #333133;
        border-radius: 5px;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 2em;
        padding-right: 2em;
        align-self: flex-start;
        @media all and (orientation: portrait){
            grid-area: 3 / 1 / 4 / 2 ;
        };
        .details{
            display: flex;
            background-color: #F9F4F7BB;
            color: #333133;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            text-align: justify;
            border: 1px solid #F9F4F7BB;
            border-radius: 5px;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 1em;
            padding:1em;
            align-items: center;
            .img-details{
                max-width: 20%;
                max-height: 20%;
                justify-self: center;
                align-self: flex-start;
                border-radius: 50% 50%;
            }
        }  
    }


/*Contact*/

    .contact{
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        justify-content: center;
        @media all and (orientation: portrait){
            flex-direction: column;
        }
    }

        .contact-picture{
            align-self: center;
            justify-content: center;
        }

        .text-contact{
            background-color: #333133;
            color: #F9F4F7;
            box-shadow: 10px 10px 10px #333133;
            border: 1px solid #333133;
            border-radius: 5px;
            margin: 1em;
            padding-top: 0.25em;
            padding-bottom: 0.25em;
            padding-left: 1em;
            padding-right: 1em;
            font-size: 1.5em;
            .important{
                font-weight: 600;
                color: #FA8CD7;
                text-decoration: none;
            }
            align-self: center;
            @media all and (orientation: portrait){   
                font-size: 3em;
            };
        }

    footer{
        border-top: 4px solid #4C4A4C;
        color: #4C4A4C;
        a{
                text-decoration: none;
                color: #4C4A4C;
                font-size: 2em;
                font-weight: 600;
            };
    }

/*mise en forme du texte*/