body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #27376c;
      padding-top: 80px;
      margin-top: 0px;
      margin-left: 0px;
      margin-right: 0px;
    }
    #top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 24px 0px 24px;
      background-color: #1a237e;
      color: white;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      height: 80px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    #logo {
      font-size: 20px;
      font-weight: bold;
    }
    #topbar-right {
      display: flex;
      align-items: center;
      margin-right: 40px;
    }
    #login-btn, #logout-btn, #hero-login-btn {
      background-color: #4285F4;
      color: white;
      border: none;
      padding: 8px 16px;
      font-size: 14px;
      border-radius: 4px;
      cursor: pointer;
    }
    #logout-btn {
      background-color: #e53935;
    }
    #login-btn:hover, #hero-login-btn:hover {
      background-color: #357ae8;
    }
    #logout-btn:hover {
      background-color: #c62828;
    }
    #user-info {
      margin-top: 30px;
      display: none;
    }
    #hero {
        margin-top: 0;
        padding: 0;
        background-color: #27376c
        
    }
    
    .hero-wrapper {
        display: flex;
        justify-content: space-between; /* or flex-start or center depending on desired alignment */
        align-items: center; /* vertical alignment */
        }
   
    #hero-img-wrapper {
      display:block;
      width: 50%;

    }
    #hero-img {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
    }
    #hero-line-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;   /* centers horizontally */
        justify-content: center; /* centers vertically if you set a height */
        text-align: center; 
        width:50%;
    }
    .hero-line {
        display: block;  
        width: 100%;
        text-align: center;
        height: auto;
        font-size: 60px;
        color: #ffffff;
    }

    #hero-login-btn {
      display: block;
      width: fit-content;
      height: auto;
      margin-top: 5px;
      font-size: 30px;

    }
    #quotes {
      background-color: #27376c;
      color: white;
      font-size: 30px;
      font-style: italic;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    }