/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100&display=swap");

body {
  margin: 0;
  font-family: "Inter", sans-serif;
}

#container {
  width: 100%;
  display: inline-block;
}

nav {
  display: inline-flex;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;

  a {
    width: 70%;
    text-decoration: none;

    div {
      display: flex;

      p {
        color: white;
        text-decoration: none;
      }

      img {
        width: 100px;
        height: 45px;
      }
    }
  }

  ul {
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 15px;

    li {
      display: inline;
      font-family: "Courier New", Courier, monospace;
      font-size: 17px;

      a {
        color: #f2f2f2;
        text-decoration: none;
        padding: 14px;

        &:hover {
          background-color: #111;
        }
      }
    }
  }
}

.notification {
  margin-top: 49px;
  padding: 10px;

  p {
    margin: 0;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 1.5rem;
  }
}

.notice {
  background-color: #00d1b2;
}

.alert {
  background-color: rgb(211, 90, 90);
}
