/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Tahoma;
}

.conwfrndsaru {
  padding: 20px 0;
  padding-left: 27px;
  font-size: 18px;
  color: black;
  font-family: Helvetica;
}

.login-container {
    display: flex;          /* Lines items up in a horizontal row */
    align-items: center;    /* Keeps them vertically centered */
    gap: 5px;               /* Change this number to widen or tighten the space! */
}

.login-input {
    height: 22px;
    padding: 2px 4px;
    font-size: 11px;
    border: 1px solid #1d3563;
    border-radius: 2px;
}

.login-btn {
    height: 22px;
    background: #5b74a8;
    color: white;
    border: 1px solid #29447e;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 6px;
}

.blue-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 42px;
    background-color: #3b5998;
    border-bottom: 1px solid #29487d;
    
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spreads logo left, inputs right */
    padding: 0 50px; /* Reduces side padding so inputs don't overflow */
    box-sizing: border-box; /* Crucial: includes padding inside the 100% width! */
}

.cred_inp {
  border: 1px solid #29487d;
  border-radius: 2px;
  height: 25px;
  width: 250px;
  padding-left: 10px;
  position: absolute;
  left: 27px;
}

.cred_btn {
  border: 1px solid #29487d;
  border-radius: 2px;
  height: 25px;
  width: 265px;
  padding-left: 10px;
  position: absolute;
  left: 27px;
  background-color: #3b5998;
  font-family: 'Freight Sans Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  color: white;
}

/* Styling the links inside the bar */
.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    margin-left: 15px;
}

/* Push your main page content down so the fixed bar doesn't cover it */
body {
    margin-top: 50px;
    background-color: #e9ebee; /* 2013 Facebook gray page background */
    font-family: sans-serif;
}

.logo {
        color: #ffffff; /* Proper CSS color declaration */
        font-family: 'Klapton', 'KLOW', 'Lucida Grande', Tahoma, sans-serif;
        font-weight: bold;
        font-size: 24px;
        letter-spacing: -1px; /* The iconic tight 2013 FB spacing */
        text-transform: lowercase;
        cursor: pointer;
        user-select: none;
    }