html {
  height: 100%;
  background-color: #333745;
  font-family: 'Klee One', cursive;
  font-weight: 600;
}

body {
margin: 0;}

.footer {
  position: fixed;
  left: 0;
  bottom: -9px;
  width: 100%;
}

.container {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1.5fr 1.5fr 1.5fr 0.5fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  text-align: center;
  font-size: 2em;
  grid-template-areas:
    "redd whitee greenn list";
}


.redd {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;    grid-area: redd;
  padding: 5% 0% 5% 0%;
  background-color: #d88c9a;
  transition: 0.25s ease;
}

.whitee {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  grid-area: whitee;
  padding: 5% 0% 5% 0%;
  transition: 0.25s ease;
  background-color: #f2d0a9;
}

.greenn {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  grid-area: greenn;
  padding: 5% 0% 5% 0%;
  transition: 0.25s ease;
  background-color: #9fca84;
}

.list {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

  grid-area: list;
  padding: 12% 0% 5% 0%;
  transition: 0.25s ease;
  background-color: #252323;
  color: #919295;
}

.list:hover {
  transform: translateY(-10px);
  cursor: pointer;
}


.redd:hover {
  transform: translateY(-10px);
  cursor: pointer;
}

.whitee:hover {
  transform: translateY(-10px);
  cursor: pointer;
}


.greenn:hover {
  transform: translateY(-10px);
  cursor: pointer;
}

.g {
  color: #9fca84;
}

.w {
  color: #f2d0a9;
  font-size: 1.3em;
  transition: 1.7s;
}

.r {
  color: #d88c9a;
}

#left {
  margin-top: 25vh;
  float: left;
  margin-left: 5%;
  color: white;
  z-index: 1001;
  position: relative;
  font-size: 2em;
  transition: 0.7s all;

}


#right {
  margin-top: 25vh;
  float: right;
  z-index: 1001;
  position: relative;
  color: white;
  margin-right: 5%;
  font-size: 2em;
  transition: 0.7s all;
}


#right:hover {
  scale: 1.5;
  transform: translateX(10px);
  cursor: pointer;

}
#left:hover {
  scale: 1.5;
  transform: translateX(-10px);
  cursor: pointer;

}

#flashcard {
  width: 320px;
  height: 430px;
  border-radius: 5px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  margin-left: calc(50% - 200px);
  margin-top: 10vh;
  transition: 0.7s all;
  display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding:10px;
  
}

#flashcard:hover {
  cursor: pointer;
}

#kanji,
#kanji2 {
  text-align: center;
  font-size: 2.5em;
}

#example,
#meaning {
  text-align: center;
  font-size: 1em;
}

#reading {
margin-left: 2%;
text-align: center;
font-size: 1em;
}

#words {
  width: 100%;
  transition: 1s all;
  background: #252323;
  margin-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
  height: 70px;
  color: #333745;
  white-space: nowrap;
  position: relative;
  z-index: 998;
  scrollbar-width: thin;
  scrollbar-color: #919191 transparent;
}

#words span {
  margin-left: 15px;
  line-height: 2.4em;
  letter-spacing: 0.05em;
  transition: 0.5s all;
  position: relative;
  z-index: 999;
  height: 100%;
vertical-align: middle;
}

.letter {
    display: inline-block;
    line-height: 1em;
    
  
}

#words span:hover {
  color:white;
  font-size: 1.7em;
  cursor: pointer;
}

#words span:last-child {
  margin-right: 20px;
}


.flipped {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}


#cover {
  background-color: #252323a5;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1002;
  position: absolute;
}

#cover:hover {
  cursor:pointer;

}

#popCont {
  max-width: 50vw;
 display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: white;
  z-index: 1003;
  position: absolute;
  height: 80vh;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #333745;
  margin-left: calc(50% - 25vw);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.kanjiPop,
.readingPop {
  width: 100%;
  background-color: #1f2129;
  font-weight: bold;
  font-size: 1.2em;
  padding-left: 10px;
  padding-right: 10px;
}

#title {
  padding-top: 2%;
padding-bottom: 2%;
text-align: center;
flex: content;
font-size: 1.7em;
font-weight: 800;
}

.meaningPop {
  width: 100%;
  background-color: #333745;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 2%;

}

.examplePop {
  margin-bottom: 2%;
  width: 100%;
  background-color: #333745;
  padding-left: 10px;
  padding-right: 10px;

}