*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
html,body{
    display: grid;
    height: 100%;
    width: 100%;
    color: white;
//    place-items: center;
    background: #000066;
   // background: linear-gradient(-135deg, #c850c0, #4158d0);;
   background-color: #000066
}
.logo {
    position: fixed; /* Positions the element relative to the viewport */
    top: 20px; /* Positions the logo at the top of the viewport */
    left: 20px; /* Positions the logo at the left edge of the viewport */
    width: auto; /* Sets the width automatically based on content */
    height: auto; /* Sets the height automatically based on content */
    max-height: 150px; /* Sets a maximum height */
    max-width: 350px; /* Sets a maximum width */
}
::selection{
    background: #000066;
    min-height: 100%;
    color: #fff;
    background-color: #000066
}
.container {
    display: flex; /* Arranges children in a row */
}
a:visited {
    color: white; /* Or any color you prefer */
}
a:link {
    color: white;  /* Sets the color of unvisited links to red */
}
.left-panel {
    width: 50%; /* Adjust as needed */
    text-align: left;
    padding-left: 20px;
    /* Add other styles like background-color, padding, etc. */
}

.right-panel {
    width: 50%; /* Adjust as needed */
    padding-right: 20px;
    /* Add other styles */
}

/* For responsiveness */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stacks sections vertically on smaller screens */
    }

    .left-panel,
    .right-panel {
        width: 100%; /* Full width for smaller screens */
    }
}