@font-face {
    font-family: 'SF Pro';
    src: url('ressources/fonts/SF-Pro.ttf') format('truetype');
}

@font-face {
    font-family: 'AppleGaramond-Light';
    src: url('ressources/fonts/AppleGaramond-Light.ttf') format('truetype');
}

html {
    background-color: black;
    color: white;
    font-family: 'SF Pro', sans-serif, sans-serif;
}

header {
    background-color: black;
    color: white;
    font-family: 'SF Pro', sans-serif, sans-serif;

}

body {
    background-color: black;
    color: white;
    font-family: 'SF Pro', sans-serif, sans-serif;

}

.button-89 {
    --b: 3px;   /* border thickness */
    --s: .45em; /* size of the corner */
    --color: #f1f1f1;
    
    padding: calc(.5em + var(--s)) calc(.9em + 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;

    text-decoration: none;
  }
  
  .button-89:hover,
  .button-89:focus-visible{
    --_p: 0px;
    outline-color: var(--color);
    outline-offset: .05em;
    color: #f1f1f1;
  }
  
  .button-89:active {
    background: var(--color);
    color: #fff;
  }

  #NameTitle {
    max-width: 100%;
    margin-left: 10px;
  }

  .nav-item{
    font-family: 'San Francisco', sans-serif; 
    text-decoration: none; 
    margin-left: 20px; 
    color: white;
  }

  #TextBelowImage{
    margin-right: 45%;
  }

  #DivImageAbout{
    text-align: center;margin-left: 50px;
  }

  #AbouText{
    text-align: center; 
    font-family: 'San Francisco', sans-serif; 
    margin: 80px; 
    margin-top: 10px; 
    margin-bottom: 20 px;
  }

  h2{
    margin-left: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .row{
    margin-top: 30px;
    margin-left: 40px;
  }

/* Media Queries for different screen sizes */
@media (max-width: 900px) {
  #AbouText{
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 120px;
  }
  #TextBelowImage{
    margin-right: 80%;
  }
  #SopraVideo{
    width: 100%;
  }
  #HackathonVideo{
    width: 100%;
  }
}

@media (max-width: 725px) {
  #DivImageAbout{
    width: 80%;
  }
  #AbouText{
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
  }
}

@media (max-width: 620px) {
  #NameTitle {
    margin-left: 25%;
  }
  #NavElement{
    margin-left: 7%;
  }
  .nav-item{
    margin-left: 10px; 
  }
  #TextBelowImage{
    margin-right: 60%;
  }
  #DivImageAbout{
    margin-left: 10px;
  }
}