/* ==========================
   Global
========================== */

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:radial-gradient(circle at top,#ffffff,#f3f1ff);
    overflow-x:hidden;
}

.container{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:3vw;
    padding:2vw;
}

h1{
    margin-top:0;
    margin-bottom:28px;
    font-size:var(--title-size);
    background:linear-gradient(90deg,#7b4dff,#ff4f8b,#ff9d2d);
    -webkit-background-clip:text;
    color:transparent;
}

label{
    display:block;
    margin-bottom:12px;
    font-size:var(--label-size);
    color:#555;
}

textarea{
    width:100%;
    height:38vh;
    min-height:220px;
    max-height:420px;
    padding:15px;
    border-radius:10px;
    border:1px solid #ddd;
    resize:none;
    font-size:16px;
    line-height:1.5;
}

textarea:focus{
    outline:none;
    border-color:#8f5cff;
    box-shadow:0 0 0 4px rgba(143,92,255,.15);
}

/* ==========================
   Buttons
========================== */

button{
    width:100%;
    height:58px;
    margin-top:16px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-size:var(--button-font);
    font-weight:700;
    transition:.25s;
}

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

input:disabled,
button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ==========================
img
========================== */
.profile-image{
    width:180px;
    height:180px;
    object-fit:cover;
    border-radius:50%;
    border:6px solid white;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    margin-bottom:30px;
}

/* ==========================
   Mobile
========================== */

@media(max-width:900px){
    .container{
        flex-direction:column;
        align-items:center;
    }

    :root{
        --wheel-size:min(90vw,520px);
        --panel-width:90vw;
    }
}

/* ==========================
   Responsive Design
========================== */

@media (max-width: 900px) {
    .navbar {
        padding: 0 24px;
    }

    .container {
        flex-direction: column;
        align-items: center;
    }

    :root {
        --wheel-size: min(90vw, 520px);
        --panel-width: 90vw;
    }

    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 20px;
    }
}

@media (max-width: 600px) {
    .navbar {
        height: auto;
        padding: 16px 20px;
        flex-direction: column;
        gap: 14px;
    }

    .logo {
        font-size: 22px;
    }

    .logo-icon {
        width: 32px;
        height: 32px;
    }

    .nav-links a {
        margin-left: 12px;
        margin-right: 12px;
        font-size: 14px;
    }

    .homepage-cover {
        width: 100vw;
        margin-bottom: 32px;
    }

    .hero h1 {
        font-size: 38px;
    }

    .hero p {
        font-size: 17px;
        line-height: 1.7;
    }

    .tools-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .left-panel {
        width: 92vw;
        padding: 22px;
    }

    .wheel-area {
        width: calc(var(--wheel-size) + 20px);
        height: calc(var(--wheel-size) + 20px);
    }

    canvas {
        margin: 10px;
    }

    #pointer {
        border-left: 18px solid transparent;
        border-right: 18px solid transparent;
        border-top: 52px solid #ff2525;
    }

    .timer-card {
        padding: 28px 20px;
    }

    .timer-display {
        font-size: clamp(64px, 22vw, 120px);
    }

    .about-content p {
        font-size: 17px;
    }
}