@charset "UTF-8";

:root{
    /*color*/
        --background1: #B7E3CC;
        --background2: #afd3c0d0;
        --background3: #d8eee277;
        --color1: #2A6041;
        --color2: #C4FFB2;
        --color3: #D6F7A3;
}

/* mobileFirst */
    /* body */
        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body{
            /*layout*/
                display: grid;
                grid-template: repeat(2, auto) / auto;

            /*box*/
                width: 100vw;
            
            /*style*/
                background: var(--background1) url(../image/picture/galax.jpg) fixed center no-repeat;
                background-size: cover;
        }
        p{
            padding-bottom: 5px;
            text-align: justify;
            text-indent: 10px;
        }
    /* /body */
    /* header */
        header{
            background-color: var(--background2);
            height: 40px;
        }
        header > #menu{
            /*layout*/
                align-items: center;
                display: flex;
                flex-flow: row wrap;
                justify-content: space-evenly;
            
            /*box*/
                height: 100%;
        }
        header > #menu > a{
            /*layout*/
                align-items: center;
                display: flex;
                justify-content: center;
            
            /*box*/
                aspect-ratio: 1 / 1;
                width: clamp(30px, 1%, 50px);
            
            /*style*/
                border: 1px solid var(--background3);
                border-radius: 5px;
            
            /*effect*/
                transition: background-color .5s, border .5s;
        }
        header > #menu > a:hover{
            background-color: var(--background2);
            border: 1px solid var(--color1);
        }
        header > #menu > a > img{
            aspect-ratio: 1 / 1;
            width: 60%;
            transition: transform .4s;
        }
        header > #menu > a > img:hover{transform: scale(1.2);}
        header > #menu > a > img:active{transform: scale(.8);}
    /* /header */
    /* main */
        main{width: 100%;}
        /* sobreMim */
            main > #sobremim{
                display: flex;
                flex-flow: row wrap;
            }
            /* perfil */
                main > #sobremim > #perfil{
                    display: grid;
                    grid-template: repeat(2, auto) 30px / repeat(2, auto);
                    place-items: center center;
                    margin-top: 5px;
                }
                /* foto */
                    main > #sobremim > #perfil > img{
                        /*box*/
                            aspect-ratio: 1 / 1;
                            margin: auto auto;
                            width: 200px;
                        
                        /*style*/
                            border-radius: 125px;
                            background-color: black;
                    }
                /* /foto */
                /* nome */
                    main > #sobremim > #perfil > h1{
                        /*layout*/
                            grid-area: 1 / 2 / 2 / 3;
                        
                        /*tipe*/
                            font-size: clamp(2em, 4em, 100%);
                        
                        /*style*/
                            text-align: center;
                    }
                    main > #sobremim > #perfil > h1 > p{font-size: 0.6em;}
                /* /nome */
                /* apresentação */
                    main > #sobremim > #perfil > p{
                        /*layout*/
                            grid-area: 2 / 1 / 3 / 2;

                        /*box*/
                            padding: 10px;
                            width: 90%;    

                        /*tipe*/
                            font-size: 1em;

                        /*style*/
                            background-color: var(--background3);
                            border: 2px solid var(--color1);
                            border-radius: 30px;
                    }
                /* /apresentação */
                /* conhecimentos */
                    main > #sobremim > #perfil > #conhecimentos{
                        /*layout*/
                            grid-area: 2 / 2 / 3 / 3;

                        /*box*/
                            padding: 10px;
                            margin-right: 5px;

                        /*tipe*/
                            font-size: 0.8em;
                        
                        /*style*/
                            border: 1px solid var(--color2);
                            border-radius: 3px;
                            list-style: none;
                    }
                    main > #sobremim > #perfil > #conhecimentos > h2{background: none;}
                    main > #sobremim > #perfil > #conhecimentos > li{margin-top: 5px;}
                /* conhecimentos */
                /* logos */
                    main > #sobremim > #perfil > #logos{
                        /*layout*/
                            align-items: center;
                            display: flex;
                            flex-flow: row nowrap;
                            grid-area: 3 / 1 / 4 / -1;
                            justify-content: space-evenly;
                        
                        /*box*/
                            height: 100%;
                            width: 100%;
                        
                        /*style*/
                            background-color: var(--background2);
                    }
                    main > #sobremim > #perfil > #logos > a{
                        /*layout*/
                            display: flex;
                        
                        /*box*/
                            aspect-ratio: 1 / 1;

                        /*effect*/
                            transition: transform .5s;
                    }
                    main > #sobremim > #perfil > #logos > a:hover{transform: scale(1.5);}
                    main > #sobremim > #perfil > #logos > a:active{transform: scale(.8);}
                    main > #sobremim > #perfil > #logos > a > img{width: 100%;}
                /* /logos */
            /* /perfil */
            /* bio */
                main > #sobremim > #bio{
                    /*box*/
                        margin: 5px auto;
                        padding: 5px 0px;
                        width: 95%;
                     
                    /*style*/
                        background-color: var(--background3);
                        border: 2px solid var(--color1);
                }
                main > #sobremim > #bio > p{
                    margin: auto;
                    width: 94%;
                    
                }
            /* /bio */
        /* /sobreMim */
        /* finalizados */
            main > #finalizados{
                /*layout*/
                    display: grid;
                    grid-template: 70px repeat(5, auto) / auto;
                    align-items: center;

                /*box*/
                    width: 97%;
                    margin: 10px auto;
                
                /*style*/
                    background-color: var(--background3);
                    border: 2px solid var(--color1);
            }
            main > article > h1{
                font-size: 1.8em;
                padding: 10px;
            }
            /* projetos */
                main > #finalizados > .container1{
                    margin: auto;
                    width: 95%;
                }
                main > #finalizados > .container1 > h2, .container2 > h2, h2{
                    /*box*/
                        padding: 5px;

                    /*type*/
                        font-size: 1.4em;
                    
                    /*style*/
                        background-image: radial-gradient(var(--background1), var(--background2));
                        border-radius: 20px;
                        text-align: center;
                }
                /* versões */
                    main > #finalizados > .container1 > .container2{
                        display: flex;
                        flex-flow: column nowrap;
                    }
                    main > #finalizados > .container1 > .container2::after{
                        /*layout*/
                            align-self: center;
                            content: "";
                            display: block;

                        /*box*/
                            height: 5px;
                            margin: 30px 0 10px;
                            width: 100%;
                        
                        /*style*/
                            background-color: var(--color1);
                            border-radius: 10px;
                    }
                    main > #finalizados > .container1 > .container2 > h3{
                        /*box*/
                            margin: 20px 20px 10px 20px;
                            text-align: center;

                        /*style*/
                            background-image: linear-gradient(to right, var(--background3), var(--background1), var(--background3));
                            border-radius: 7px;

                    }
                    /* botão */
                        main > #finalizados > .container1 > .container2 > .linksites{
                            display: flex;
                            justify-content: end;
                        }
                        main > #finalizados > .container1 > .container2 > .linksites > a{
                            /*box*/
                                padding: 10px;

                            /*style*/
                                background-color: var(--background3);
                                border: 1px solid var(--color1);
                                border-radius: 20px;
                                color: initial;
                                text-decoration: none;
                                text-indent: 0;
                            
                            /*effect*/
                                transition: transform .5s;
                        }
                        main > #finalizados > .container1 > .container2 > .linksites > a:hover{
                            background-image: linear-gradient(var(--color1), var(--color2));
                            transform: scale(1.1);
                        }
                        main > #finalizados > .container1 > .container2 > .linksites > a:active{
                            background-image: linear-gradient(var(--color2), var(--color1));
                            transform: scale(.9);
                        }
                    /* /botão */
                    main > #finalizados > .container1 > .container2 > p{margin: 10px 0 20px;}
                    /* prints */
                        main > #finalizados > .container1 > .container2 > div{
                            display: grid;
                            grid-auto-flow: column;
                            grid-template: repeat(2, auto) / repeat(2, auto);
                            place-items: start center;
                        }
                        main > #finalizados > .container1 > .container2 > div > .imgport{width: 90%;}
                        main > #finalizados > .container1 > .container2 > div > .imgland{width: 95%;}
                    /* /prints */
                /* /versões */
            /* /projetos */
        /* /finalizados */
        /* /futuros */
            main > #futuros{
                width: 98%;
                margin: auto;
                background-color: var(--background3);
                border: 2px solid var(--color1);
            }
            main > #futuros > ul > li{margin-bottom: 20px;}
            main > #futuros >  ul > li > h2{
                margin: auto;
                width: 90%;
            }
            main > #futuros >  ul > li > p{
                width: 80%;
                margin: 10px auto 0;
            }
        /* /futuros */
    /* /main */
/* /mobileFirst */