:root
{
    --primary: #00ccff;
    --secondary: #000000;
    --text-color: #ffffff;
    --secondary-text-color: #000000;
    --bg-1: #ffffff;
    --bg-2: #c4c4c4;
    --bg-3: #555555;
}
*
{
    margin: 0;
    padding: 0;
}
body
{
    background-color: var(--bg-1);
    min-height: 100vh;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
}

.input
{
    outline: 0;
    border: 1px solid var(--secondary);
    border-radius: 8px;
    background-color: var(--bg-1);
    height: 3vh;
    padding: 0 1vw 0 1vw;
}

.input:focus
{
    outline: 0;
    border: 8px double var(--primary);
    border-radius: 8px;
}

button
{
    border-radius: 10px;
    width: 12vw;
    height: 4vh;
    border: 2px solid var(--primary);
    background-color: #ffffff00;
    margin: 0 1vw 0 0;
    max-width: 150px;
    min-height: 24px;
    font-size: 20px;
    font-weight: 500;
}

button:hover
{
    background-color: var(--primary);
    cursor: pointer;
}

button:active
{
    transform: translateY(2px);
    cursor: pointer;
}

@media(max-width: 1000px)
{
    button
    {
        font-size: 15px;
        font-weight: 500;
    }
}