@import url("./bar.css");
@import url("./input.css");
@import url("./ip.css");
@import url("./loader.css");
@import url("./modal.css");
@import url("./response.css");

:root {
    --primary-text-color: rgb(200, 200, 200);

    --primary-background-color: black;
    --secondary-background-color: rgb(24, 24, 24);
    --tertiary-background-color: rgb(36, 36, 36);
    --quaternary-background-color: rgb(48, 48, 48);

    --accent-color: rgb(140, 110, 255);

    --primary-button-text-color: black;
    --secondary-button-text-color: rgb(220, 220, 220);

    --primary-button-background-color: rgb(230, 230, 230);
    --secondary-button-background-color: transparent;

    --primary-button-hover-background-color: rgb(180, 180, 180);
    --secondary-button-hover-background-color: rgb(32, 32, 32);

    --primary-button-active-background-color: rgb(120, 120, 120);
    --secondary-button-active-background-color: rgb(64, 64, 64);

    --primary-button-disabled-background-color: rgb(150, 150, 150);
    --secondary-button-disabled-background-color: rgb(16, 16, 16);

    --primary-border-radius: 20px;
    --secondary-border-radius: 10px;
}

* {
    margin: 0;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    box-sizing: border-box;
}

html,
body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    background-color: var(--primary-background-color);
}

.no-transition {
    transition: none !important;
}

.primary-button {
    padding: 7px;

    background-color: var(--primary-button-background-color);
    border: none;
    border-radius: 10px;

    color: var(--primary-button-text-color);
    text-align: center;
    font-size: 1.2rem;

    transition: background-color 0.25s ease;
}

.primary-button:hover {
    background-color: var(--primary-button-hover-background-color);

    cursor: pointer;
}

.primary-button:active {
    background-color: var(--primary-button-active-background-color);
}

.primary-button:disabled {
    background-color: var(--primary-button-disabled-background-color);

    cursor: not-allowed;
}

.secondary-button {
    padding: 7px;

    background-color: var(--secondary-button-background-color);
    border: none;
    border-radius: 10px;

    color: var(--secondary-button-text-color);
    text-align: center;
    font-size: 1.2rem;

    transition: background-color 0.25s ease;
}

.secondary-button:hover {
    background-color: var(--secondary-button-hover-background-color);

    cursor: pointer;
}

.secondary-button:active {
    background-color: var(--secondary-button-active-background-color);
}

.secondary-button:disabled {
    background-color: var(--secondary-button-disabled-background-color);

    cursor: not-allowed;
}

main {
    width: 50vw;

    padding: 20px;
    margin: 20px;

    background-color: var(--secondary-background-color);
    border-radius: var(--primary-border-radius);
}

@media (width < 768px) {
    main {
        width: 90vw;
    }
}

main h1 {
    margin: 0 0 10px 0;

    color: var(--primary-text-color);
    text-align: center;
    font-size: 2rem;
}

@keyframes slideUp {
    from {
        opacity: 0;

        transform: translateY(3vh);
    }
    to {
        opacity: 1;

        transform: translateY(0vh);
    }
}