:root {
	--background-color:grey;
	--border-style:1px solid black;
	--sidebar-background-color:#00BEFD;
	--header-height:20vh;
}

*, *::before, *::after {
  box-sizing: border-box;
}
/* 2. Remove default margin */
* {
  margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
  
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

body {
	
	/*
	background-color:var(--background-color);
	*/
	display:grid;
	grid-template:repeat(7, 1fr) / repeat(7, 1fr);
	height:100vh;
}

sidebar {
	background-color:var(--sidebar-background-color);
	display:grid;
	grid-column:1 / 2;
	grid-row:1 / 8;
	height:100vh;
	
}

sidebar > div{
	flex:1;
	color:white;
	margin:3%;
	display:flex;
	align-items:center;
	justify-content:center;
}

sidebar > div:hover{
	background-color:#00BEDB;
}

sidebar:nth-child(1){
	flex:2;
}

a {
	display:flex;
	text-decoration:none;
	color:white;

}

header {
	display:grid;
	grid-template-columns: 45px repeat(4, 1fr) 15% 15% 15%;
	grid-template-rows:1fr 15px 1fr;
	grid-column:2 / 8;
	grid-row:1 / 2;
  	box-shadow:inset 0 -2em 2em rgb(0 200 0 / 10%);
  	height:var(--header-height);
}

#search {
	grid-column:2/7;
	grid-row:1/2;
	display:flex;
	align-items:center;
	justify-content:center;
}

#searchform {
	width:100%;
	display:flex;
	
}

button {
	background:none;
	border:none;
	cursor:pointer;
}

#searchform input{
	border-radius:14px;
	border:0.4px solid grey; 
	width:70%;
	background-color:grey;
	color:white;
}

#notification {
	grid-column:7/8;
	grid-row:1/2;
	display:flex;
	align-items:center;
	justify-content:center;

}

#profile {
	grid-column:8/9;
	grid-row:1/2;
	display:flex;
	align-items:center;
	justify-content:center;

}

#profilewelcome{
	grid-column:3/4;
	grid-row:3/4;

}

#addnew {
	display:flex;
	align-items:center;
	justify-content:center;
	grid-column:6/7;
	grid-row:3/4;
}

#addnew a {
	background-color:#07E6BA;
	border-radius:15px;
	color:white;
	cursor:pointer;
	width:50%;
	height:60%;
	display:flex;
	align-items:center;
	justify-content:center;
}

#share a {
	background-color:#07E6BA;
	border-radius:15px;
	color:white;
	cursor:pointer;
	width:50%;
	height:60%;
	display:flex;
	align-items:center;
	justify-content:center;
}


#share {
	display:flex;
	align-items:center;
	justify-content:center;
	grid-column:7/8;
	grid-row:3/4;

}

#upload a {
	background-color:#07E6BA;
	border-radius:15px;
	color:white;
	cursor:pointer;
	width:50%;
	height:60%;
	display:flex;
	align-items:center;
	justify-content:center;
}

#upload {
	display:flex;
	align-items:center;
	justify-content:center;
	grid-column:8/9;
	grid-row:3/4;

}

main {
	display:grid;
	grid-column:2 / 8;
	grid-row:2 / 8;
	overflow:scroll;
	grid-template-columns: 5% repeat(3, 1fr) 5% repeat(3, 1fr) 5% repeat(2, 1fr) 5%;
	grid-template-rows:15% repeat(10, 1fr) 15%;
	height:calc(100vh - var(--header-height));
	background-color:#E2E8F0;
}

#text {
	grid-column:2 / 3;
	grid-row:1 / 2;
	display:flex;
	text-align:center;
	justify-content:center;
	align-items:center;
}

.card{
	border-left:3px solid orange;
	border-radius:5px;
	grid-column:2 / 5;
	grid-row:2 / 7;
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	grid-template-rows:5% 1fr 2fr 15% 1fr; 
	background-color:white;
}

.card h3 {
	grid-column:2 / 6;
	grid-row:2 / 3;
}

.card p {
	grid-column:2 / 6;
	grid-row:3 / 4;
	overflow:hidden;
}

#likeicon{
	grid-column:4 / 5;
	grid-row:5 / 6;
}

#seenicon{
	grid-column:5 / 6;
	grid-row:5 / 6;
}

#shareicon{
	grid-column:6 / 7;
	grid-row:5 / 6;
}

.card2 {
	grid-column:6 / 9;
	grid-row:2 / 7;
}

.announcement{
	grid-column:10 / 12;
	grid-row:2 / 10;
	display:grid;
	grid-template-columns:5px 2fr 5px;
	grid-template-rows:5% 1fr 5% 1fr 5% 1fr 5%; 
}
#firstann{
	grid-column:2 / 3;
	grid-row:2 / 3;
	overflow:hidden;
	border-bottom:1px solid grey;
}

#secondann{
	grid-column:2 / 3;
	grid-row:4 / 5;
	overflow:hidden;
	border-bottom:1px solid grey;
}

#thirdann{
	grid-column:2 / 3;
	grid-row:6 / 7;
	overflow:hidden;
}