/* index colors */
:root {
  --color--1: #A68163;
  --color--2:#546957;
  --color--3:#B6C3B7;
  --color--4:#F2F0ED;
  --color--T_X:#2B362D;
  --color--I_X:#b6c3b7;
  --color--b_k:#ffff;
  --color--F_S:#b6c3b7;
  --color--O_G:#2B362D;
  --color--IMG:#F2F0ED;
}

:root .dark-scheme {
  --color--T_X: #3A6E3D;
  --color--b_k: #201C1C;
  --color--F_S: #353B3D;
  --color--O_G:#3A6E3D;
  --color--I_X: #353B3D;
  --color--IMG:#3A6E3D;
}

body {
  background-color: var(--color--b_k);
}
/* header index down here */
/* Uplouad butten design*/
.upload {
  cursor: pointer;
  background-color: var(--color--1);
  border-color: var(--color--1);
  box-shadow: 0 0 0 0.25rem var(--color--1);
  padding: .375rem .75rem;
  color: var(--color--4);
  border-radius: 1px;
  width: 75px;
  justify-self: center;
  align-self: center;
  border-style: hidden;
  margin-bottom: 10px;
}

/*--dropdown profile----*/
/* Dropdown Button */
.dropbtn {
  color: var(--color--IMG);
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--color--4);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px var(--color--T_X);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: var(--color--T_X);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: var(--color--4);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Main index down here */
/* Fronten grids and size*/
.gridfront {
  grid-template-columns: 60% 36% 4%;
  grid-template-rows: repeat(3, auto);
  background-color: var(--color--I_X);
  text-align: center;
  font-size: 25px;
}

/* image size and space */
.gridfront>img {
  grid-column: 1;
  grid-row: 1/4;
  width: 100%;
}

/* front text color */
.gridfront p+p {
  color: var(--color--T_X);
  font-size: 20px;
}

/* Terms of Service color text*/
.gridfront a {
  color: var(--color--T_X);
}

/*  text position*/
.gridfront>img+div {
  grid-column: 2;
  grid-row: 2;
}

/* phone version */
@media screen and (max-width: 1150px) {

  /* grids */
  .gridfront {
    grid-template-columns: 10% auto 10%;
    grid-template-rows: auto 1fr;
  }

  /* image positon */
  .gridfront > img {
    grid-row: 1;
    grid-column: 1/4;

  }
}



/* Fame and Shame down  here*/
/* main grid for Fame and Shame*/

.fame_shame {
  margin: 0 5% 0 5%;
}

/* the position code for fame/Shame content  */
.grid {
  display: grid;
  grid-template-columns: 0px repeat(4, 1fr) 0px;
  gap: 15px;
  align-items: start;
  margin: 0 10% 0 10%;

}

/* Position for Fame/Shame text */
.grid>.grid-container {
  grid-column: 1 / 6;
}

/* Text size */
.grid-container>div {
  font-size: 3rem;
}

/* Title "Fame/Shame" and lines */
.title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  grid-gap: 3vw;
  margin: 2% 0 2% 0;
}
/* Left line */
.line1 {
  border-top: 4px solid var(--color--T_X);
}

/* right line */
.line2 {
border-top: 4px solid var(--color--T_X);
}

/* the title design */
.title > h2 {
  color: var(--color--T_X);
  font-size: 2.5rem;
}

/* Fame and Shame <header> text design and position */
.grid > div {
  text-align: center;
  color: var(--color--T_X);
  background-color: var(--color--F_S);
  grid-column: 2 / 4;
  height: 100%;
}

/* text design */
.grid > div > h2 {
  font-size: 3rem;
  margin: 0;
  color: var(--color--T_X);
}

/* text  position and design */
.grid > div > p {
  font-size: 1rem;
  margin: 1em 3em 1em 3em;
}



/* Shame second <header> position */
.grid>div:last-of-type {
  align-self: center;
  grid-column: 4/6;
  grid-row: 2;
}



/* do the display grid */
section {
  display: grid;
}

/* image */
.grid>img {
  border: 1px solid var(--color--4);
  width: 100%;
  aspect-ratio: 16/9;
  margin: auto 0;
}

/* text design */
section>div~p {
  border: 10px solid var(--color--T_X);
  border-radius: 2px;
  padding: 1rem;
  width: 10rem;
  margin-left: 5%;
}

/* content Fame */
.grid > .main {
  grid-column: 4 / 6;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 10px;
  color: var(--color--T_X);
  margin: 0;
}

/* image position and design */
.grid > .main > img {
  width: 100%;
  grid-column: 1 ;
  align-items: center;
  aspect-ratio: 16/9;
}

/* image position*/
.grid > .main > .img2 {
  grid-column: 2;
}

/* image text description */
.grid > .main > figcaption {
  text-align: center;
  font-size: 1.3rem;
  grid-column: 1 / 3;
  grid-row: 2;
}

/* content Shame */
.grid > .main2 {
  grid-column: 2 / 4;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 10px;
  color: var(--color--T_X);
  margin: 0;
}

/* image position*/
.grid > .main2 > img {
  width: 100%;
  align-items: center;
  aspect-ratio: 16/9;
  margin: auto 0;
}

/* image text description */
.grid > .main2 > figcaption {
  text-align: center;
  font-size: 1.3rem;
  grid-column: 1 / 3;
  grid-row: 2;
}

/* the Fame/Shame position change */
@media screen and (max-width: 950px) {
  /*creates new grid*/
    .grid {
      grid-template-columns: auto auto;
      grid-template-rows: repeat(3, auto);
    }
    /* text position*/
    .grid> div {
      grid-column: 1/3;
    }
    /*aligns the imges correctly*/
    .grid> .main {
      grid-column: 1/3;
      grid-row:2;
    }

    /*changes position of shame header*/
    .grid>div:last-of-type {
        grid-row: 3;
        grid-column: 1/3;
    }
    /* the fame grid position */
    .grid > .main2 {
      grid-column: 1 / 3;
      grid-row: 4;
    }
  }

    /* goals title  */
.title_1 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background-color: var(--color--F_S);
    grid-gap: 3vw;
    margin: 0 5% 0 5%;

}

/* left line */
.line1_1 {
  border-top: 4px solid var(--color--O_G);

}
/* right line */

.line2_1 {
  border-top: 4px solid var(--color--O_G);
  }

   /* text color */
.title_1 > h2 {
  color: var(--color--O_G);
  font-size: 2.5rem;
}
  /* The goal section color*/
.Our_goals {
  background-color: var(--color--F_S);
}

/* the goal text position */
article {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  text-align: center;
  background-color: var(--color--F_S);
  color: var(--color--O_G);
}

/* the text design */
article > p {
  grid-column: 2 / 3;
  font-size: 1.1rem;
}

em > a{
  text-decoration: underline;
}