# CSS Structure

{% hint style="info" %}
Esty has a light and a dark pre-made appearance. Those CSS files have the same strucutre they only differ in color adjustments.
{% endhint %}

CSS files which are responsible for the look and feel can be found in **css** folder:

* **style.css**
* **style-login.css**
* **style-dark.css**
* **style-login-dark.css**

The structure is the following.

**style.css** _(responsible for main areas such as calculator home, profile page etc.)_

```
01. PRELOADER
02. GENERAL
03. MODAL ALERT
04. MODAL DIALOG
05. INFO MESSAGES
06. HEADER
07. SUB HEAEDR
08. FOOTER
09. HERO
10. SERVICES
11. BANNER
12. CONTAINERS
13. FORM ELEMENTS
14. BACK TO TOP
15. RESPONSIVE
```

**style-login.css** _(responsible for login and password reset areas)_

```
01. PRELOADER
02. GENERAL
03. LOGIN
04. FLOAT LABELS
05. SHOW-HIDE PASSWORD
06. PASSWORD STRENGHT
07. CHECKBOXES
08. FORM LINKS
09. FORM BUTTON
10. INFO MESSAGE
11. RESPONSIVE
```
