/* CSS for COMP 1930 project. */


/*
----- Font Links -----
*/
@import url('https://fonts.googleapis.com/css?family=Mitr:500');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Sanchez');


/*
----- Div Container Stylings -----
*/
body {
  margin: 0;
  font-family: 'roboto';
  height: auto;
}


/*
----- Grid Stylings -----
*/
.grid {
  display: grid;
  grid-template-rows: 100px 50px; 
  /* change width of columns here, should it be responsive? idk*/
  grid-template-columns: 200px auto; 
  overflow-x: hidden;
  height: auto;
}

.header {
  display: flex;
  grid-area: 1/1/2/3;
  background-color: #AAC4D1;
}

.navbar {
  grid-area: 2/1/3/3;
  background-color: #f9f9f9;
}

.sidebar {
  grid-area: 3/1/4/2;
  background-color: #f9f9f9;
  height: 100%;
}

.content {
  grid-area: 3/2/4/3;
  background-color: #dadfe1;
  padding: 5vh;
  min-height: 80vh;
  height: auto;
  overflow-y: auto;
  /** CHANGE FONT OF CONTENT HERE **/
  font-family: "roboto", Gadget, sans-serif;
}

.header #name a {
  color: white;
}

/*
----- Homepage Stylings -----
*/
.homepage_content {
  grid-area: 3/1/4/3;
  background: url('../img/index_background.jpg') no-repeat fixed center;
  background-size: 120%;
  background-position: -100px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

form.home-search {
  flex-basis: 45%;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  border-radius: 50px;
  border: 0px solid white;
}

form.home-search:hover {
  box-shadow: 0px 0px 10px #b3b3b3;
  transform: scale(1.0005);
  background-color: rgba(255, 255, 255, 0.9)
}

form.home-search input[type=text] {
  padding-left: 10px;
  font-size: 25px;
  border: 0px solid grey;
  border-radius: 10px;
  width: 85%;
  font-family: 'roboto';
  background-color: rgba(255, 255, 255, 0);
}

form.home-search button {
  float: right;
  color: #BAE1F2;
  font-size: 25px;
  border: 0px solid grey;
  border-left: none;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0);
}

form.home-search button:hover {
  color: #64C2EC;
}


/*
----- Navbar Stylings -----
*/
.navbar ul {
  align-self: center;
  list-style-type: none;
  display: inline;
  padding: 0;
  margin: 0;
}

.navbar #search-container {
  float: right;
  padding: 0.5em;
}

#search-container input[type=text] {
  padding: 0.5em;
  margin-top: 0em;
}

#search-container button {
  background-color: #f9f9f9;
  border: none;
}

.navbar #active {
  background-color: #64C2EC;
}

.navbar #active:hover {
  background-color: #64C2EC;
}

.navbar ul li {
  float: left;

}

.navbar ul li:hover {
  background-color: #dadbdf;
}

.navbar li a {
  display: block;
  text-align: center;
  padding: 1em 1.25em 1em 1.25em;
}


/*
----- Header Stylings -----
*/
.header #name {
    margin: auto;
    font-family: "Sanchez", Gadget, sans-serif;
    font-size: 50pt;
}

.header #logo {
    height: 75px;
    width: auto;
    margin: auto;
    margin-left: 5%;
}

a:link{
    color: black;
    text-decoration: none;
}

a:visited{
    color: black;
    text-decoration: none;
}

.header .account {
  padding: 1em;
  margin: auto;
  position: relative;
  margin-right: 5%;
  background-color: #F5C401;
  box-shadow: 2px 5px 25px #888888;  
  border: none;
  color: white;
  font-family: 'roboto';
}

.header .account:active {
  box-shadow: none;
  color:white;
}

.header #empty {
  background-color: #AAC4D1;
  box-shadow: none;
}


/*
----- Sidebar Stylings -----
*/
.sidebar ul {
  list-style-type: none;
  margin-left: -10%;
  display: block;
}

.sidebar #sidenav-headings {
  font-size: 18pt;
  font-weight: bold;
}

.sidebar li {
  padding: 0.5em;
  display: block;
}

.sidebar li:hover{
  background-color: #dadbdf;
}

.sidebar li:active {
  background-color: rgb(212, 212, 233);
}

#sidebar-logout {
  padding: 0.5em;
  margin-left: auto;
  background-color: rgb(238, 83, 83);
  box-shadow: 5px 10px 25px #888888;
  
}

#sidebar-logout:active {
  box-shadow: none;
  color:white;
}


/*
----- LANDING PAGE STYLNGS -----
*/
#landing {
  /*display: flex;*/
  /*align-items: center;*/
  justify-content: center;
  font-size: 3vw;
  background-color: #dadfe1;
}

#greeting {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5vw;
  border-radius: 10px;
  height: 28%;
  box-shadow: 0px 0px 5px #888888;
}

#stitch {
  margin-top: 2vw;
  height: 18vw;
  float: right;
}


/*
----- CREATE POSTINGS PAGE STYLNGS -----
*/
.hidden-unless-selected {
  display: none;
}

#post-creation-form {
  background-color: white;
  padding: 2em;
  width: 60%;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #888888;
  margin: auto;
}

#post-creation-form label {
  display: inline-block;
  margin-top: 2vh;
  font-size: 15pt;
}

#post-creation-form input[type=submit] {
  border: none;
  padding: 2vh;
  font-size: 13pt;
  margin-top: 1em;
  width: 100%;
  background-color: #64c2ec;
  color: white;
  box-shadow: 0px 0px 2px 1px #d7d7d7; 
}

.content #post-creation-form #description {
  height: 20vh;
  width: 98.5%;
}

.content #post-creation-form input[type=text]{
  padding: 1em;
  width: 95%;
  vertical-align: text-top;
}

.page-title {
  display: block;
  margin: 0;
  font-size: 20pt;
}

/*
----- VIEW POSTINGS PAGE STYLINGS -----
*/

.posts {
  background-color: white;
  font-size: 12pt;
  border: 1px solid #dadbdf;
  margin: 1em;
  padding: 1em;
}

.posts:hover {
  box-shadow: 0px 0px 2px 2px #d7d7d7;
}

.post-container {
  margin-bottom: 1em;
  height: 35%;
  padding: 1em;
  border-radius: 10px;
  font-size: 20pt;
  background-color: white;
  overflow-y: scroll;
  box-shadow: 0px 0px 5px #888888;
}

/*
----- PREVIEW PAGE -----
*/
.edit {
  padding: 1vw;
  background-color: white;
}

#post-preview {
  background-color: white;
  padding: 2em;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #888888;
}

#post-title {
  font-size: 20pt;
  padding: 0em;
  margin: 0em;
}