@import "variables.css";
@import "news.css";
@import "post.css";

a {
    color: var(--text-link-color);
}
a:hover {
    color: var(--text-link-color-hover);
}

html {font-family: sans-serif; background-color: var(--background-color); width: 100%; color:var(--text-color);}
body {margin:0; width: 100%;}
@media (max-width: 600px) {
	.center-card {width: 90%;}
	main {flex-direction: column;}
	.card {width:90%; margin:auto;}
	#main-nav > a:first-child {display:none;}
	.side {display:none;}
	nav > h1 {display:flex;}
	h1 > a {flex: 1 1 auto;}
	.hide-xs {display:none;}
	.column {flex-wrap:wrap;}
}
@media (min-width: 600px) {
	.center-card {width: 75%;margin:auto;}
}
@media (min-width: 768px) {
	.center-card {width: 55%; margin:auto;}
}
@media (min-width: 889px) {
	.center-card {width: 45%; margin:auto;}
}
@media (min-width: 1400px) {
	.center-card {width:35%; margin:auto;}
}
label {display:block; font-size:1.125em; padding-bottom: 5px;}
.input-help {display:block;}
input, select {padding: 10px; border: 1px solid #000; border-radius: 5px;}
input:focus:invalid {border: 2px solid #ff0000; background-color: #ffdddd;}
input[type=text] {margin: 5px 0px; width:75%;}
input[type=email] {margin: 5px 0px; width:75%;}
input[type=password] {margin: 5px 0px; width:75%;}
input[type=date] {margin: 5px 0px; width:50%;}
input[type=submit] {margin: 5px 0px; width: 25%; background-color: var(--input-submit-background-color); color: #000; cursor:pointer;}
input[type=submit]:hover {background-color:var(--input-submit-background-color-hover);}

#postEntryForm {
    display:flex;
}

#postEntryInput {
    flex-grow:1;
}

#postEntrySubmit {
    width:15%;
}

select {display:block; margin: 5px 0px; width:50%; padding:10px;}
output {display:block;}
.input-help {font-size: 0.8em;}
hr {border:1px solid #fff; width: 75%;}
nav > h1 {display:inline; font-size: 1.5rem;}
h1 > a {text-decoration:none; color:#fff;}

h2 {margin:1px; padding:0px;}
h3 {margin:1px; padding: 0px;}

.fielderror {border:2px solid #ff0000; background-color: #ffdddd;}
#errorlist {color: #eb7a73; font-weight:bold;}

.card {
    display:flex;
    word-wrap:break-word;
    margin-bottom: 1%;
	background-color: var(--card-background-color);
	padding: 10px;
	border-radius:5px;
	font-size: 0.95rem;
	max-width: 100%;
}

.card-body {
    flex: 1 1 auto;
}

nav {background-color: var(--card-background-color); border-bottom: 1px solid #000; margin-bottom: 2%; padding: 10px;}
#main-nav{float:right; margin:0; padding:0px; list-style-type:none;}

header > time {
    font-size: 0.625rem;
}

.flex-wrapper {display:flex; gap:10%;}

.column.side {
    flex:1;
}
.column.middle {
    flex:4;
}

.row {
	display:flex;
	flex-wrap: wrap;
}
.row > * {
	flex-shrink:0;
	width:100%;
	max-width:100%;
}

.profile_wrapper{
  display: flex;
  overflow: auto;
  height:90vh;
  gap: 2%;
}
.profile_info_column {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex:1;
}

.profile_add_friend {text-align:center;}
.profile_add_friend a {font-weight:600;text-decoration:none;}
.profile_posts_column {flex:3;}
.profile_image_container{position:relative;}
.profile_badges {text-align:center;}

#usermenu{list-style-type:none; width:100%; margin:0;}
#usermenu > li {margin-bottom: 5px; background-color: var(--card-background-color); padding: 5px; border-radius:5px; position:relative;}
#usermenu > li:hover {background-color: var(--card-background-color-hover);}
#usermenu > li > a {color: #eee; text-decoration:none;}

#trending{list-style-type:none;}


.dropdown {
  position: relative;
  display: inline-block;

}

.dropdown-content {
  display: none;
  position: absolute;
  left: -140px;
  top: 30px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.show {display: block;}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd;}

.dropbtn:hover {
    cursor:pointer;
}

.chip {
  position:relative;
  float: left;
  color:white;
  padding: 0 10px;
  height: 30px;
  font-size: 1rem;
  line-height: 30px;
  border-radius: 15px;
  margin-right: 5px;
  background-color: var(--chip-background-color);
}

.chip a {
    color:white;
    text-decoration:none;
}

.chip:hover {
    background-color: var(--chip-background-color-hover);
}

.chip img {
  float: left;
  margin: 0 5px 0 -10px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}

/* Margins */

.mb-1 {
	margin-bottom: 1%;
}
.mb-2 {
	margin-bottom: 2%;
}

.mb-3 {
	margin-bottom: 3%;
}

/* Utilities */

.w100 {
    width:100% !important;
}
.w75 {
    width: 75% !important;
}
.w50 {
    width:50% !important;
}
.w25 {
    width: 25% !important;
}

.wauto {
    width: auto !important;
}

.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}