@import "https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";

* {
   margin: 0px;
   padding: 0;
   box-sizing: border-box;
   font-family: "Josefin Sans", sans-serif;
}

body {
   font-size: 14px;
}

.container {
   display: grid;
   grid-template-columns: 1fr 4fr;
}

.sidebar {
   grid-row: 1 / 3;
   background-color: rgb(14, 70, 189);
   height: 870px;
   color: white;
   padding-left: 10px;
   justify-items: start;
   display: grid;
   grid-template-columns: 70px 150px;
   grid-template-rows: 65px 400px 200px;
}

.sidebar .first {
   grid-column: 1 / 3;
   display: grid;
   grid-template-columns: 1fr 4fr;
   gap: 20px;
   margin: 40px 0;
}

.sidebar .second {
   grid-row: 3 / 4;
   grid-column: 1 / 3;
   display: grid;
   gap: 0 20px;
   grid-template-columns: 1fr 4fr;
}

.sidebar img:nth-of-type(2) {
   grid-row: 2 / 3;
}

.sidebar img:nth-of-type(3) {
   grid-row: 3 / 4;
}

.sidebar img:nth-of-type(4) {
   grid-row: 4 / 5;
}

.sidebar img:nth-of-type(5) {
   grid-row: 5 / 6;
}

.sidebar img:nth-of-type(6) {
   grid-row: 6 / 7;
}

.sidebar img:nth-of-type(7) {
   grid-row: 7 / 8;
}

.sidebar img:nth-of-type(8) {
   grid-row: 8 / 9;
}

.sidebar img:nth-of-type(9) {
   grid-row: 9 / 10;
}

.sidebar img:nth-of-type(10) {
   grid-row: 10 / 11;
}

.sidebar > * {
   padding: 10px;
   padding-left: 20px;
   padding-bottom: 0px;
}

.sidebar h1 {
   font-weight: 900;
   align-self: center;
   justify-self: start;
}

.sidebar a {
   color: white;
   justify-self: start;
   align-self: center;
   font-size: 20px;
   font-weight: 900;
   text-decoration: none;
}

.sidebar a:hover {
   text-decoration: underline;
}

.sidebar img {
   height: 25px;
   align-self: center;
   justify-self: end;
}

#image1 {
   height: 60px;
   align-self: center;
   justify-self: end;
   grid-column: 1 / 2;
}

#dash {
   justify-self: right;
}

.header {
   background-color: rgb(1, 53, 165);
   color: white;
   padding-bottom: 10px;
   display: grid;
   grid-template-rows: repeat(2, 1fr);
   align-items: center;
}

.header .top {
   display: grid;
   grid-template-columns: 1fr 10fr 4fr;
   align-items: center;
}

.top ul {
   justify-content: left;
   gap: 10px;
}

label {
   justify-self: end;
   padding-right: 10px;
}

input {
   border-radius: 15px;
   padding: 0 10px;
   height: 1.8rem;
   width: 30rem;
   border: 0;
   background-color: rgb(226, 226, 226);
}

.header .bottom {
   display: grid;
   grid-template-columns: 1fr 5fr 3fr;
}

.bottom img {
   grid-column: 1 / 2;
   grid-row: 1 / 3;
   margin: 10px;
   justify-self: end;
}

.bottom h4,
h2 {
   grid-column: 2 / 3;
   margin: 10px;
   margin-bottom: 0px;
}

.bottom h4 {
   align-self: end;
}

ul {
   display: flex;
   gap: 20px;
   align-items: center;
}

.bottom button {
   grid-row: 1 / 2;
   justify-self: end;
   background-color: rgb(0, 149, 255);
   color: white;
   border: 0;
   width: 70px;
   height: 28px;
   border-radius: 10px;
   font-family: "Josefin Sans", sans-serif;
   font-weight: 900;
}

.content {
   background-color: rgb(117, 161, 255);
   height: 700px;
   padding: 10px 3rem 50px 1rem;
   display: grid;
   grid-template-columns: 3fr 1fr;
   grid-template-rows: 1fr 5fr 4fr;
   gap: 10px;
}

.content > p {
   align-self: end;
   font-size: 20px;
   font-weight: 900;
}

.project {
   grid-row: 2 / 4;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
   gap: 15px;
}

.project > div {
   padding: 5px;
   background-color: rgba(255, 255, 255, 0.869);
   border-radius: 5px;
   border-left: 10px solid rgb(255, 196, 0);
   display: grid;
   grid-template-rows: 1fr 3fr 1fr;
   grid-template-columns: repeat(2, 1fr);
}

.project p:nth-of-type(1) {
   padding: 10px;
   font-size: 16px;
   color: rgb(29, 141, 240);
   grid-column: 1 / 3;
   align-self: start;
}

.project h2:nth-of-type(1) {
   grid-column: 1 / 3;
   align-self: flex-end;
}

.project > div ul {
   padding-right: 10px;
   grid-column: 2 / 3;
   justify-self: end;
}

.announcement {
   grid-row: 2 / 3;
   padding: 10px;
   background-color: white;
   display: flex;
   flex-direction: column;
   border-radius: 5px;
   justify-content: space-around;
}

.announcement div:nth-child(-n + 2) {
   margin: 10px;
   padding-bottom: 20px;
   border-bottom: 1px solid black;
}

.announcement h3 {
   padding-bottom: 10px;
}

.announcement div:nth-child(3) {
   margin: 10px;
}

.trending {
   padding-top: 20px;
   grid-row: 3 / 4;
   background-color: white;
   display: grid;
   grid-template-columns: 1fr 4fr;
}

.trending img {
   justify-self: end;
   padding-right: 5px;
   height: 30px;
   border-radius: 50%;
}

.trending p {
   padding-top: 0px;
}

.trending img:nth-of-type(2) {
   grid-row: 2 / 3;
}

.trending img:nth-of-type(3) {
   grid-row: 3 / 4;
}

.trending img:nth-of-type(4) {
   grid-row: 4 / 5;
}