body {background-color: lavenderblush;
          font-family: Trebuchet MS, sans-serif; 
          width: 1400px;}
    .form {border: 5px outset darkslategray; 
           font-family: Trebuchet MS, sans-serif;
           width: 700px; 
           background-color: mistyrose;}
    .button {background-color: orange; 
            font-family: sans-serif; 
            cursor: pointer;}
    .delete {background-color: red; 
            cursor: pointer; 
            border-radius: 25%; 
            font-size: 50%;}
    .fulfill {background-color: green; 
              cursor: pointer; 
              border-radius: 25%; 
              font-size: 50%;}
    
    label {display: inline-block;
           float: left;
           clear: left;
           width: 150px;
           text-align: right;}
       
    /* Add a black background color to the top navigation */
    .topnav {
      background-color: thistle;
      overflow: hidden;
      position: fixed;
      top: 0;
      width: 1400px;
    }
    
    /* Style the links inside the navigation bar */
    .topnav a {
      float: left;
      color: black;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    /* Change the color of links on hover */
    .topnav a:hover {
      background-color: lavenderblush;
      color: black;
    }
    
    /* Add a color to the active/current link */
    .topnav a.active {
      background-color: orange;
      color: black;
    }
    
    #content {
    position: relative;
    }
    #content img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 5%;
        border-radius: 50%;
    }
    
    .img {float: right;
        width: 3.4%;
        border-radius: 50%;
        }
    
    .scrollable {height: 500px;
                 overflow: scroll; 
                 background-color: ghostwhite;
                 border: 3px outset black;
                 }

    .chat {height: 500px;
           width: 50%;
           display: flex;
           flex-direction: column-reverse;
           overflow: scroll; 
           color: white;
           background-color: #18181b;
           border: 3px outset black;
           resize: both;
           }
    
    a.jump, 
    a.jump:link, 
    a.jump:visited, 
    a.jump:hover, 
    a.jump:focus, 
    a.jump:active {color: green;
                   cursor: pointer;
                   }
    a.twitch, 
    a.twitch:link, 
    a.twitch:visited, 
    a.twitch:hover, 
    a.twitch:focus, 
    a.twitch:active {color: purple;
                     cursor: pointer;
                    }
    

    /* Tooltip container */
    .cvtooltip {position: relative;
                display: inline-block;
               }

    /* Tooltip text */
    .cvtooltip .cvtooltiptxt {
      visibility: hidden;
      width: 250px;
      background-color: black;
      color: #fff;
      text-align: center;
      padding: 5px 0;
      border-radius: 6px;
     
      /* Position the tooltip text */
      position: absolute;
      z-index: 1;
      bottom: 100%;
      left: 50%;
      margin-left: -125px;
    }
    
    /* Show the tooltip text when you mouse over the tooltip container */
    .cvtooltip:hover .cvtooltiptxt {
      visibility: visible;
    }

    .cvtooltip .cvtooltiptxt::after {
      content: " ";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: black transparent transparent transparent;
    }
    
    summary {
      color: #36454F;
      cursor: pointer;
    }