#body {
    display: flex;
    justify-content: center;
    transition: background 0.3s, color 0.3s;
}
body {
    background-image:url(download.jpg) ;
    height: 100vh;
}

#bedissle {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(165, 16, 16, 0.1);
    width: 23%;
    border: 2px solid rgb(0, 0, 0)
}

#bedissle.midnight {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 15px rgba(165, 16, 16, 0.1);
    width: 23%;
    border: 2px solid rgb(0, 0, 0)
}

#bedissle.dream {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 10px;
    background-image: url(sky.jpg);
    box-shadow: 0 4px 15px rgba(165, 16, 16, 0.1);
    width: 23%;
    border: 2px solid rgb(132, 201, 195)
}

#bedissle.brown {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background-image: url(notebook\ page.jpg);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(165, 16, 16, 0.1);
    width: 23%;
    border: 2px solid rgb(151, 106, 55)
}

#bedissle.mathie {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background-image: url(PXL_20260423_195336261.jpg);
    background-size: cover;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(165, 16, 16, 0.1);
    width: 23%;
    border: 2px solid rgb(0,0,255)
}

#backgroundEl {
    justify-content: flex-end;
    margin-left: 890%;
}

body.basic {
    background: beige;
    color: black;
}


body.midnight {
    background-image: url(skyglow-rural-suburbs-cities-globe-at-night.webp);
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
    color: #cfd8ff;
}

body.dream {
    background-image: url(Eyes.jpg);
    background-color: black;
    color: #e0ccff;
}

body.brown {
    background-image:url(download.jpg) ;
    color: #f5e6d3;
}

body.mathie {
    background-image: url(Mr.Mathie.jpg);
    background-size: cover;
    color: black;
}
