:root{
    --font-family: 'Arial', sans-serif;
    --primary-color: darkgrey;
    --secondary-color: #13d4a0;
    --bg-color: #f5f5f5;
    --text-color: #333;
    --spacing-small: 8px;
    --spacing-medium: 16px;
    --spacing-large: 24px;
    --font-size-small: 12px;
    --font-size-medium: 16px;
    --font-size-large: 20px;

}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}
.homepagecontainer {
  height: 100vh;
  gap:var(--spacing-medium);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-areas:
    "navmenu navmenu navmenu"
    "header header header"
    "content1 content2 content3"
    "content4 content5 content6"
    "content7 content8 content9"
    "footer footer footer";
}
.navmenu {
  width:100%;
  position: fixed;
  padding: var(--spacing-large);
  background-color: var(--secondary-color);
  grid-area: navmenu;
}
.menu-list{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position:fixed;
  top:0px;
  right:20px;
  gap: 20px;
}
.menu-list li{
  text-decoration: none;
  list-style: none;
}
.logo{
  position: fixed;
  top: 0px;
  left: 20px;
  width: 50px;
  height: auto;
}
.header {
  background-color: var(--primary-color);
  padding: var(--spacing-medium);
  grid-area: header;
  color: var(--text-color);
}
.content1 {
  background-color: #d41414;
  padding: var(--spacing-medium);
  grid-area: content1;
}
.content2 {
  background-color: #230a68;
  padding: var(--spacing-medium);
  grid-area: content2;
}
.content3 {
  background-color: #696161;
  padding: var(--spacing-medium);
  grid-area: content3;
}
.content4 {
  background-color: #a42c2c;
  padding: var(--spacing-medium);
  grid-area: content4;
}
.content5 {
  background-color: #a42c2c;
  padding: var(--spacing-medium);
  grid-area: content5;
}
.content6 {
  background-color: #a42c2c;
  padding: var(--spacing-medium);
  grid-area: content6;
}
.content7 {
  background-color: #a42c2c;
  padding: var(--spacing-medium);
  grid-area: content7;
}
.content8 {
  background-color: #a42c2c;
  padding: var(--spacing-medium);
  grid-area: content8;
}
.content9 {
  background-color: #a42c2c;
  padding: var(--spacing-medium);
  grid-area: content9;
}
.footer {
  background-color: #1a8a47;
  padding: var(--spacing-small);
  grid-area: footer;
}