/*cssreset{{{*/
:root{
  --color1:rgb(2, 21, 38);
  --color2:rgb(3, 52, 110);
  --color2v:rgb(0, 48, 104);
  --color3:rgb(110, 172, 218);
  --color4:rgb(226, 226, 182);
  --color5:rgb(0, 128, 128);
  --color6:rgb(64, 224, 208);
   font-family: Helvetica;
}

body{
  background-color: var(--color1);
  color:white;
}
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  5. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}

/*
  7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/*
  8. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

ul{
  padding:0;
}
li{
 list-style-type: none;
}
/*}}}*/

/*main+sidebar{{{*/
.container{
  display:grid;
  grid-template-columns: max(220px,20%) auto;
  height:max(100vh,100%);
}

.sidebar{
  /*background-color:rgb(17 24 39);*/
  background-color:var(--color3);
  grid-column:1/2;
  padding:30px;
  display:flex;
  flex-flow:column;
  gap:30px;
  height:max(100vh,100%);
}

.sidebar-logo{
  display:flex;

}
 .logo{
  width: 30px;
  height: auto;
  object-fit: cover;
 }

 .sidebar-logo ul{
   align-content:center;
   padding:5px 10px 0px;
   font-size:20px;
   font-weight:700;
 }

 .menus li,
 .setups li{
   font-size:18px;
 }

 .sidebar li{
   padding-left:40px;
 }

/*}}}*/

/*nonsidebar{{{*/
.non-sidebar{
  grid-column:2/3;
  background-color:var(--color1);
  grid-template-rows:70px 80px auto;
  gap:0;
}
/*}}}*/

/*topmenucss{{{*/
.topmenu{
  background-color:var(--color2);
  height:50px;
  grid-row:1/2;
  display:grid;
  grid-auto-flow: column;
  justify-content:space-between;
  align-items:center;
  padding:10px 10px;
}
.top-profile{
  display:flex;
}

.topmenu img{
  border-radius:35px;
  height:35px;
  width: 35px;
  margin:0 10px;
 }
.topmenu li{
  align-content:center
 }

 form{
   align-content:center;
 }
/* Style the submit button */
form.search button {
  width: 20%;
  border-left: none; /* Prevent double borders */
  cursor: pointer;
}
.topmenu button {
  float: left;
  width: 100%;
  background-color: var(--color2);
  color: white;
  border: 1px solid var(--color2);
  border-left: none; /* Prevent double borders */
  cursor: pointer;
}

 form.search input[type=text] {
  border: 1px none;
  float: left;
  width: 80%;
  height:50%;
  background:var(--color2v);
  color:white;
  align-content:center;
}
 .topmenu button{
   height:5px;
 }
 .fa{
   font-size:2px;
   height:1px;
   cursor:pointer;
 }
.searchmenu{
  padding:0;
}
/*}}}*/

/*mainmenu{{{*/
.mainmenu{
  background-color:var(--color2);
  grid-row:2/3;
  display:grid;
  grid-template-columns: auto auto repeat(3,min(80px));
  padding:5px 15px;
  grid-template-rows: repeat(2,auto);
  gap:5px;
  align-items:center;
}
.mainmenu-profile{
  display:grid;
  grid-template-columns: 80px auto;
  align-content:center;
  align-items:center;
}
.mainmenu img{
  width:60px;
  height:60px;
  border-radius:60px;
  grid-column:1/2;
  grid-row:1/3;
 }

.mainmenu h2{
  font-size: 15px;
  grid-column:2/3;
  grid-row:1/2;
}

.mainmenu h1{
  grid-row:2/3;
  grid-column:2/3;
  font-size: 15px;
}
.new-post{
  grid-column:3/4
}
.upload{
  grid-column: 4/5;
}
.share{
  grid-column: 5/6;
  grid-row:1/3;
}

.share,
.upload,
.new-post{
  grid-row:1/3;
  align-self:center;
  align-items:center;
  justify-content:center;
  padding:5px 8px;
  /*color:var(--color2);*/
  color:white;
  background:var(--color3);
  border-radius:10px;
  border:none;
  width:80px
 }

/*}}}*/

/*dashboardmain{{{*/
.title{
  font-size:20px;
  padding:5px 0;
}
.dashboard{
  padding:15px;
  display:grid;
  grid-template-columns: auto 280px;
  padding:20px;
  gap:20px;
}

.your-project{
  grid-column:1/2;
}

.article{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: repeat(3,minmax(200px,1fr));
  gap:15px;
}

.article .card {
  background-color: var(--color2);
  color: white;
}

.card p {
  color: white;
  font-weight: normal;
  font-size: 14px;
  padding:10px;
}

.card .title {
  font-size: 18px;
}
/*}}}*/

.title{
  font-weight:2000;
}

/*side dashboard{{{*/
.side-dashboard{
  grid-column:2/3;
  display:grid;
  gap:80px;
  grid-template-rows: repeat(2,max(10%,340px)) auto;
  /*background-color: #fff;*/
}

.announce-bar,
.trending-bar{
  /*background-color: red;*/
}

.announce{
  padding-top:4px;
 border-top: 2px solid var(--color1);
 }
.announce-bar{
  grid-row:1/2;
}
.trending-bar{
  grid-row:2/3;
}

.trending-bar div,
.announce-bar div{
  background-color: var(--color2);
 }

.trending-bar>.trend-accounts,
.announce-bar>.announcements{
  padding:10px;
  background-color: var(--color2);
}
.announce-bar>.announcements{
  padding:0 10px 20px;
 }

.accounts{
 display:grid;
 grid-template-columns: 50px auto;
 grid-template-rows: 1fr 1fr;
 padding:5px;
}

.accounts>img{
  border:solid black 0.1px;
  height:35px;
  width:35px;
  grid-row:1/3;
  grid-column:1/2;
  align-self:center;
  border-radius:25px;
}
.accounts>.username{
  grid-row:1/3;
  grid-column:2/3;
}

.accounts>.account-sub{
  grid-row:2/3;
  grid-column:2/3;
}
/*}}}*/

/* TODO:
 * 1. Add profile picture on mainmenu and topmenu
 * 2. Fix Button on mainmenu
 * 3. stylize the uls on dashboard
 * 4. add comment love and bookmark logo on card
 * 6. create a line border between announcements
 * 7. Add logo on trending accounts
 */