* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    display: grid;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    grid-template-columns: 1fr 70vw 100px;
}

#navbar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: scroll;
}

/* Hide scrollbar for IE, Edge and Firefox */
#navbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

/* Hide scrollbar for Chrome, Safari and Opera */
#navbar::-webkit-scrollbar {
    display: none;
}

#navbar .buttonStyle {
    all: unset;
    text-align: center;
    padding: 1.5rem 0;
    width: 150px;
    margin-top: 1rem;
    margin-left: 1rem;
    background-color: beige;
    color: black;
}

#navbar .buttonStyle:last-of-type {
    margin-bottom: 1rem;
}

.activebutton {
    background-color: blueviolet !important;
    color: white !important;
}

/* A PARTIR D'ICI STYLE POUR GRID LAYOUT */

/* style de base pour le grid container */

.gridlayout {
    border: 1px solid black;
    width: 70vw;
    height: calc(100vh - 2px);
    display: grid;
}

/* style de base pour les grid items */

.griditem {
    font-size: 2rem;
    display: flex;
    align-items:center;
    justify-content:center;
    border-radius: 50px;
}

.griditem:first-of-type {
    background-color: aqua;
}

.griditem:nth-of-type(2) {
    background-color: pink;
}
.griditem:nth-of-type(3) {
    background-color: greenyellow;
}
.griditem:last-of-type {
    background-color: yellow;
}

/* premier style de grid layout */

.gridlayout1 {
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
}

/* deuxième style de grid layout */

.gridlayout2 {
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
}

.gridlayout2 .griditem:first-of-type {
    order: 3;
}

.gridlayout2 .griditem:nth-of-type(2) {
    order: 1;
}

.gridlayout2 .griditem:nth-of-type(3) {
    order: 4;
}

.gridlayout2 .griditem:last-of-type {
    order: 2;
}

/* troisième style de grid layout */

.gridlayout3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.gridlayout3 .griditem:first-of-type {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
}

/* quatrième style de grid layout */

.gridlayout4 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-auto-flow: column;
}

/* cinquième style de grid layout */

.gridlayout5 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.gridlayout5 .griditem:first-of-type {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-column-end: 3;
}

.gridlayout5 .griditem:nth-of-type(2) {
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 1;
    grid-column-end: 4;
}

.gridlayout5 .griditem:nth-of-type(3) {
    grid-row-start: 2;
    grid-column-start: 3;
    grid-row-end: 4;
    grid-column-end: 4;
}

/* sixième style de grid layout */

.gridlayout6 {
    grid-template-columns: 1fr 1fr 200px;
    grid-template-rows: 1fr 1fr 1fr;
}
.gridlayout6 .griditem:first-of-type {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-column-end: 3;
}

.gridlayout6 .griditem:nth-of-type(2) {
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 1;
    grid-column-end: 4;
}

.gridlayout6 .griditem:nth-of-type(3) {
    grid-row-start: 2;
    grid-column-start: 3;
    grid-row-end: 4;
    grid-column-end: 4;
}

/* septième style de grid layout */

.gridlayout7 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}
.gridlayout7 .griditem:first-of-type {
    grid-area: 1 / 1 / 4 / 3;
}

.gridlayout7 .griditem:nth-of-type(2) {
    grid-area: 2 / 3 / 5 / 4;
}

.gridlayout7 .griditem:nth-of-type(3) {
    grid-area: 4 / 1 / 5 / 3;
}

/* huitième style de grid layout */

.gridlayout8 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    row-gap: 20px;
}
.gridlayout8 .griditem:first-of-type {
    grid-area: 1 / 1 / 4 / 3;
}

.gridlayout8 .griditem:nth-of-type(2) {
    grid-area: 2 / 3 / 5 / 4;
}

.gridlayout8 .griditem:nth-of-type(3) {
    grid-area: 4 / 1 / 5 / 3;
}

/* neuvième style de grid layout */

.gridlayout9 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 0 20px;
    /* column-gap: 20px; */
}
.gridlayout9 .griditem:first-of-type {
    grid-area: 1 / 1 / 4 / 3;
}

.gridlayout9 .griditem:nth-of-type(2) {
    grid-area: 1 / 3 / 5 / 4;
}

.gridlayout9 .griditem:nth-of-type(3) {
    grid-area: 4 / 1 / 5 / 2;
}

.gridlayout9 .griditem:last-of-type {
    grid-area: 4 / 2 / 5 / 3;
}

/* dixième style de grid layout */

.gridlayout10 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 20px;
}
.gridlayout10 .griditem:first-of-type {
    grid-area: 1 / 1 / 4 / 3;
}

.gridlayout10 .griditem:nth-of-type(2) {
    grid-area: 2 / 3 / 5 / 4;
}

.gridlayout10 .griditem:nth-of-type(3) {
    grid-area: 4 / 1 / 5 / 3;
}