@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');

@font-face {
    font-family: 'DIN Next LT Pro';
    src: local('DIN Next LT Pro Bold'), local('DINNextLTPro-Bold'),
        url('fonts/DINNext/DINNextLTPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


.me {
    border-color: whitesmoke;
    border-style:groove;
    border-radius: 75px;
    border-image:round;
    width: 500px;
    height: 750px;
    object-fit: cover;
    transform: scale(75%);
    position: relative;
    top:-105px;
    margin-left: auto;
    float:left;

}

.hello {
    font-family: 'Montserrat', sans-serif;
    font-style: bold;
    color:whitesmoke;
    font-size: 48px;
    display: block;
    
    margin-right: auto;
}

.description {
    font-family: 'Nunito', sans-serif;
    color:whitesmoke;
    font-size: 24px;
    display: block;
    margin-right: auto;
    margin-right: 10px;
}

.language {
    font-family: 'Montserrat', sans-serif;
    color:whitesmoke;
    font-size: 48px;
    transform: translateX(-15%);
    text-align: center;
}


  .row {
    display: flex;
    transform: translateX(-23%);
  }
  
  .column {
    flex: 20%;
    padding: 5px;
    transition: opacity .2s, visibility .2s;
  }

  .column2 {
    flex: 20%;
    padding: 5px;
    transition: opacity .2s, visibility .2s;
  }

  .img__description {
    font-family: 'Montserrat', sans-serif;
    color:whitesmoke;
    font-size: 24px;

   
    background: rgba(64, 77, 85, 0.72);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-200%);
    text-align: center;
  
    /* transition effect. not necessary */
    transition: opacity .2s, visibility .2s;
  }

  .column:hover .img__description {
    visibility: visible;
  opacity: 1;
  }

  .column2:hover .img__description {
    visibility: visible;
  opacity: 1;
  }