styles.css

*{
    margin: 0;
    padding: 0;
    box-sizing:0border-box;
  }
  
  a{
    text-decoration:none;
  }
  
  html {
    /*variaveis*/
    --bg-color:#EDF2FF;
    --text-color:#00082F;
    --primary-color:#4263EB;
    --primary-color-dark:#364FC7;
  }
  
  body.dark-blue {
    --bg-color:#00082F;
    --text-color: #FFFFFF;
  }
  
  body.pink{
    --bg-color:#FFF0F6;
    --text-color:#1F000B;
    --primary-color:#D6336C;
    --primary-color-dark:#A61E4D;
  }
  body.dark-pink{
    --bg-color:#000000;
    --text-color:#FFFFFF;
    --primary-color:#D6336C;
    --primary-color-dark:#A61E4D;
  }
  
  body{
  background:var(--bg-color);
  color: var(--text-color);
  font-family: 'Roboto', sans-serif;
  }
  
  .container{
    /*border:7px red solid;*/
    text-align:center;
    width: 300px;
    margin: 60px auto;
  }
  
  img{
    width: 100%;
  }
  
  img.avatar{
    border-radius:50%;
    width:100px;
    height: 100px;
    padding: 4px;
    border: var(--primary-color)solid 4px;
  }
  
  h1{
    font-size: 32px;
    margin-top: 24px;
    margin-bottom: 8px;
  }
  
  .username{
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    opacity: 0.8;
    font-size: 18px;
  }
  
  ul{
    list-style: none;
    margin:48px 0;
  }
  
  ul li a{
    height:53px;
    /*border:1px solid red;*/
    /*display: block;*/
    display: flex;
    align-items:center;
    justify-content: center;
    background: var(--primary-color);/*hex:0-F*/
    color:white;
    text-transform: uppercase;
    font-size:14px;
  
    margin-bottom: 16px;
    border-radius: 6px;
  
    transition: background 400ms;
  }
  
  /*pseudo-class*/
  ul li a:hover {
    background: var(--primary-color-dark);
  }
  
  footer {
    font-weight: 500;
    font-size: 12px;
    opacity: 0.6;
    transition:opacity 400ms;
  }
  
  footer:hover {
    opacity: 1;
  }
  
  footer a{
    COLOR: VAR(--text-color);
    /*color:#00082F;*/
  }