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

html,
body {
    min-height: 100%;
}

body {
    background: #090909;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================
   LANDING PAGE
========================= */

.page {
    min-height: 100vh;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    overflow: hidden;
}


/* Background glow */

.glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.035);

    filter: blur(100px);

    pointer-events: none;
}

.glow-one {
    top: -250px;
    left: -200px;
}

.glow-two {
    right: -250px;
    bottom: -250px;
}


/* Landing content */

.landing {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 700px;

    text-align: center;
}


/* ABF logo */

.logo {
    width: 75px;
    height: 75px;

    margin: 0 auto 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #292929;
    border-radius: 18px;

    background: #111111;

    font-size: 24px;
    font-weight: 900;
}


/* Small title */

.eyebrow {
    color: #777777;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 5px;

    margin-bottom: 18px;
}


/* Main heading */

.landing h1 {
    font-size: clamp(55px, 10vw, 110px);

    line-height: 0.88;

    letter-spacing: -6px;

    font-weight: 900;
}

.landing h1 span {
    display: block;

    color: #555555;
}


/* Description */

.landing p {
    max-width: 480px;

    margin: 30px auto;

    color: #888888;

    font-size: 15px;

    line-height: 1.7;
}


/* X button */

.x-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 14px 22px;

    border-radius: 8px;

    background: #ffffff;
    color: #000000;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.x-button:hover {
    transform: translateY(-2px);

    opacity: 0.9;
}

.x-button strong {
    font-size: 18px;
}


/* Footer */

footer {
    position: absolute;

    bottom: 25px;

    width: 100%;

    text-align: center;

    color: #444444;

    font-size: 10px;

    letter-spacing: 2px;
}


/* =========================
   DASHBOARD
========================= */

.nav {
    height: 70px;

    padding: 0 30px;

    border-bottom: 1px solid #202020;

    display: flex;

    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-size: 13px;

    font-weight: 900;

    letter-spacing: 2px;
}

.nav-user {
    display: flex;

    align-items: center;

    gap: 18px;

    font-size: 12px;

    color: #888888;
}

.nav-user a {
    color: #ffffff;

    text-decoration: none;

    border: 1px solid #333333;

    padding: 8px 12px;

    border-radius: 7px;

    transition: background 0.2s ease;
}

.nav-user a:hover {
    background: #181818;
}


/* Dashboard container */

.dashboard {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 60px 25px;
}


/* Welcome */

.welcome {
    margin-bottom: 35px;
}

.welcome h1 {
    font-size: clamp(32px, 5vw, 55px);

    letter-spacing: -3px;

    margin-bottom: 10px;
}

.welcome p {
    color: #777777;
}

.welcome strong {
    color: #ffffff;
}


/* Drawing card */

.drawing-card {
    background: #101010;

    border: 1px solid #242424;

    border-radius: 16px;

    padding: 18px;
}


/* Drawing header */

.drawing-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 15px;
}

.drawing-header h2 {
    font-size: 18px;

    margin-bottom: 5px;
}

.drawing-header p {
    color: #666666;

    font-size: 12px;
}


/* Drawing tools */

.tools {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}

.tool {
    border: 1px solid #333333;

    background: #181818;

    color: #ffffff;

    padding: 9px 13px;

    border-radius: 7px;

    cursor: pointer;

    font-size: 12px;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.tool:hover {
    background: #242424;
}

.tool.active {
    background: #ffffff;

    color: #000000;
}

.tool.save {
    background: #ffffff;

    color: #000000;
}


/* Brush size */

.brush-size {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #777777;

    font-size: 11px;

    padding: 0 5px;
}

.brush-size input {
    width: 80px;
}


/* Canvas */

.canvas-wrapper {
    width: 100%;

    height: 600px;

    background: #ffffff;

    border-radius: 10px;

    overflow: hidden;
}

#drawingCanvas {
    width: 100%;
    height: 100%;

    display: block;

    touch-action: none;

    cursor: crosshair;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

    .nav {
        padding: 0 15px;
    }

    .nav-user span {
        display: none;
    }

    .dashboard {
        padding: 35px 15px;
    }

    .drawing-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .canvas-wrapper {
        height: 500px;
    }

    .landing h1 {
        letter-spacing: -4px;
    }

    .landing p {
        font-size: 14px;
    }

}