* {
    box-sizing: border-box;
}
/*html, body { height: 100%; width: 100%; }*/
body {
    color: #1f1f1f;
    background-color: #fafbfc;
    margin: 5px;
    padding: 5px;
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

.homebanner {
    background-color: #567890;
    color: white;
    /*#aaa;*/
    font-family: monospace;
    font-size: 120%;
    margin: 0px;
    padding: 0px;
    /*width: 80%;*/
}

@media scren and (max-width: 800px) {
    body {
        background-color: #abcdef !important;
        font-size: 120%;
    }
/*
    .homenavbar {
        display: flex;
        width: 100%;
    }*/
}

.homenavbar {
    /* display: flex; */
    list-style-type: none;
    margin: 2px;
    padding: 2px 1px 2px 1px;
}

.homenavbar li {
    display: inline;
    margin: 0px;
    padding: 5px;
    /*background-color:#0a0af0;*/
    /*color: blue;*/
    /*width: 250px;*/
}

.home-item:hover,
.home-item:focus {
    /*background-color:#0a0a0a;
    background-image:linear-gradient(90deg, #0a0a0a 2%, #a0a0a0 100%);*/
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    padding: 0px;
    /* 0px 5px 0px;*/
    margin: 0;
    /* color: blue; */
    /*width: 250px;*/
}

button {
    cursor: pointer;
}

.active {
    text-shadow: yellow 0px 1px 1px;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    /* border-image:linear-gradient(90deg, #77ff77 2%, #FF248C 100%); */
    border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    /* background-image:linear-gradient(45deg, yellow 2%, white 100%); */
    border-image-slice: 0 0 1 0;
    opacity: .8;
    color: rgba(8, 255, 8, 80%);
}

.home-item {
    text-shadow: white 0px 1px 1px;
    margin: 0px;
    padding: 0px;
}

a {
    color: #0055FF;
    text-decoration: none;
    text-shadow: black 0px 1px 1px;
}

a:hover {
    color: #00ff00;
}

#logo {
    margin-left: 5px;
    float: right;
    cursor: pointer;
}

#firebase {
    margin-right: 5px;
    float: right;
    cursor: pointer;
}

#maindisplay {
    /*border-style: solid;*/
    background-color: #f0f0f0;
    margin: 10px;
    padding: 5px;
    /*width: 80%;*/
}

#datebox {
    /*display: table;*/
    /*inline-block;*/
    background-color: lightgrey;
    /*rgba(10,110,180,250);*/
    text-align: center;
    padding: 5px 10px 5px 10px;
    width: max-content;
    /*auto;*/
    /*80%;*/
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
    border-radius: 16pt;
    margin: -5px 0 0 -10px;
}

#fortune_text {
    padding: 15px;
    font-family: "Times New Roman", Times, serif;
}

#banner {
    position: sticky;
    /*fixed; */
    background-color: #fafbfc;
    top: 0;
    bottom: 0;
    right: 10px;
    left: 10px;
    /*width: 80%;*/
    margin: 0px;
    /*height: 100px;*/
    /*z-index: 10;*/
    /* margin: 150px; */
    /*margin-right: 180px;*/
    padding: 0px;
    /*margin-bottom: 100px;*/
    /*margin-left: 10px;*/
    /*font-family: monospace;*/
    /*font-size: 75%;*/
    /*text-align: center;*/
}

.navbar {
    list-style-type: none;
    margin: 5px;
    padding: 2px 1px 2px 1px;
}

.navbar li {
    display: inline;
    margin: 0px;
    padding: 5px;
    color: #0a0af0;
    /*color: blue;*/
    /*width: 250px;*/
}

.noaction {
    font-family: monospace;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.35);
    border-radius: 16pt;
    text-shadow: black 0px 1px 1px;
    /*color: white;*/
    /*background-color: #a0110f;*/
    cursor: none;
    padding-bottom: 0px;
    border-bottom: 2px solid transparent;
    /*border-image:linear-gradient(90deg, #77ff77 2%, #FF248C 100%);*/
    border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    /*background-image:linear-gradient(45deg, yellow 2%, white 100%);*/
    border-image-slice: 0 0 1 0;
    opacity: .8;
    color: rgba(0, 255, 0, 80%);
}

.action:hover {
    background-color: #0a0af0;
    /*#00b;*/
    /*#007fff; */
    color: white;
    border-radius: 16pt;
    border-color: #fff;
    text-shadow: yellow 0px 1px 1px;
}

.action {
    /*border-style: solid;*/
    border-color: #000;
    cursor: pointer;
    font-family: monospace;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
    border-radius: 16pt;
    text-shadow: black 0px 1px 1px;
}

#menu {
    list-style-type: none;
    /*margin: 10px -25px 0px 0px;*/
}

.dropdown-content {
    display: none;
    position: absolute;
    margin: 17px 0px 0px -55px;
    padding: 0px;
}

.dropdown:hover .dropdown-content {
    display: inline;
    /*block;*/
}

.ui-menu {
    width: max-content;
    text-shadow: black 0px 1px 1px;
}

.ui-widget.ui-widget-content {
    border-style: none;
}

.ui-widget-content .ui-state-active,
.ui-button.ui-state-active:hover {
    border: none;
    background: #0a0af0;
    /*font-weight:normal;color:#fff*/
    /*border-radius:16pt;*/
    text-shadow: yellow 0px 1px 1px;
}

#menu li {
    margin: 0px;
    padding: 0px;
    font-size: 90%
}

.login {
    float: right;
}

/*
.login:hover {
    font-weight:normal;
    color:#fff;
    background: #b00;
    text-shadow: yellow 0px 1px 1px;
}
*/
.acab {
    font-family: Raleway;
}

.physicsworld {
    margin: 0px 15px 0px 15px;
    padding: 0px 10px 0px 10px;
    border-style: solid;
    background-color: #f5f5f5;
}

.hubbleContent {
    margin: 0px 15px 0px 15px;
    padding: 0px 10px 0px 10px;
    background-color: #f5f5f5;
}

#slackware {
    font-size: 90%;
    width: 450px;
    height: 300px;
    overflow: scroll;
    margin: 0px;
    padding: 0px;
    background-color: #f5f5f5;
}

.submitWikiButton {
    border-radius: 16pt;
    font-weight: bold;
}

#wikiDisplay {
    margin: 0px 15px 0px 15px;
    padding: 0px 10px 0px 10px;
    background-color: #f5f5f5;
}

.nasaRSS {
    margin: 0px 15px 0px 15px;
    padding: 0px 10px 0px 10px;
    background-color: #f5f5f5;
}

.logout {
    float: right;
}

.user {
    float: right;
}

/* background image by Cole Bemis <https://feathericons.com> */
.usersvg {
    padding-left: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left;
}

/* background image by Cole Bemis <https://feathericons.com> */
.logoutsvg {
    padding-left: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-log-out'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: left;
}

button[type="submit"] {
    border: none;
    background-color: #fafbfc;
    ;
    border-radius: 16pt;
}

button[type="submit"]:hover {
    color: red;
}

.imagedrop {
    position: relative;
    display: inline-block;
}

.imagedrop-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.imagedrop:hover .imagedrop-content {
    display: block;
}

.styled {
    cursor: pointer;
    border: 0;
    line-height: 1.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgb(200 50 50 / 100%);
    background-image: linear-gradient(to top left,
            rgb(0 0 0 / 20%),
            rgb(0 0 0 / 20%) 30%,
            rgb(0 0 0 / 0%));
    box-shadow:
        inset 2px 2px 3px rgb(255 255 255 / 60%),
        inset -2px -2px 3px rgb(0 0 0 / 60%);
}

.styled:hover {
    background-color: rgb(255 0 0 / 100%);
}

.styled:active {
    box-shadow:
        inset -2px -2px 3px rgb(255 255 255 / 60%),
        inset 2px 2px 3px rgb(0 0 0 / 60%);
}

.nonstyled {
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #555;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgb(220 220 220 / 100%);
    background-image: linear-gradient(to top left,
            rgb(0 0 0 / 20%),
            rgb(0 0 0 / 20%) 30%,
            rgb(0 0 0 / 0%));
    box-shadow:
        inset 2px 2px 3px rgb(255 255 255 / 60%),
        inset -2px -2px 3px rgb(0 0 0 / 60%);
}

textarea {
    width: 100%;
}

.container { width: 100%; flex-grow: 1; height: 100vh; display: flex; flex-direction: column; }

span.sender {
  color: #ff0000;
  background-color: #e1f1fd;
  float: right;
  width: 75%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.32);
  border-radius: 10px;
  padding: 10px 20px;
  margin: 5px;
}

span.other {
  /*color: #05f550;*/
  background-color: #f5f5f5;
  float: left;
  width: 75%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.32);
  border-radius: 10px;
  padding: 10px;
}

/*ul.userlistbox {
  display: flex;
  align-items: stretch; *//* Makes flex items stretch to fill the container's height */
/*}*/

.userlistbox {
	border: 1px solid blueviolet;
  margin: 2px;
  padding: 5px;
	list-style: none;
  /*line-height: 1.1;*/
  /*overflow-y: auto;*/
  /*overflow-x: hidden;*/
}

.chatbox {
	grid-area: chatbox;
	border: 1px solid black;
	margin: 0;
	overflow: scroll;
	padding: 1px;
	padding: 0.1rem 0.5rem;
	white-space: pre-wrap;
	max-height: 575px;
}