body {
      background-color: #00b672;
      text-align: center;
      font-family: Montserrat;
}




/**/
    #photo { 
        width: 15rem;
        height: 15rem;
        border-radius: 50%;
        border-style : solid;
        border-width: 0.2rem;
        border-color:  black;
        margin-top: 2rem;
    }

    @media (max-width: 400px) {
      .me {

        display: inline-block;
        font-size: 12px;
        width: 15rem;
      }
    }


    @media (min-width: 400px) and (max-width: 800px) {
      .me {

        display: inline-block;
        font-size: 20px;
        width: 18rem;
      }
    }

    @media (min-width: 800px) {
      .me {

        display: inline-block;
        font-size: 23px;
        width: 30rem;
      }
      #photo { 
        width: 12rem;
        height: 12rem;
      }
    }
 

    .socials {
      margin-top: 2rem;
      color:#ffdd4a;
    }
    
    .socials i {
      margin: 5px;
    }


    
    button {
      background-color: #ffdd4a;
      color: black;
      width: 7rem;
      height: 2.5rem;
      border: none;
      border: 0.1rem solid black;
      border-radius: 0.1rem;
      box-shadow: 0.5rem 0.5rem black;
      font-size: 0.8rem;
         border-radius: 10px;
    }
    
    a {
      text-decoration: none;
      color: #ffdd4a;
    }
    span {
      font-family: 'Mogra', cursive;
      color: #ffdd4a;
      font-size: 4rem;
    }