Design Settings

First, open the style.css file from the css folder. In :root you can change any color, size or anything else of the design. All you have to do is write the value you want opposite the variable and save the file.

/* From the :root element you can easily change the colors of the design, its size and so on. */
:root {

  /* You can change the font family in the whole design here. (You need to add the font family to the codes.) */
  --font_family: 'Inter', sans-serif;

  /* You can change the font size here, is proportional to all texts. */
  --font_size: 16px;

  /* You can change the background color by typing the color code. (If you do not enter a background-image image, the background-color will be active.) */
  --background_color: #000;
  --background_image: url("../img/wallpaper.jpg");

  /* You can change the frame thickness and color of the picture by typing the number of pixels and the color code. */
  --image_border_color: #000;
  --image_border_px: 3px;

  /* You can change the width and size of the picture by typing the number of pixels. */
  --image_width: 140px;
  --image_height: 140px;

  /* You can change the colors of the title and description section by typing the color codes. */
  --title_color: #fff;
  --description_color: #f1c40f;

  /* You can change the colors of social media icons by changing the color code. */
  --svg_color: #fff;

  /* You can change the background, text color and active color of the menu by changing the color codes. */
  --menu_background_color: #0e0e0e;
  --menu_text_color: #fff;
  --menu_active_text_color: #f1c40f;

  /* You can change the button's background, text color and active color by changing the color codes. */
  --button_background_color: #0e0e0e;
  --button_text_color: #fff;
  --button_text_hover_color: #f1c40f;

  /* You can change the background, text color and active color of the text field by changing the color codes. */
  --textarea_background_color: #0e0e0e;
  --textarea_text_color: #fff;
  --textarea_link_text_color: #f1c40f;

  /* You can change the background, text color and active color of the footer area by changing the color codes. */
  --footer_background_color: #0e0e0e;
  --footer_text_color: #fff;
  --footer_link_text_color: #f1c40f;
}