body {
    background: #2c2c2c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Quicksand', serif;
    color: #ffffff;
    margin: 0;
}

h1 {
    font-size: 2em;
    margin: 0;
}

p {
    font-size: 1.2em;
    width: 350px;
}

a {
    color: #ffffff;
    text-decoration: underline;
}

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 582px;
    max-width: 1209px;
    width: 100vw;
}

.card {
    border-radius: 10px;
    box-shadow: -3px 3px 10px rgba(143, 255, 250, 0.29);
    margin: 20px;
    padding: 10px;
}

.profile-pict {
    border-radius: 50%;
    height: 150px;
    width: 150px;
    padding: 7px;
}

.social-networks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-network {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-icon {
    width: 30px;
    height: 30px;
}

#bloch-sphere-container {
    border-radius: 20px; /* Adjust the value as needed */
    overflow: hidden; /* Ensure the content stays within the rounded corners */
    width: 300px;
    height: 300px;
}

/* Media query for wide screens */
@media (min-width: 1042px) {
    .main {
        position: relative;
    }

    .card {
        position: absolute;
    }

    .card:nth-child(1) {
        top: 3vh;
        left: 1vw;
    }

    .card:nth-child(2) {
        top: 40vh;
        right: 1vw;
    }

    .card:nth-child(3) {
        top: 30vh;
        left: 1vw;
    }

    .card:nth-child(4) {
        top: 3vh;
        right: 1vw;
    }
}

/* Media query for wide screens */
@media (min-width: 1042px) and (max-height: 749px) {
    .card:nth-child(1) {
        top: 15px;
        left: 1vw;
    }

    .card:nth-child(2) {
        top: 300px;
        right: 1vw;
    }

    .card:nth-child(3) {
        top: 220px;
        left: 1vw;
    }

    .card:nth-child(4) {
        top: 15px;
        right: 1vw;
    }
}

@media (min-width: 1042px) and (min-height: 1000px) {
    .card {
        position: absolute;
    }

    .card:nth-child(1) {
        top: 20px;
        left: 1vw;
    }

    .card:nth-child(2) {
        top: 400px;
        right: 1vw;
    }

    .card:nth-child(3) {
        top: 300px;
        left: 1vw;
    }

    .card:nth-child(4) {
        top: 20px;
        right: 1vw;
    }
}

@media (max-width: 584px) {
    .main {
        min-width: 0;
    }

    .card > div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .social-networks {
        align-items: normal !important;
    }

    .carousel-item {
        min-width: 0 !important;
    }

    .carousel-inner {
        align-items: center;
        justify-content: center;
    }

    h1 {
        width: 80vw;
    }
    p {
        width: 80vw;
    }
}