:root{
    /* general variables */
    --nav_heading : rgb(110, 87, 224);
    --nav_link_hover : wheat;
    --background1 : rgb(0, 0, 0);
    --background2 : rgb(17, 17, 17);
    --background3 : rgb(34, 34, 34);
    --text1 : rgb(205, 205, 205);
    --output_text : white;
    --heading1 : wheat;
    --heading2 : white;
    --code_background : rgb(56, 56, 56);
    /* elements specific variables */
    /* mare button of home  */
    --more_button : rgb(182, 168, 255);
    --more_button_hover : rgb(201, 192, 255);
    /* cards  */
    --card_background : rgba(45,45,52,0.6);
    --card_border : rgb(110, 87, 224);
    --built_now_background : #A370F0;
    --built_now_text : white;
    --built_now_icon_background : rgb(46, 43, 43);
    --tag_border : black;
    /* contact page variables */
    --contact_image_background : #6e57e0;
    --contact_page_icons : rgb(196, 35, 255);
    --contact_page_input_border : purple;
    --contact_page_input_background : hsl(250, 29%, 16%);
    --contact_page_input_lable : white;
    --contact_page_input_text : wheat;
    --contact_page_form_send : royalblue;

    --danger: #dc362e;
  }

  .loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;        /* adjust based on button color */
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  }

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
  }