html {
    box-sizing: border-box;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  .column {
    float: left;
    width: 25%;
    margin-bottom: 16px;
    padding: 5px 8px;
  }
  
  .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 16px;
    padding-top: 10px;
    margin:8px;
  }
  
  .about-section {
      margin-top: 30px;
    margin-bottom: 20px;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    background: linear-gradient(to top,  #212529 0%,  #212529 100%);
    color: rgba(255, 255, 255, 0.679);
    font-family: 'Oxygen', sans-serif;
   
  }
  
  .container {
    padding: 0 16px;
  }
  
  .container::after, .row::after {
    content: "";
    clear: both;
    display: table;
  }
  
  .title {
    color: grey;
    text-align: center;
  }
  .img{
  width: 120px;
  height: 120px;
  margin-top: 2px;
  border-radius: 100%;
  }
  
  h2 {
    font-family: 'Nunito', sans-serif;
  }
  
  p {
    font-family: 'Cormorant', serif;
  }
  
  
  /* CSS */
  .button-89 {
    --b: 3px;   /* border thickness */
    --s: .45em; /* size of the corner */
    --color: #373B44;
    
    padding: calc(.3em + var(--s)) calc(.7em + var(--s));
    color: var(--color);
    --_p: var(--s);
    background:
      conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
      var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
    transition: .3s linear, color 0s, background-color 0s;
    outline: var(--b) solid #0000;
    outline-offset: .6em;
    font-size: 16px;
  
    border: 0;
  
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin-bottom: 20px;
  }
  
  .button-89:hover,
  .button-89:focus-visible{
    --_p: 0px;
    outline-color: var(--color);
    outline-offset: .05em;
  }
  
  .button-89:active {
    background: var(--color);
    color: #fff;
  }