body {
        font-family: 'Arial', cursive, sans-serif;
        margin: 0;
        padding: 0;
      }

      .topbar {
        background: linear-gradient(to bottom, #99ccff 27%, #6699ff 51%);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 20px;
        color: white;
      }

      .topbar a {
        color: white;
        text-decoration: none;
        padding: 8px 16px;
      }

      .topbar a:hover {
        background-color: #658aca;
        border-radius: 4px;
      }

      .logo {
        font-size: 20px;
        font-weight: bold;
      }

      .nav-links {
        display: flex;
        gap: 10px;
      }
      
      #maintextbox{
text-align: center;
border: 4px solid;
width: 80%;
background-color: #bee5f7;
margin-inline: auto;

      }

            #textbox{
text-align: center;
border: 2px solid;
width: 60%;
background-color: #bee5f7;
margin-inline: auto;

      }
                  #soical{
text-align: center;
border: 3px solid;
width: 50%;
background-color: #bee5f7;
margin-inline: auto;

      }
            #text{
text-align: center;
border: 2px solid;
width: 80%;
background-color: #bee5f7;
margin-inline: auto;

      }
           
      #textbox2{
text-align: center;
border: 2px solid;
width: 30%;
background-color: #bee5f7;
margin-inline: auto;
      }