*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}

body{
    background:black;
    color:white;
}

/* Landing Page */

#landingPage{

    width:100%;
    height:100vh;

    display:flex;
    flex-direction:column;

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

    background:black;
}

.top-logo{

    position:absolute;
    top:40px;

    font-size:25px;
    letter-spacing:2px;
}

.hero-container{
    position:relative;

    width:min(90vw, 500px);
    height:min(70vw, 350px);

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

.hero-image{
    width:min(80vw, 400px);
    height:auto;
}

.star-image{
    position:absolute;

    width:180px;

    top:20px;
    right:20px;
}

.mkron-title{

    margin-top:30px;

    font-size:clamp(60px, 15vw, 120px);
    font-weight:900;

    background:linear-gradient(
        90deg,
        white 25%,
        #b784ff 75%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    letter-spacing:3px;
}

.start-btn{

    margin-top:40px;

    width:240px;
    height:65px;

    border-radius:50px;

    border:1px solid #8f5cff;

    background:linear-gradient(
        90deg,
        black 65%,
        #6d28d9
    );

    color:white;

    font-size:22px;

    cursor:pointer;

    transition:0.3s;
}

.start-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 0 20px rgba(143,92,255,.6);
}

.start-btn:hover{

    box-shadow:0 0 20px #8b5cff;
}

/* Chat Page */

#chatPage{

    display:none;

    width:100%;
    height:100vh;
}

.sidebar{

    width:250px;

    background:#111;

    padding:20px;
}

.sidebar button{

    width:100%;
    padding:12px;

    margin-top:20px;

    background:white;
    color:black;

    border:none;

    border-radius:10px;
}

.main{

    flex:1;

    display:flex;

    flex-direction:column;
}

.header{

    padding:20px;

    border-bottom:1px solid #333;
}

#chatContainer{

    flex:1;

    overflow-y:auto;

    padding:20px;
}

.bot-message{

    background:#222;

    padding:15px;

    border-radius:10px;

    width:fit-content;
}

.user-message{

    background:white;

    color:black;

    padding:15px;

    border-radius:10px;

    width:fit-content;

    margin-left:auto;

    margin-top:10px;
}

.input-area{

    display:flex;

    gap:10px;

    padding:20px;

    border-top:1px solid #333;
}

.input-area input{

    flex:1;

    padding:15px;

    background:#111;

    color:white;

    border:1px solid #333;
}

.input-area button{

    padding:15px 30px;

    background:white;

    color:black;

    border:none;
}
@media (max-width: 768px){

    .top-logo{
        font-size:18px;
        top:20px;
    }

    .mkron-title{
        font-size:70px;
    }

    .hero-image{
        width:250px;
    }

    .star-image{
        width:120px;
        top:20px;
        right:10px;
    }

    .start-btn{
        width:200px;
        height:55px;
        font-size:18px;
    }

}
@media (max-width:768px){

    #chatPage{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
        height:auto;
    }

    .main{
        width:100%;
    }

}