@charset "UTF-8";
@font-face{
    font-family: 'text';
    src: url(../font/Ephesis-Regular.ttf);
}
@font-face{
    font-family: 'title';
    src: url(../font/Kavoon-Regular.ttf);
}
/*variáveis*/
    :root{
        /*cor*/
            --corum: rgba(100, 167, 141, 0.705);
            --cordo: rgba(87, 211, 233, 0.705);
        /*/cor*/
        /*fonte*/
            --fontetext: 'text', cursive;
            --fontetitle: 'title', cursive;
        /*/fonte*/
    }
/*/variáveis*/
/* mobilefirst */
    /* body */
        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        p{
            /*tipe*/
                font-family: var(--fontetext);
                font-size: 2em;
            
            /*style*/
                text-shadow: var(--cordo) 0.5px 0.5px 1px;
        }
        h1{
            /*tipe*/
                font-family: var(--fontetitle);
            
            /*style*/
                color: white;
        }
        a{
            color: white;
            text-decoration: none;
        }
        body{
            /*layout*/
                display: grid;
                grid-template: auto 1fr auto / 1fr;
            
            /*box*/
                min-width: 370px;
                width: 100%;


            /*style*/
                background-color: var(--corum);
        }
    /* /body */
    /* header */
        header{        
            /*layout*/
                display: flex;
                flex-flow: row wrap;
                justify-content: center;
            
            /*style*/
                background-color: rgb(50, 50, 50);
        }
        header > h1{
            /*tipe*/
                font-size: 3em;

            /*style*/
                text-align: center;
                text-shadow: var(--cordo) 2px 2px 2px;
        }
        header > p{
            /*box*/
                margin-top: 30px;
                padding-bottom: 20px;
            
            /*tipe*/
                font-size: 1.8em;
        }
        header > p > a:hover{color: var(--cordo);}
    /* /header */
    /* main */
        main{
            /*box*/
                margin: auto;
                max-width: 900px;
                width: 100%;
            
            /*style*/
                background-color: rgb(210, 210, 210);
        }
        main > .parasolo, .paraduplo{padding: 40px;}
        main > #img1, #img2{
            /*layout*/
                display: flex;
                justify-content: flex-end;
                padding: 50px 10px 50px 0px;

            /*style*/
                background-size: cover;
        }
        main > #img1{background: url(../image/joaninha.jpg) center center fixed no-repeat;}
        main > #img1 > p{background-color: rgba(255, 255, 255, 0.200);}
        main > #img2{background: url(../image/folhas.jpg) center center fixed no-repeat;}
        main > #img2 > p{background-color: rgba(0, 0, 0, 0.507);}
        main > .imgs > p{
            /*box*/
                padding: 5px;
                
            /*style*/
                color: white;
        }
    /* /main */
    /* footer */
        footer{
            background-color: rgb(50, 50, 50);
            text-align: center;
        }
        footer > address > p{
            /*box*/
                padding: 10px 0;
            /*tipe*/
                font-size: 0.5em;
                font-family: Arial, Helvetica, sans-serif;

            /*style*/
                color: white;
        }
        footer > address > p > a:hover{color: var(--cordo);}
    /* /footer */
/* /mobilefirst */
/* others */
    @media screen and (min-width: 900px) {
        /* header */
            header > p::before{content: " - ";}
        /* \header */
        /* main */
            main{
                border: 2px solid white;
                border-radius: 3%;
            }
            main > #img1, #img2{justify-content: center;}
        /* \main */
        /* footer */
            footer > address > p{font-size: 0.9em;}
        /* /footer */
    }
/* /others */