

body{
    background-color: rgb(0, 38, 255);
    background-image: linear-gradient(to top, #79b6ff, white 50%);
    margin: 0 auto; 
    background-attachment: fixed;   
    min-height:100%;
    font-family: Andale Mono, monospace;
    

}
h1{
 color:black;
}
h2{
 color:black;
}
p{
 color:black;
}
img{
    text-align: center;
}

/*( Topnav )or top navigation bar*/
.Topnav{
    
    overflow: hidden;
    margin: auto;
    height: 50px;
    width: 100%;
  
    background: linear-gradient(to bottom, #9ac8ff, #0074e4, #0268e4);
    border-bottom: 6px solid #2175db;
    border-top: 6px solid #2175db;
    font-family: "Open Sans", sans-serif;
    
    /*  Colors :
    Texto : branco, #26c5ff, cinca (desativado)
    subtexto : #4e86cb.
    */
}
.Topnav a { 
    float: left;
    color: White;
    text-align: center;
    padding: 14px 10px;
    font-weight: bold;
    text-decoration: none;
    font-size: 23px;
    text-shadow: 2px 2px 3px rgb(3, 3, 136);


}
.Topnav a:hover {
  text-decoration: underline;

}
.Topnav a.active {
  color :#dedede;
}
.Topnav img{
    image-rendering: pixelated;
    float: left;
    padding: 0px 12px;
    height :  50px;

}
.Topnav h2{
    font-family: 'Press Start 2P', cursive;
   float: left;
    color: White;
    padding: 0px 10px;
    text-align: center;

    text-decoration: underline;
    text-decoration-color: chartreuse;
    font-size: 20px;
}


/* (flexbox area) I was thinking in use grid instand, but sems more dificult to do 3 columns*/
#flex {
    display: flex;
    
}

aside{
    width: 200px;
    
    
}
.left {
    order: 1;
    border-right: 4px solid #c8c8c8;
    z-index: 1;
}

main {
   
    flex: 1;
    display: flex;
    
    order: 2;
    border-right: 4px solid #c8c8c8;
   
    flex-flow: row wrap;
    
    position: relative;
    
}

.right {
    order: 3;
    
    border-right: 4px solid #c8c8c8;
    z-index: 1;
    
}
/*Sub-Parts of flexboxs*/
.mainarea{
    flex: 2;
   
    padding: 4px;
    text-align: left;
    
    z-index: 1;
    
}

.profilearea{

    width:299px;
    height: 100%;
   
    padding: 4px;
    
    text-align: center;
    
    
}
.mainarea h1{
    position: relative;
    bottom: 20px;
    font-size: 78px ;
    font-family: "Open Sans", sans-serif;
    text-decoration: underline;
    color:#4b9bc2;


}

/* (Profile row + mainarea), this part is the second column, just for the profile picture and the friends box. Me sinto decepionada por parte do codigo ter tido ajuda do chatgpt :(*/
    
.perfil {
  position: relative;
  display: inline-block;
  width: 300px;   
  height: 300px;  
  overflow: hidden;
}

.foto {
  position: absolute;
   top: 50px;
  left: 50px;
    width: 200px;
  height: 201px;
  z-index: 1;    
  background-color: white;
  
}

.borda {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;   
  pointer-events: none;
}

.box_friends{

    height: 100px;
    padding: 0px;

    background-color: #6bebff;
    border-radius: 15px;

}

.box_friends h2{
    padding: 5px;
    text-align: left;
    font-family: "Open Sans", sans-serif;
    color:#4e86cb;

}


.backgroundbox{
  position: absolute;
  left: 0;
  width: 100%;
  height: 150px;        
  background: #acf4ff; 
  z-index: 0;           
}

.mainbox{
    padding:17px;
    height: 500px;
    background-image: linear-gradient(to top, #b1c0eb, white) ;
    border-radius: 30px;
    width: 600px;
    
}

.mainboxnavbar{
    
    
    overflow: hidden;
    margin: auto;
    width: 100%;
    
   
    
    
    
}

.mainboxnavbar button{
    background-color:transparent;
    border-color:transparent;
    float: left;
    text-align:center; 
    padding: 0px 10px;
    font-weight: bold;
    
    color: #a2a2a2; 
    font-family: "Open Sans", sans-serif;
    text-decoration: underline 2px;
    font-size: 25px;
    
    
}
.mainboxnavbar button:hover{
    color: #717171; 
}


.warpping{
    height: 90%;
    max-width: auto;
    
    
}

/*Blog post*/

.blog-area{
    height: 100%;
    max-width: auto;
    overflow:auto;
    background-color: white;
    border-radius: 30px;
    border:solid;
    border-color:#62b6cb;
}
.blog-post{
    height: auto;
    padding:9px 12px;
    border-bottom: dashed;
    border-color: rgba(0, 255, 255, 0.3);

}
.blog-post p{
    font-family: "Roboto Mono", monospace;
    color:black;
    padding-left:20px;
    
}
.blog-post h2{
    font-family: "Roboto Mono", monospace;
    color:black;
    
}
/*left column */
.left button{
    width: 100px;
    height: 20px;
    text-align: center;
    position: relative;
    left:50px;
    background-image: linear-gradient(to top, #79b6ff, blue, white );;
    border-radius: 20px;
    color : white;
    
    
}
.left button:hover{
    background-image: linear-gradient(to top, #79b6ff, darkblue, white );;

}


/*About me Page, i was thinking using another css document, because this guy here is too big*/

.MainAboutMe{
    display:flex;
    flex:1;
    padding:14px    ;
    justify-content: center; 
    align-items: center;        
    min-width: 0; 

}
.left-side{
    border:solid;
    flex:2;
    


}
.right-side{
    flex:2;


}