@font-face {
  font-family: "gotham";
  src: url("./font/Gotham-Black.otf");
}
@font-face {
  font-family: "gotham-bold";
  src: url("./font/Gotham-Bold.otf");
}
@font-face {
  font-family: "gotham-light";
  src: url("./font/Gotham-Light.otf");
}

html {
  font-family: gotham;
}

/* NAVIGATION  */
nav {
  padding-top: 2vw;
}

nav ul {
  list-style-type: none;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 60vw;
  width: 35vw;
  padding: 1vw;
  padding-bottom: 0vw;
  padding-top: 0vw;
  gap: 0.5vw;
}

a {
  color: white;
  text-decoration-line: underline;
  font-size: 1rem;
  line-height: 1rem;
  font-family: gotham-light;
}
body {
  padding: 0px;
  margin: 0px;
}
/* HEADER */
.bg_img {
  width: 100vw;
  z-index: -1;
  position: absolute;
  height: 80vh;
}
.back_arrow {
  padding-left: 2vw;
  position: absolute;
  margin-bottom: 2vw;
  font-size: 1.1rem;
}
h1 {
  color: white;
}
p.topheader {
  display: flex;
  align-items: flex-end;
}
img.topheader {
  width: 100vw;
}
h1.title {
  color: white;
  margin-left: 20vw;
  font-size: 130px;
}
h1.sub_title {
  background-color: white;
  color: #231f20;
  margin-left: 20vw;
  display: flex;
  z-index: 0;
  position: relative;
  padding: 3vw;
  font-size: 3em;
  margin-top: 1vw;
  font-family: gotham-bold;
}
/* MAIN */
main {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: auto;
}
/* first game card */
.game_card1 {
  display: grid;
  grid-template-columns: 0.3fr 0.7fr;
  grid-column-start: 1;
  grid-column-end: 20;
  grid-row-start: 1;
  margin-left: 0.5vw;
  margin-bottom: 10vw;
}

.column1 {
  grid-column-start: 1;
}
.inner_artist1 {
  width: 100%;
  height: 100%;
  opacity: 0.6;
  border: 2px black solid;
  box-shadow: 4px 8px 0 rgba(100, 99, 99, 0.1);
}

.column2 {
  grid-column-start: 2;
}
.c2grid {
  display: grid;
  grid-template-rows: 0.5fr 0.4fr 0.1fr;
  margin-left: 1vw;
}
.title_artist {
  grid-row-start: 1;
  color: black;
  font-size: 5rem;
  margin: 0px;
  font-family: gotham-bold;
}
.artist_paragraph {
  grid-row-start: 2;
  font-family: gotham-light;
}
.artist_button {
  grid-row-start: 3;
  background-color: #8dc5b2;
  color: white;
  padding: 0.9vw;
  width: max-content;
}
/* second game card */
.game_card2 {
  display: grid;
  grid-template-columns: 0.7fr 0.3fr;
  grid-column-start: 4;
  grid-column-end: 24;
  grid-row-start: 2;
  margin: 0px;
  margin-bottom: 10vw;
}

.column1_2 {
  grid-column-start: 2;
}

.inner_artist1_2 {
  width: 60%;
  height: 35%;

  object-fit: none;
  object-position: 50% -0%;
  box-shadow: 4px 8px 0 rgba(100, 99, 99, 0.1);
}
.inner_artist1_3 {
  width: 60%;
  height: 45%;

  margin-bottom: 0px;
  object-fit: contain;
  object-fit: none;
  object-position: 50% 87%;
  box-shadow: 4px 8px 0 rgba(100, 99, 99, 0.1);
}

.column2_2 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.c2grid2_2 {
  display: grid;
  grid-template-rows: 0.3fr 0.5fr 0.2fr;
  margin-right: 1vw;
  text-align: right;
}

.title_artist2_2 {
  grid-row-start: 1;
  color: black;
  font-size: 5rem;
  font-family: gotham-bold;
  margin-bottom: 0px;
}
.artist_paragraph2_2 {
  grid-row-start: 2;
  font-family: gotham-light;
  margin-bottom: 0px;
}
.artist_button2_2 {
  grid-row-start: 3;
  background-color: #8dc5b2;
  color: white;
  padding: 0.9vw;
  width: max-content;
  display: block;
  justify-self: right;
}

/* third game card */
.game_card3 {
  display: grid;
  grid-template-columns: 0.3fr, 0.7fr;
  grid-column-start: 1;
  grid-column-end: 20;
  grid-row-start: 3;
  margin-left: 0.5vw;
  margin-bottom: 10vw;
}

.column1 {
  grid-column-start: 1;
}
.inner_artist3 {
  width: 100%;
  height: 100%;
  border: 2px black solid;
  box-shadow: 4px 8px 0 rgba(100, 99, 99, 0.1);
}

.column2 {
  grid-column-start: 2;
}
.c2grid {
  display: grid;
  grid-template-rows: 0.5fr 0.4fr 0.1fr;
  margin-left: 1vw;
}
.title_artist {
  grid-row-start: 1;
  color: black;
  font-size: 5rem;
  margin: 0px;
  font-family: gotham-bold;
}
.artist_paragraph {
  grid-row-start: 2;
  font-family: gotham-light;
}
.artist_button {
  grid-row-start: 3;
  background-color: #8dc5b2;
  color: white;
  padding: 0.9vw;
  width: max-content;
}

/* footer */
footer {
  display: grid;
  grid-template-columns: 0.3fr 0.5fr 0.2fr;
  grid-template-rows: 0.8fr 0.2fr;
  background-color: black;
  color: white;
  padding: 3vw;
}
.c1_r1 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.c1_r1 ul {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: left;
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px;
}
.c1_r1 a {
  line-height: 4vh;
}
.c2_r1 {
  grid-column-start: 2;
  grid-row-start: 1;
}
.c2_r1 ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  list-style-type: none;
  margin-top: 0px;
  margin-left: 0px;
}
.c2_r1 a {
  line-height: 10vh;
  font-family: gotham-light;
  font-size: 3em;
}
.c3_r1 {
  grid-column-start: 3;
  grid-row-start: 1;
}
.c3_r1 ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  list-style-type: none;
  font-family: gotham-light;
  font-size: 5em;
  margin-top: 0px;
}
.c3_r1 li {
  text-align: left;
  align-items: center;
  display: flex;
  line-height: 5vh;
}
.c1_r2 {
  grid-column-start: 1;
  grid-row-start: 2;
  font-size: xx-small;
  font-family: gotham-light;
  padding-top: 10vw;
  display: flex;
  align-items: flex-end;
  color: #949393;
}
.c1_r2 p {
  justify-content: flex-end;
}
.c3_r2 {
  grid-column-start: 3;
  grid-row-start: 2;
  font-size: xx-small;
  font-family: gotham-light;
  padding-top: 10vw;
}

.c3_r2 ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-align: left;
  list-style-type: none;
  margin-top: 0px;
}
.c3_r2 a {
  line-height: 3vh;
  color: #949393;
}
/* MEMORY */

.main_memory {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
}
ul.memory a {
  color: black;
}
.title {
  display: grid;
  grid-column-start: 1;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0px;
}
.game_title {
  color: black;
  font-size: 9rem;
  font-family: gotham;
  display: flex;
  justify-content: flex-start;
  margin-top: 5vh;
  margin-bottom: 1vh;
  z-index: -1;
  grid-row-start: 1;
  grid-column-end: 2;
  margin-left: 5vw;
}
.game_title2 {
  color: black;
  font-size: 9rem;
  font-family: gotham;
  display: flex;
  justify-content: flex-start;
  /* margin-left: 10vw; */
  margin-top: -10vh;
  z-index: -1;
  grid-column-start: 2;
  grid-row-start: 2;
  margin-right: 5vw;
}

.row2 {
  display: grid;
  grid-row-start: 3;
  grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
  top: -20vh;
  position: relative;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.aside1 {
  font-family: gotham-light;
  grid-column-start: 2;
  width: 8vmin;
  margin-left: 2vw;
}
.aside1 .aside_title {
  width: 10vw;
  text-align: left;
}
.aside1 li {
  line-height: 1.5rem;
  list-style-type: none;
}
.aside1 ul {
  list-style-position: inside;
  padding-left: 0;
}
.cardgame {
  width: 45vw;
  height: 62vh;
  grid-column-start: 2;
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: black;
}
.selectedart {
  font-family: gotham-bold;
  font-size: 2vmin;
}
/* TEST MEMORY!!!! */
.memory_grid {
  justify-content: center;
  display: flex;
  width: 60vmin;
  height: 60vmin;
  flex-direction: row;
  flex-wrap: wrap;
  margin: auto;
}
.flip-card1,
.flip-card2,
.flip-card3,
.flip-card4,
.flip-card5,
.flip-card6,
.flip-card7,
.flip-card8,
.flip-card9 {
  width: 18vmin;
  height: 18vmin;
  margin: 1vmin;
}
/* changing letters */
.flip-card1 span:before {
  content: "L";
  padding: 0px;
  margin: auto;
  text-align: left;
  font-size: 18vmin;
  color: white;
}
.flip-card2 span:before {
  content: "O";
  padding: 0px;
  margin: auto;
  text-align: left;
  font-size: 18vmin;
  color: white;
}
.flip-card3 span:before {
  content: "U";
  padding: 0px;
  margin: auto;
  text-align: left;
  font-size: 18vmin;
  color: white;
}
.flip-card4 span:before {
  content: "I";
  padding: 0px;
  margin: auto;
  text-align: left;
  font-size: 18vmin;
  color: white;
}
.flip-card5 span:before {
  content: "S";
  padding: 0px;
  margin: auto;
  text-align: left;
  font-size: 18vmin;
  color: white;
}
.flip-card6 span:before {
  content: "I";
  padding: 0px;
  margin: auto;
  text-align: left;
  font-size: 18vmin;
  color: white;
}
.flip-card7 span:before {
  content: "A";
  padding: 0px;
  margin: auto;
  text-align: left;
  font-size: 18vmin;
  color: white;
}
.flip-card8 span:before {
  content: "N";
  padding: 0px;
  margin: auto;
  text-align: left;
  font-size: 18vmin;
  color: white;
}
.flip-card9 span:before {
  content: "A";
  padding: 0px;
  margin: auto;
  text-align: left;
  font-size: 18vmin;
  color: white;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* flip cards */
/* .flip-card1:hover .flip-card-inner,
.flip-card2:hover .flip-card-inner,
.flip-card3:hover .flip-card-inner,
.flip-card4:hover .flip-card-inner,
.flip-card5:hover .flip-card-inner,
.flip-card6:hover .flip-card-inner,
.flip-card7:hover .flip-card-inner,
.flip-card8:hover .flip-card-inner,
.flip-card9:hover .flip-card-inner {
  transform: rotateY(180deg);
} */

.flip_js {
  transform: rotateY(180deg);
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: black;
  color: white;
}

.flip-card-back {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
}
.memory_grid img {
  width: 100%;
  height: 100%;
}

/* END OF TEST  */
.game_memory {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

.aside2 {
  font-family: gotham-light;
  grid-column-start: 4;
  width: 15vmin;
  margin-left: 2vw;
  background-color: #8dc5b2;
  color: white;
  padding: 4vmin;
  z-index: -5;
}

article.one,
.two,
.three,
.four,
.five,
.six,
.seven,
.eight,
.nine {
  width: 14vw;
  height: 19vh;
  display: flex;
  justify-content: center;
  padding: 0.4vw;
}

.front_face {
  text-align: center;
  font-size: 10rem;
  width: 14vw;
  height: 19vh;
  z-index: 1;
  position: absolute;
  background-color: white;
}

.front_faceL {
  text-align: center;
  font-size: 10rem;
  width: 14vw;
  height: 19vh;
  z-index: 10;
  position: absolute;
  background-color: lightblue;
  content: "L";
}
.card_flip {
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: all 7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card_flip {
  animation-name: flip 3s ease-in linear;
  transform: rotateY (180deg) scale(1.5);
}

.game_memory img {
  /* display: block; */
  width: 100%;
  height: 100%;
  z-index: -1;
}

article.one,
.two,
.three {
  grid-row-start: 1;
  position: relative;
}
article.four,
.five,
.six {
  grid-row-start: 2;
  position: relative;
}
article.seven,
.eight,
.nine {
  grid-row-start: 3;
  position: relative;
}
/* END OF 1st memory */
.aside_title {
  text-align: left;
}
.aside2 li {
  line-height: 1.5rem;
  list-style-type: none;
}
.aside2 ul {
  list-style-position: inside;
  padding-left: 0px;
}
.nextpage {
  grid-row-start: 5;
  grid-column-start: 1;
  background-color: #8dc5b2;
  color: white;
  padding-left: 1vw;
  padding-right: 1vw;
  top: -10vh;
  font-size: 2rem;
  width: max-content;
  font-family: gotham-bold;
  margin-left: 78vw;
  position: relative;
  margin-top: 5vmin;
}

.box_pop,
.box_painting,
.box_photo,
.box_abstract {
  position: absolute;
  top: 100vh;
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 1fr;
  /* position: relative; */
  left: 8vw;
  padding-bottom: 0px;
  width: 20vw;
  height: auto;
  background-color: #628b7e;
  color: white;
  padding-left: 1vw;
  padding-right: 1vw;
  z-index: 10;
  font-family: gotham-light;
  line-height: 2vh;
}
.box_end {
  /* grid-row-start: 4; */
  position: absolute;
  top: 100vh;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr;
  /* position: relative; */
  left: 20vw;
  padding-bottom: 0px;
  width: 30vw;
  height: 20vmin;
  background-color: #8dc5b2;
  color: white;
  padding-left: 1vw;
  padding-right: 1vw;
  z-index: 10;
  font-family: gotham-light;
}

.lightbulb {
  grid-column-start: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11vmin;
}
.box2 {
  grid-column-start: 2;
}
.box_pop2 p {
  font-family: gotham-light;
}
.footer_memory {
  display: grid;
  grid-row-start: 6;
  grid-template-columns: 0.2fr 0.7fr 0.1fr;
  grid-template-rows: 2fr 1fr;
  background-color: black;
  color: white;
  padding: 3vw;
}
.invisible {
  display: none;
}
/* IMAGE PAGE */

body .image {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

.imagesss img {
  width: 100%;
}