/* Animations */
@import url('../animations/bounce.css');
@import url('../animations/fade.css');
@import url('../animations/float.css');
@import url('../animations/pulse.css');
@import url('../animations/rainbow.css');

/* Components */
@import url('../components/button.css');
@import url('../components/card.css');

/* Utilities */
@import url('../utilities/color.css');
@import url('../utilities/positions.css');
@import url('../utilities/spacing.css');
/* It is now also online, mention it on Github: https://fakealek.github.io/gunesCSS/css/main.css */

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--web-bg);
}

:root {
    --basic: #fff;
    --info: #213dbc;
    --successful: #29bf12;
    --danger: #dc3545;
    --warn: #ffc300;
    --background: #444;
    --web-bg: #2b2b2b;

    --font-base: 'Arial', sans-serif;

    --logo: url(../img/GunesCSS.png);
}

/* ----Text---- */

.TXT {
    font-family: var(--font-base);
    color: var(--basic);
}

/* --easy--! */
.TXT.ey {
    display: inline-block;
    color: var(--basic);
    background-color: var(--background);
    border-radius: 5px;
    padding: 5px;
}

/* --danger--! */
.TXT.danger {
    color: var(--danger);
}

/* --warn--! */
.TXT.warn {
    color: var(--warn);
}

/* --important--! */
.TXT.note {
    display: inline-block;
    color: var(--background);
    background-color: #FBF719;
    border-radius: 5px;
    padding: 5px;
}

.outline {
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

/* ----Button---- */

.BTN {
    font-family: var(--font-base);
    outline: none;
    border: none;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

/* --easy--! */
.BTN.ey {
    color: var(--basic);
    background-color: var(--background);
}

.BTN.ey:hover {
    background-color: #555;
}

/* --danger--! */
.BTN.danger {
    color: var(--basic);
    background-color: var(--danger);
}

.BTN.danger:hover {
    color: var(--danger);
    background-color: var(--background);
}

/* --successful--! */
.BTN.suc {
    color: var(--basic);
    background-color: var(--successful);
}

.BTN.suc:hover {
    color: var(--successful);
    background-color: var(--background);
}

/* ----Link---- */

.LIN {
    font-family: var(--font-base);
    text-decoration: none;
    padding: 5px;
    border-radius: 10px;
    transition: 0.3s ease-in-out;
}

/* --easy--! */
.LIN.ey {
    color: var(--info);
    font-family: var(--font-base);
}

.LIN.ey:hover {
    color: var(--basic);
    background-color: var(--info);
}

/* --warn--! */
.LIN.warn {
    color: var(--warn);
}

.LIN.warn:hover {
    color: var(--basic);
    background-color: var(--warn);
}

/* ----Input---- */

.IPT {
    font-family: var(--font-base);
    outline: none;
    border: none;
    border-radius: 10px;
    padding: 10px;
}

/* ----Logo---- */

.logo {
    content: url("../img/GunesCSS.png");
    width: 200px;
    height: 200px;
}

.ad {
    content: url("../img/GunesCSS-ad.png");
    height: 70px;
}