:root {
    --white-clr: #ffffff;
    --blue-clr: #1992d4;
    --gray-clr: #e2e8f0;
    --yellow-clr: #f0b429;

    --extra-large-size: 4rem;
    --near-extra-large-size: 3.5rem;
    --very-large-size: 3rem;
    --near-very-large-size: 2.5rem;
    --mid-very-large-size: 2rem;
    --large-size: 1.5rem;
    --near-large-size: 1.3rem;
    --mid-large-size: 1.2rem;
    --base-size-plus: 1.1rem;
    --base-size: 1rem;
    --near-base-size: 0.9rem;
    --small-size: 0.8rem;
    --very-small-size: 0.6rem;
    --extra-small-size: 0.4rem;
    --super-small-size: 0.2rem;

    --border-circle: 50%;
    --border-circle-left-and-right: 9999px;


}

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

* {
    padding: 0;
    margin: 0;
}


body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: "Roboto", sans-serif;
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px minmax(calc(100vh - 150px), 1fr);
  grid-template-areas: 
  "sidebar header"
  "sidebar main"
  ;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

.header {
  display: grid;
  background-color: var(--white-clr);
  grid-area: header;
  padding: var(--mid-large-size) var(--mid-very-large-size);
  gap: var(--very-small-size);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.header svg {
  width: var(--near-large-size);
}

.header svg:hover {
  fill: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.header .top {
  display: grid;
  grid-template-columns: 55% 45%;
}

.header .top > * {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
}

.header .top .left {
  display: grid;
  grid-template-columns: 5% 95%;
}

.header .top form input[type="search"] {
  background-color: var(--gray-clr);
  border: none;
  outline: none;
  border-radius: var(--border-circle-left-and-right);
  padding: var(--super-small-size) var(--very-small-size);
}

.header .top form input[type="search"]:focus {
  border: 1px solid var(--blue-clr);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
}

.header .top .right {
  gap: var(--large-size);
  justify-content: flex-end;
  padding: 0 var(--base-size);
}

.header .top .right img {
  width: var(--near-very-large-size);
  height: var(--near-very-large-size);
  border-radius: var(--border-circle);
}

.header .top .right span {
  font-weight: 500;
}

.header .bottom {
  display: grid;
  grid-template-columns: 68% 32%;
}

.header .bottom .left {
  display: grid;
  grid-template-columns: max-content auto;
  column-gap: var(--small-size);
  justify-items: flex-start;
  align-items: center;
}

.header .bottom .left .text {
  display: grid;
}

.header .bottom .left .text span:first-of-type {
  font-size: var(--small-size);
  font-weight: 500;
}

.header .bottom .left .text span:last-of-type {
  font-size: var(--mid-large-size);
  font-weight: 700;
}

.header .bottom .left img {
  width: var(--near-extra-large-size);
  height: var(--near-extra-large-size);
  border-radius: var(--border-circle);
}

.header .bottom .right {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  align-items: center;
  justify-content: flex-end;
  column-gap: var(--large-size);
}

.header .bottom .right button {
  background-color: var(--blue-clr);
  border-radius: var(--border-circle-left-and-right);
  color: var(--white-clr);
  border: none;
  padding: var(--super-small-size) var(--large-size);
  cursor: pointer;
}

.header .bottom .right button:hover {
  opacity: 0.8;
}

.sidebar {
    background-color: var(--blue-clr);
    grid-area: sidebar;
    display: grid;
    align-content: flex-start;
    padding: var(--base-size);
    row-gap: var(--mid-very-large-size);
    height: 100vh;
    position: fixed;
    top: 0;
    width: 250px;
}

.sidebar ul svg {
  width: var(--base-size-plus);
  fill: var(--white-clr);
}

.sidebar a {
  text-decoration: none;
} 

.sidebar ul span {
  color: var(--white-clr);
  font-weight: 600;
  font-size: var(--base-size);
}


.sidebar .sidebar-title a {
  display: grid;
  grid-template-columns: 25% 75%;
  align-items: flex-end;
}

.sidebar .sidebar-title svg {
  width: var(--mid-very-large-size);
  fill: var(--white-clr);
  justify-self: center;
}

.sidebar .sidebar-title span {
  font-weight: bold;
  font-size: var(--mid-large-size);
  user-select: none;
  color: var(--white-clr);
}

.sidebar .first-navigation-links ul li a,
.sidebar .second-navigation-links ul li a {
  display: grid;
  grid-template-columns: 25% 75%;
  align-items: start;
  border-radius: var(--extra-small-size);
  padding: var(--extra-small-size);
}

.sidebar .first-navigation-links ul li a:hover,
.sidebar .second-navigation-links ul li a:hover {
  background-color: rgba(9, 45, 65, 0.11);
}

.sidebar .first-navigation-links ul,
.sidebar .second-navigation-links ul {
  list-style-type: none;
}

.sidebar .first-navigation-links ul li svg:first-child,
.sidebar .second-navigation-links ul li svg:first-child{
  justify-self: center;
  height: 100%;
}

.main {
    background-color: var(--gray-clr);
    grid-area: main;
    display: grid;
    grid-template-columns: 70% 29%;
    padding: var(--base-size);
    column-gap: var(--mid-large-size);
}

.main .left h1 {
  font-size: var(--base-size);
  margin-bottom: var(--very-small-size);
}

.main .left .projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--mid-large-size);
}

.main .left .projects .project-box {
  background-color: var(--white-clr);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  border-radius: var(--extra-small-size);
  display: grid;
  row-gap: var(--base-size);
  border-left: 6px solid var(--yellow-clr);
  padding: var(--large-size) var(--mid-large-size) var(--mid-large-size) var(--mid-large-size);
  align-content: space-between;
}


.main .left .projects .project-box .text h2 {
  font-size: var(--base-size);
  font-weight: 500;
}

.main .left .projects .project-box .text p {
  font-size: var(--small-size);
  opacity: 0.8;
}

.main .left .projects .project-box .icons {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: flex-end;
}

.main .left .projects .project-box .icons svg {
  width: var(--near-large-size);
  margin-right: var(--small-size);
  cursor: pointer;
}

.main .left .projects .project-box .icons svg:hover {
  opacity: 0.8;
}

.main .right {
  padding-right: var(--base-size);
}

.main .right .top h1{
  font-size: var(--base-size);
  margin-bottom: var(--very-small-size);
} 


.main .right .top .announcements {
  background-color: var(--white-clr);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  border-radius: var(--extra-small-size);
  padding: var(--mid-large-size);
  margin-bottom: var(--base-size);
}

.main .right .top .announcements .text-box:nth-child(1), 
.main .right .top .announcements .text-box:nth-child(2) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.377);
  padding-bottom: var(--small-size);
  margin-bottom: var(--small-size);
}

.main .right .top .announcements .text-box h2 {
  font-size: var(--small-size);
  font-weight: 600;
}

.main .right .top .announcements .text-box p {
  opacity: 0.8;
  font-size: 0.75rem;
} 

.main .right .bottom h1 {
  font-size: var(--base-size);
  font-weight: 500;
  margin-bottom: var(--small-size);
}

.main .right .bottom .trending-box {
  background-color: var(--white-clr);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  border-radius: var(--extra-small-size);
  padding: var(--mid-large-size);
}

.main .right .bottom .trending-box .trending-info {
  display: grid;
  grid-template-columns: var(--near-very-large-size) auto;
  align-items: center;
  margin-bottom: var(--very-small-size);
  column-gap: var(--very-small-size);
}

.main .right .bottom .trending-box .trending-info h2 {
  font-size: var(--small-size);
  font-weight: 500;
} 

.main .right .bottom .trending-box .trending-info p {
  font-size: var(--small-size);
  opacity: 0.8;
} 

.main .right .bottom .trending-box .trending-info img {
  width: var(--near-very-large-size);
  height: var(--near-very-large-size);
  border-radius: var(--border-circle);
}