/*
    html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
   body{line-height:1}
   article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
   nav ul{list-style:none}
   blockquote,q{quotes:none}
   blockquote:before,blockquote:after,q:before,q:after{content:none}
   a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
   mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
   del{text-decoration:line-through}
   abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
   table{border-collapse:collapse;border-spacing:0}
   hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
   input,select{vertical-align:middle}
   li{list-style:none}
  */ 
  @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
   html,body{ 
       width:100%;
       height:100%;
       background:black;
       overflow: hidden;
       justify-content: center;
       user-select: none;
   }
   
   html{
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
   
   #particles-js{
  width: 100%;
  height: 100%;
  background-color: black;
  background-size: cover;
}

    #overlay{
        position: absolute;
        top: 10%;
        left: 30%;
        width: 40%;
    }



    .circle-container {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    
    }
    
    .circle {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent */
      padding: 50px;
      border-radius: 50%;
    }
    
    .link-container {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    
    .link {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    body {
      font-family: 'Raleway', sans-serif;
    }
      .button {
    background-color: #04AA6D; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
  }
  .button_black {
    background-color: white;
    color: black;
    border: 2px solid #555555;
  }
  
  .button_black:hover {
    background-color: #555555;
    color: white;
  }
  .custom-label {
    color: #ffffff; /* Change label color to a nice blue */
    font-weight: bold; /* Make the text bold */
    font-size: 1.2rem; /* Slightly increase the font size */
    margin-bottom: 5px;
}

.cool-input {
    width: 100%; /* Make input stretch full width */
    padding: 10px; /* Add padding inside the input */
    font-size: 1rem; /* Increase the font size for better readability */
    border: 2px solid #464748; /* Add a nice border */
    border-radius: 8px; /* Round the corners */
    outline: none; /* Remove the outline on focus */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
    transition: all 0.3s ease; /* Smooth transitions for hover/focus */
}

.cool-input:focus {
    border-color: #6a6a6a; /* Change border color on focus */
    box-shadow: 0 4px 8px rgba(64, 64, 64, 0.5); /* Change shadow on focus */
}
.icon {
  position: absolute; /* Position the icon absolutely within the container */
  right: -50px; /* Adjust this value to place the icon next to the button */
  top: 50%; /* Align vertically */
  transform: translateY(-50%); /* Center the icon vertically */
  width: 50px; /* Adjust size as needed */
  height: 50px; /* Adjust size as needed */
}
.button-container {
  position: relative; /* Allows absolute positioning of the icon */
  display: inline-block; /* Ensures the button and icon are in a line */
}