@import 'components/header.css';
@import './components/menu/menu.css';
@import './components/cards/cards.css';
@import './components/message/message.css';
@import './components/gallery/gallery.css';

@font-face {
    src: url('assets/font/Comfortaa.ttf');
    font-family: 'Comfortaa';
}

:root {
    /* colors */
    --white: #fff;
    --black: #000;
    --gray-dark: #333;
    --gray: #666;
    --gray-light: #aaa;
    --purple: #9a27d2;
    --purple-dark: #491064;
    --purple-light: #dd9aff;
    --transparent-white: #fffb;
    --transparent-dark: #000b;

    /* gradients */
    --gradient-gray: linear-gradient(45deg, var(--gray-dark), var(--gray));
    --gradient-purple: linear-gradient(45deg, var(--purple-dark), var(--purple));
    --gradient-purple-light: linear-gradient(45deg, var(--purple), var(--purple-light));

    /* gaps */
    --gap-small-extra: 0.25rem;
    --gap-small: 0.5rem;
    --gap-medium: 1rem;
    --gap-large: 2rem;
    --gap-large-2: 3rem;
    --gap-large-3: 4rem;

    /* transition time */
    --transition-slow: 500ms;
    --transition-medium: 250ms;
    --transition-fast: 150ms;

    /* border-radius */
    --border-radius: 5px;
    --border-radius-medium: 10px;
    --border-radius-large: 15px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    font-size: 20px;
    font-family: 'Comfortaa', 'Tahoma', sans-serif;
    min-height: 100vh;
    background: var(--gradient-gray);
}

a {
    text-decoration: none;
}

.btn {
    padding: var(--gap-small) var(--gap-medium);
    font: inherit;
    font-size: 1rem;

    background: var(--gradient-purple);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    border-bottom: 3px solid var(--black);
    transition: border-color var(--transition-fast);
}
.btn:hover {
    border-color: var(--white) ;
}

.icon {
    width: 30px;
    padding: 0 var(--gap-small-extra);
}

.hidden {
    display: none;
}

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

.contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-small-extra);
}