body{
    margin:0;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(135deg, #5f0a87, #a4508b); /* purple gradient bg */
}

/* top section of the page */
.top{
    width:100%;
    padding:30px;
    text-align:center;
}

/* (logo + text) */
.title{
    display:flex;
    justify-content:center;
    align-items:center;
    color:#ffffff;
    font-size:48px;
    font-weight:bold;
    font-family: 'Cinzel', serif;
    letter-spacing:2px;
}

/* logo image */
.title img{
    width:100px;
    margin-right:15px;
}

/* container for the input form */
.form-box{
    margin-top:30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
}

/* all input boxes */
input{
    padding:15px;
    width:80%;
    max-width:900px;
    border-radius:10px;
    border:none;
    background:#ffffff;
    color:#333;
    text-align:left;
    font-size:16px;
    font-family: 'Montserrat', sans-serif;
}

/* text style inside inputs */
input::placeholder{
    color:#888;
}

/* container for buttons */
.buttons{
    display:flex;
    width:80%;
    max-width:900px;
    gap:15px;
}

/* general button styling */
button{
    flex:1;
    padding:16px;
    border-radius:10px;
    border:none;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s;
    font-family: 'Montserrat', sans-serif;
}

/* add button style */
button.add{
    background:#ff4da6;
    color:white;
}

/* hover effect for add button */
button.add:hover{
    background:#e04394;
}

/* show button style */
button.show{
    background:#ffd633;
    color:#333;
}

/* hover effect for show button */
button.show:hover{
    background:#e6c02e;
}

/* bottom section where output is shown */
.bottom{
    width:80%;
    max-width:900px;
    margin:40px auto;
    padding:20px;
    border-radius:10px;
    background:white;
    color:#333;
    min-height:200px;
}

/* each racers output line */
#output p{
    font-size:16px;
    margin:8px 0;
}