*{
    padding:0;
    margin:0;

}

body{
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0b2b43;
}

.app-wrapper{
    padding:30px;
    border-radius: 10px;
    position:absolute;
}

#first{
    margin:50px 0px 0px 35px;
    font-size: 40px;
    color:white;

}

#second{
    margin:0px 0px 0px 35px;
    font-size: 45px;
    color: #03f357;
}

#last{
    margin:0px 0px 0px 35px;
    font-size: 15px;
    color: rgb(180, 176, 180);
}

#btn{
    border-radius: 4px;
    margin: 30px 0px 0px 35px;
    padding: 7px;
    color: white;  
    border:none;
    background-color: #03f357;  
    cursor: pointer;
}

#line{
    width: 400px;
    height: 0.5px;
    background-color: #5a5656;
    margin: 30px;
}

.to-change{
    display:flex;
    gap: 30px;
    margin: 10px 0px 0px 45px;
    height: 30px;
    width: 500px;
    
    border-radius: 4px;
}

#box1, #box2{
    display: flex;
    color:white;
    justify-content:center;
    align-items:center;
    width: 170px;
    height: 30px;
    background-color: #5a5656;
    border-radius: 4px;
    cursor:pointer;
}

#box1:active , #box2:active{
    opacity: 0.7;
}

#theme-toggle{
    background-color:#0b2b43 ;
    position:absolute;
    top:30px;
    right:70px;
}

body.light{
    background-color: aliceblue;
    color:#111;
}

body.light .app-wrapper{
    background-color: aliceblue;
    /* color: #111; */
}

body.light #box1,
body.light #box2 {
    background-color: #0b4e4e;
    color: #b3a9a9;
}

body.light #btn {
    background-color: #4f46e5;
    color: white;
}

body.light #first{
    color:#004e89;
}
body.light #second{
    color:#1a659e;
}