/* Define a abrangência do elemento html, considerando as bordas */

* {
    box-sizing: border-box;
}

body{
    max-width: 88em;
    min-width: 16.5em;
}

/* Inclui moldura e espaçamentos ao redor dos elementos */
nav,
#logo,
#iconLinks,
#textLinks,
#togleIcons,
#avatar {
    border: 1px solid black;
    padding: 0.95em;
    margin: 0.45em;
}

/* Faz com que os elementos sejam exibidos em linha */
nav {
    display: flex;
}

/* Inclui moldura e espaçamentos ao redor das colunas */
main,
#leftColumn,
#mainColumn,
#rightColumn {
    border: 1px solid black;
    padding: 0.95em;
    margin: 0.45em;
}



/* Faz com que as colunas sejam exibidos em linha */
main {
    display: flex;
}

/* Inclui moldura e espaçamentos no rodapé */
footer {
    border: none;
    background-color: rgb(67,87,97);
    color:white;
    padding: 0.6em;
    margin: 0.4em;
}

/* Faz o alinhamento da barra de menus mantendo o logo e itens do menu no lado esquerdo
   e o avatar ou togleIcons no lado direito */
nav {
    justify-content: center;
    align-items: center;
}

/* Define a largura das colunas:
   direita:  25%
   Central:  50%
   esquerda: 50% */
#leftColumn {
    flex-basis: 25%;
}

#rightColumn {
    flex-basis: 25%;
}

#mainColumn {
    flex-basis: 50%;
}

/* Medias queries - controlam a exibição em função da largura da tela do dispositivo */
/* tela com até 30em (480px) */
@media screen and (max-width:30em) {
    #togleIcons {
        display: flex;
    }

    #iconLinks,
    #textLinks,
    #avatar {
        display: none;
    }

    /* Ajuste das larguras das colunas */
    main {
        flex-direction: column;
    }

    #leftColumn,
    #rightColumn {
        width: 98%;
        padding: 0.3em;
        margin: 0.3em auto;
    }

    #mainColumn {
        width: 98%;
        padding: 0.3em;
        margin: 0.5em;;
    }
}

/* tela entre 30em e 48em (768px) */
@media screen and (min-width:30em) and (max-width: 48em) {

    #togleIcons,
    #textLinks {
        display: none;
    }

    #iconLinks,
    #avatar {
        display: flex;
    }

    /* Ajuste das larguras das colunas */
    main {
        flex-direction: column;
    }

    #leftColumn,
    #rightColumn {
        width: 98%;
        padding: 0.3em;
        margin: 0.3em auto;
    }

    #mainColumn {
        width: 98%;
        padding: 0.3em;
        margin: 0.5em auto;
    }
}

/* tela acima de 48em (768px) */
@media screen and (min-width:48em) {

    #togleIcons,
    #iconLinks {
        display: none;
    }

    #textLinks,
    #avatar {
        display: flex;
    }

    /* Ajuste das larguras das colunas */
    #main {
        flex-direction: row;
    }

    #rightColumn,
    #leftColumn {
        flex-basis: 25%;
    }

    #mainColumn {
        flex-basis: 50%;
        flex-direction: column;
    }
}

/* ==================================================================================== */
/*                             Alterações implementadas na parte 3 */
/* ==================================================================================== */
/*                                           DropDownMenu                               */
/* ==================================================================================== */

body {
    font-family: 'Roboto';
}

/* #togleIcons, #avatar {
    margin: 0 0 0 auto;
} */
#boxRight {
    margin: 0 0 0 auto;
}

.btnFont {
    font-family: 'Roboto';
    font-size: 18px;
    font-weight: bold;
    padding: 1em 1em 1em 0.5em;
}

i.fas {
    padding: 1em 0.5em 1em 1em;
}

#boxLeft {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto';
    font-size: 1em;
    color: white;
    background-color: #3a4b53;
}

#boxLeft a:link,
#boxLeft a:visited {
    background-color: #3a4b53;
    color: white;
    text-decoration: none;
    display: inline-block;
}

#boxLeft a:hover,
#boxLeft a:active {
    background-color: rgb(204, 216, 33);
    color: black;
}

#togleIcons,
#avatar {
    border: none;
    padding: 0 1em 0 1em;
    margin: 0;
}


#boxRight {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto';
    font-size: 1em;
    color: white;
    background-color: #3a4b53;
}

.iHamb {
    width: 24px;
    height: 48px;
    margin: 0;
    cursor: pointer;
}

.show {
    display: flex;
}

.hidden {
    display: none;
}

#Xburguer {
    display: none;
}

#burguer {
    display: flex;
}

#boxRight:hover {
    background-color: rgb(204, 216, 33);
}

#togleIcons {
    cursor: pointer;
}

.meDdown {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    margin: 1em 0.5em 1em 1em;
}

#dropDownMenu {
    flex-direction: column;
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}

#dropDown1,
#dropDown2,
#dropDown3,
#dropDown4,
#dropDown5 {
    justify-content: center;
    align-items: flex-start;
}

.dDm {
    display: flex;
    align-items: center;
    background-color: #4d636f;
    border: 1px black solid;
    color: white;
    letter-spacing: 3px;
    text-shadow: 2px 2px black;
    padding: 0 0 0 0.8em;
    margin: 0;
    height: 2.5em;
}

.dDm:hover {
    background-color: rgb(204, 216, 33);
    color: black;
    text-shadow: none;
    outline: none;
    text-decoration: none;
}

@media screen and (max-width:30em) {
    #ddMedia {
        display: inline-block;
    }
}

@media screen and (min-width:30em) {
    #ddMedia {
        display: none;
    }
}

/* ==================================================================================== */
/*                             Alterações implementadas na parte 3 */
/* ==================================================================================== */
/*                                textLinks e iconLinks - boxMiddle                     */
/* ==================================================================================== */

#boxMiddle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.0em;
    background-color: #4d636f;
}

#iconLinks,
#textLinks {
    display: flex;
    border: none;
}

.mLinks {
    font-size: 1.3em;
    color: white;
    margin-left: 1.25em;
    margin-right: 1.25em;
}

.hDm {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4d636f;
    border: none;
    color: white;
    letter-spacing: 3px;
    text-shadow: 2px 2px black;
    padding: 0;
    margin: 0;
    height: 2.5em;
    width: 3em;
}

.hDm:hover {
    background-color: rgb(204, 216, 33);
    color: black;
    text-shadow: none;
    outline: none;
    text-decoration: none;
}

#boxMiddle {
    width: calc(100% - 200px);
}

nav {
    background-color: #4d636f;
    height: 3.185em;
    padding: 0;
}


.me {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    margin: 0.2em;
}

/* Medias queries - controlam a exibição em função da largura da tela do dispositivo */
/* tela com até 30em (480px) */
@media screen and (max-width:30em) {
    #togleIcons {
        display: flex;
    }

    #iconLinks,
    #textLinks,
    #avatar {
        display: none;
    }
}


/* tela entre 30em e 48em (768px) */
@media screen and (min-width:30em) and (max-width: 48em) {

    #togleIcons,
    #textLinks {
        display: none;
    }

    #iconLinks,
    #avatar {
        display: flex;
    }

    #iconLinks i.fas {
        padding: 0.125em 0.5em 0.125em 0.5em;
        font-size: 1.5em;
    }

}

/* tela acima de 48em (768px) */
@media screen and (min-width:48em) {

    #togleIcons,
    #iconLinks {
        display: none;
    }

    #textLinks,
    #avatar {
        display: flex;
    }
}

nav {
    padding: 0;
}

/* Alterações introduzidas no tutorial parte 4 */
#leftColumn {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    padding-top: 0;
}

main {
    padding-top: 0;
}

#activities,
#notifications {
    /*border: 1px solid black;*/
    padding: 0.5em;
    margin: 0.5em;
}

#profile {
    border: 1px solid lightblue;
    border-radius: 4px;
    box-shadow: 2px 2px 1px lightgray;
    padding: 0;
    margin: 0;
    width: 100%;
}

body {
    max-width: 87.5em;
    min-width: 17.5em;
    margin: auto;
}

#profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.round6 {
    width: 6.5em;
    height: 6.5em;
    border: 1px solid black;
    border-radius: 50%;
    margin-bottom: 2em;
}

.profData {
    /*border:1px solid black;*/
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    justify-content: flex-start;
    list-style-type: none;
    transform: translate(-1.5em, -0.5em);
}

main {
    border: none;
}

#leftColumn, #rightColumn {
    border: none;
    margin: 0.5em 0 0 0;
    padding: 0;
}

/* tela entre 769px e 865px */

@media screen and (min-width:48em) and (max-width: 50em) {
    #profile {
        font-size: 0.6em;
    }
}

/* tela entre 768px e 900px */

@media screen and (min-width:50.1em) and (max-width: 60em) {
    #profile {
        font-size: 0.8em;
    }
}

main {
    margin: 0.1em 0 0.5em 0.5em;
    padding: 0.5em 0 0 0;
}

/* Bloco Activities */
.btnAct {
    background-color: rgb(125, 151, 165);
    /* cor de fundo do botão na condição inicial */
    cursor: pointer;
    color: white;
    /* cor da fonte na condição inicial */
}

.btnAct:hover {
    background-color: rgb(204, 204, 204);
    /* cor de fundo quando mouse passa sobre */
    color: black;
    /* cor da fonte com o mouse em cima */
}

.btnActive {
    background-color: rgb(87, 112, 125);
    /*rgb(125, 151, 165); cor de fundo do botão na condição inicial */
    cursor: pointer;
    color: white;
}

.btnActive:hover {
    background-color: rgb(204, 204, 204);
    /* rgb(87, 112, 125);  cor de fundo quando mouse passa sobre */
    color: black;
    /* cor da fonte com o mouse em cima */
}

#gText {
    display: none;
    border: 1px solid black;
    background-color: white;
    color: black;
    padding: 0.25em 0.25em 0.25em 1.0em;
}

#eText {
    display: none;
    border: 1px solid black;
    background-color: white;
    color: black;
    padding: 0.25em 0.25em 0.25em 1.0em;
}

#pText {
    display: none;
    /*border:1px solid black;*/
    background-color: white;
    color: black;
    padding: 0.25em;
}

.fotosA1 {
    display: flex;
    border: 1px solid rgb(167, 156, 156);
    padding: 2px;
    background-color: white;
    margin: 1.5%;
    flex-basis: 100%;
    flex-wrap: wrap;
}

.fotosA2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid gray;
    padding: 0.25em;
    width: 50%;
}

.nota {
    font-size: 0.8em;
    text-align: center;
}

#interests {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid lightblue;
    box-shadow: 2px 2px 1px lightgray;
    border-radius: 4px;
    padding: 0;
    margin: 0;
    width: 100%;
}

.iBox {
    display: flex;
}

#i01,
#i02,
#i03,
#i04,
#i05,
#i06,
#i07,
#i08,
#i09 {
    padding: 0.5em;
    margin: 0.25em;
    border: 1px solid black;
}

#i01 {
    background-color: rgb(48, 62, 69);
    color: white;
}

#i02 {
    background-color: rgb(58, 75, 83);
    color: white;
}

#i03 {
    background-color: rgb(67, 87, 97);
    color: white;
}

#i04 {
    background-color: rgb(77, 99, 111);
    color: white;
}

#i05 {
    background-color: rgb(87, 112, 125);
    color: white;
}

#i06 {
    background-color: rgb(96, 125, 139);
    color: black;
}

#i07 {
    background-color: rgb(125, 151, 165);
    color: black;
}

#i08 {
    background-color: rgb(158, 177, 187);
    color: black;
}

#i09 {
    background-color: rgb(223, 229, 232);
    color: black;
}

#iTitle {
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.5em;
}

#notifications {
    display: flex;
    flex-direction: column;
    border: 1px solid lightblue;
    box-shadow: 2px 2px 1px lightgray;
    border-radius: 4px;
    padding: 0;
    margin: 0.5em 0 0 0;
    padding-left: 1.0em;
    background-color: rgb(223, 229, 232);
    width: 100%;
}

.btnRight {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}

.icon {
    width: 3em;
    border: 1px solid lightblue;
    border-radius: 4px;
    box-shadow: 2px 2px 1px lightgray;
    background-color: rgb(190, 203, 210);
}

.icon:hover {
    background: rgb(204, 204, 204);
    cursor: pointer;
}

.btnTxt {
    font-weight: bolder;
}

/* tela até 368px */
@media screen and (max-width: 23em) {
    .fotosA2{width:100%;}
}

/* tela entre 368px e 480px */
@media screen and (min-width:23em) and (max-width:30em){
    .fotosA2{width:50%;}
}

/* tela entre 480px e 768px */
@media screen and (min-width:30.1em) and (max-width: 48em) {
    .fotosA2{
        width:33%;
    }
}
/* tela acima de 768px */
@media screen and (min-width:48em) {
    .fotosA2{
        width:100%;
    }
}

/* mainColumn */

#mainColumn {
    border: none;
    padding: 0;
    margin: 0 0 0 0.5em;
}

#newPost, #bug, #ads{
    display:flex;
    flex-direction: column;
    border: 1px solid lightblue;
    box-shadow: 2px 2px 1px lightgray;
    border-radius: 4px;
    padding: 0;
    margin: 0.5em 0 0 0;
    padding-left: 1.0em;
    background-color: rgb(223, 229, 232);
    width: 100%;
}

#bug, #ads{
    display:flex; 
    justify-content: center;
    align-items: center;
    margin:0 0.5em 0.5em 0.5em;
    flex-basis: 95%;
}

.btnPost{
    border:1px solid black;
    padding:0.5em;
    margin-right:0.5em;
}

.btnPTxt, .btnNfrGreen, .btnNfrRed{
    background-color: rgb(96,125,139);
    align-self:flex-start;
    cursor: pointer;
    color: white;
    padding-right:0.8em;
    margin-left:0;
    margin-right: 0.25em;
    margin-bottom:1.0em;
}

.btnNfrGreen, .btnNfrRed{
    flex-basis:50%;
}
.btnNfrGreen{
    background-color: green;
}
.btnNfrRed{
    background-color: red;
}

.btnPTxt:hover, .btnNfrGreen:hover, .btnNfrRed:hover {
    background-color: rgb(204, 204, 204);
    color: black;
}

.comment, .rBox{
    display:flex;
    flex-direction: column;
    border: 1px solid lightblue;
    box-shadow: 2px 2px 1px lightgray;
    border-radius: 4px;
    padding:1em;
    margin: 0.5em 0 0 0;
}

.imgHH{
    display:flex;
    justify-content: flex-start;
    flex-direction: column;
    margin:0.5em 0.25em 1em 0.25em;
    padding:0;
    width: 50%;
}

.imgTT{
    display:flex;
    justify-content: flex-start;
    flex-direction: column;
    margin:0.5em 0.25em 1em 0.25em;
    padding:0;
    width: 100%;
}

.sameLine{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

.me2 {
    widows: 4em;
    height:4em;
    border:1px solid black;
    border-radius:50%;
}

#topo{
    position:fixed;
    top:0;
    width:100%;
    max-width:88em;
    border:1px, solid, black;
    background-color: white;
    z-index:1;
    margin:auto;
}

.rBox{
    margin: 0 0.5em 0.5em 0.5em;
}

#rightColumn, #leftColumn, #mainColumn{padding-top:3.5em;}