/* CreativeCommons.CSS */
    *{
        margin:0px;
        padding:0px;
        box-sizing:border-box;
    }

    body{
        font-family: 'Roboto', sans-serif;
        background-color:lightblue;
        margin:auto;
        max-width:60em;
        min-width:280px;
        width:98%;
    }

/* Insere padding entre o ícone Awesome e o texto */
    i.fas{
        padding: 8px 16px 8px 4px;
        }

/* #logo */
    #logo{
        border:1px solid black;
        background-color: rgb(25, 75, 25);
        font-family: 'Raleway', sans-serif;
        font-weight: 400;
        font-size:1.0em;
        text-shadow: 2px 2px 0 #444;
    }

    #logo:hover{
        background-color:black;
        transition: background 0.4s;
    }
    .me2{
        width: 36px;
        height:36px;
        margin-left:15px;
        margin-right:15px;
    }
    
    #avatar:hover{background-color:black;}

    
/* footer */
footer{
    display:flex;
    flex-direction: row;
    align-items: center;
    color:white;
    font-size:0.8em;
    display:flex;
    box-shadow: 2px 4px 4px springgreen;
    padding:0 4px 0 16px;
    background-color:green;
    border-radius:5px;
    margin:8px 0 0 0;
    font-weight: 400;
    width:100%;
}       

/* Elementos */
    .responsive{
        width:99%;
        height: auto;
    }
/* creative commons */
    .creativeTop{
        display:flex;
        align-items: center;
        justify-content: space-between;
        border-radius:5px;
        box-shadow: 2px 4px 4px springgreen;
        color:white;
        padding:10px;
        font-family: 'Raleway', sans-serif;
        font-weight: 400;
        font-size:0.5em;
        text-shadow: 2px 2px 0 #444;
        background-image:linear-gradient(to right,green,green,blue,blue);
        margin:0 0 4px 0;
        height: 48px;
    }
    .creativeContent{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        border-radius:5px;
        box-shadow: 2px 4px 4px springgreen;
        color:black;
        padding:10px;
        background-color:wheat;
    }


/*  Textos   */
    h1{
        font-size: 2em;
        line-height: 2;    
    }
    h2 {
        font-size:1.8em;
        line-height: 1.8;
    }
    h3{
        font-size:1.6em;
        line-height:1.6;
    }
    h4{
        font-size:1.4em;
        line-height:1.6;
    }
    p.medium25{
        font-size:1.1em;
        letter-spacing: 0.03em;
        line-height: 1.4;
        padding-left:1.3em;
        padding-right:1.5em;
        hyphens:auto;
        text-align:justify;
        margin-top:1.0em;
        margin-bottom:1.0em; 
    }

    .link{
        font-size:1.2em;
        color:blue;
        font-style:italic;
        font-weight: normal;
        list-style-position: inside;
        outline:none;
        text-indent: 25px;
        line-height: 1.5;
    }

    .linkIndex{
        font-size:1.1em;
        color:blue;
        outline:none;
        text-indent: 16px;
        line-height: 1.5;
        list-style: none;
    }

    a:link{text-decoration: none;}
   

    .estrangeirismo{
        font-style:italic;
        font-weight: normal;
        color:black;
        text-shadow:1px 1px yellow;
    }

    p.hifenado{
        hyphens:auto;
        text-align:justify;
        margin-top:16px;
        margin-bottom:16px
    }

    /* tela até 30em ~480 px */
    @media screen and (max-width:30em){ 
        footer{justify-content: space-between;}
        #avatar{display:none;}
        *{font-size:0.95em;}
        #cft01a {display:none;}
        #cft01b {display:inline-block;}
        
    }

    /* tela entre 30em (480px) e 48em(768px)*/ 
    @media screen and (min-width: 30.0em) and (max-width: 48em){
        footer{justify-content: space-between;}
        *{font-size:0.99em;}
        #avatar {display:flex;}
        div#cft01a {display:inline-block;}
        div#cft01b {display:none;}
        
    }

    /* tela acima de 48em (768px) */
    @media screen and (min-width: 48em){  
        footer{justify-content: space-between;}    
        *{font-size:1.0em;}
        #avatar{display:flex;}
        div#cft01a {display:inline-block;}
        div#cft01b {display:none;}
        
    }

    /* tela entre 48em (480px) e 55em(768px)*/ 
    @media screen and (min-width: 47.5em) and (max-width: 55em){
        footer{justify-content: space-between;}
    }