@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&family=Roboto:wght@500&display=swap');*,:after,:before {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-family: 'Roboto', sans-serif;
  }
  
  .canva_container {
    position: absolute;
    z-index: 5;
  }
  
  
  body {
    align-items: center;
    background-color: #000;
    color: #fff;
    display: flex;
    height: 100vh;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  
  body,button {
    font-family: Lilita One,cursive
  }
  
  button {
    cursor: pointer
  }
  
 
  .App,.App .App-content {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    
  }
  
  .App .App-content {
    flex-direction: column;
    height: 100%;
    max-width: 1200px;
    width: 90%
  }

  .box_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    border: solid 3px #e9c761;
    border-radius: 20px;
    padding: 2.5rem 2rem 1rem 2rem;
    position: relative;
    z-index: 10;
  }
  
  .logo img {
    width: 200px;
  }
  
  .box_container h1 {
    font-size: 2.5rem;
    margin-bottom: 0.6rem;
  }
  
  .box_container h3 {
    font-size: 1.4rem;
    color: #e9c761;
    margin-bottom: 0.6rem;
  }
  
  .box_container h2 {
    font-size: 4vmin;
    margin-bottom: 3vmin;
    white-space: nowrap
  }
  
  .box_container>p {
    font-size: 1.4rem;
    margin-bottom: 3vmin
  }
  
  .button_text {
    font-size: 2rem;
  }
  
  .App .App-content button {
    align-items: center;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    font-size: 2vmin;
    justify-content: center;
    margin-bottom: 3vmin;
    padding: 10px;
    transition: .1s ease-in-out
  }
  
  .App .App-content button:hover {
    background-color: #eac862;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    transition: .1s ease-in-out
  }
  
  .App .App-content button:active {
    -webkit-transform: translateY(3px) scale(1.05);
    transform: translateY(3px) scale(1.05);
    transition: .1s ease-in-out
  }
  
  .App .App-content a {
    align-items: center;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    font-size: 2vmin;
    justify-content: center;
    margin-bottom: 3vmin;
    padding: 10px;
    transition: .1s ease-in-out
  }
  
  .App .App-content a:hover {
    background-color: #e9c761;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    transition: .1s ease-in-out
  }
  
  .App .App-content a:active {
    -webkit-transform: translateY(3px) scale(1.05);
    transform: translateY(3px) scale(1.05);
    transition: .1s ease-in-out
  }
  
  .button_container {
    display: flex;
    gap: 1rem;
  }
  
  .friend img {
    width: 50px;
  }