/*
  Nimai Solis
  November 23rd 20223
  Style sheet for pokalink.html and pokalinkTrip.html
*/

/* universal modifiers */
ul {
   text-align: center;
   justify-content: space-between;
 }
section {
  display: flex;
  justify-content: space-around;
}
p {
  margin-bottom: 5px;
  margin-top: 5px;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
}
td, th {
  border: 3px inset #666;
  font-weight: bold;
  padding: 8px;
}
/* generic class modifiers */
.subtitle {
    text-align: center;
    margin-left: 35px;
}
.smallText {
  font-size: 6pt;
}
.hidden {
  display: none !important;
}
.middleWarning {
  margin: 5px auto 0px auto;
  width: 510px;
  text-align: center;
  border:2px solid black;
}
.displayButton {
  height: 50px;
  width: 100%;
  text-align: left;
  border:2px solid black;
}
.selecter {
  font-family: "Century Gothic", Helvetica, sans-serif;
  border: 3px inset #666;
  cursor: pointer;
  font-weight: bold;
  font-size: 12pt;
  border: none;
}
.submit-btn {
  font-family: "Century Gothic", Helvetica, sans-serif;
  border: 3px inset #666;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  margin-top: 5px;
  padding: 8px;
  width: 75px;
  font-size: 12pt;
}
.inputs {
  font-family: "Century Gothic", Helvetica, sans-serif;
  border: 3px inset #666;
  border-radius: 8px;
  font-weight: bold;
  margin-top: 5px;
  padding: 8px;
  width: 860px;
  font-size: 12pt;
}
/* id modifiers */
#menu-btns .menu-btn {
  width: 150px;
}
.menu-btn, #trip-planner-btn, #games-btn, #manga-btn, #books-btn, #main-menu-btn, #user-btn, #settings-btn, #back-btn{
  font-family: "Century Gothic", Helvetica, sans-serif;
  border: 3px inset #666;
  border-radius: 8px;
	cursor: pointer;
  display: block;
  font-weight: bold;
  margin: 5px auto;
  padding: 8px;
  width: 250px;
  font-size: 12pt;
}
#menu-container .nav-pills {
  width: 60vw;
}
#socialsList {
  margin-top: 0px;
}
#title {
  font-family: "Century Gothic", Helvetica, sans-serif;
  margin-bottom: 15px;
  text-align: center;
}
#userTitle {
  margin-bottom: 15px;
  text-align: center;
}
#menu-view {
  flex-direction: column;
  width: 95vw;
  margin: auto auto;
}
#main-menu-btn{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 160px;
  font-size: 11pt;
}
#user-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 160px;
  font-size: 11pt;
}
#settings-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 160px;
  font-size: 11pt;
}
#back-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 160px;
  font-size: 11pt;
}
#menu-btns {
  list-style-type: none;
  margin: auto auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#menu-btns * {
  display: inline;
  margin: auto 3px;
}
/* homepage */
.flex-container {
  display: flex;
    justify-content: center;
}
.british {
  margin-top: 20px;
  height: 250px;
  width: 250px;
}
.vash {
  margin-top: 20px;
  margin-left: 40px;
  height: 250px;
  width: 250px;
}
.lain {
  margin-top: 325px;
  margin-left: -250px;
  height: 250px;
  width: 250px;
}
/* qr code page */
#qr-view {
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.profile-pic-wrapper {
  margin-bottom: 15px;
  width: 200px;
  height: 200px;
  border: 5px solid black;
  border-radius: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  }
.myFace {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-data {
  font-size: 30px;
  height: 40px;
}
/* trip planner */
#map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}
/* userLogin buttons */
#login-btn, #create-btn{
  font-family: "Century Gothic", Helvetica, sans-serif;
  border: 3px inset #666;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  padding: 8px;
  width: 80px;
  font-size: 12pt;
  background-color: #E74C3C;

  margin: 10px auto 0px auto;
  display: flex;
  justify-content: space-between;
}
#switchCreate-btn, #switchLogin-btn{
  font-family: "Century Gothic", Helvetica, sans-serif;
  border: 3px inset #666;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  margin-top: 5px;
  padding: 8px;
  width: 80px;
  font-size: 12pt;
  background-color: #E74C3C;

  margin: auto auto;
  display: flex;
  justify-content: space-between;
}
.loginInputs {
  font-family: "Century Gothic", Helvetica, sans-serif;
  border: 3px inset #666;
  border-radius: 8px;
  font-weight: bold;
  margin-top: 10px;
  padding: 8px;
  width: 250px;
  font-size: 12pt;
  background-color: #E74C3C;

  margin: auto auto;
  display: flex;
  justify-content: space-between;
}

/* setting buttons */
#changePass-btn, #logout-btn, #delete-btn{
  font-family: "Century Gothic", Helvetica, sans-serif;
  border: 3px inset #666;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  padding: 8px;
  width: 80px;
  font-size: 12pt;
  background-color: #00FFEF;

  margin: 10px auto 0px auto;
  display: flex;
  justify-content: space-between;
}
.settingInputs {
  font-family: "Century Gothic", Helvetica, sans-serif;
  border: 3px inset #666;
  border-radius: 8px;
  font-weight: bold;
  margin-top: 10px;
  padding: 8px;
  width: 310px;
  font-size: 12pt;
  background-color: #00FFEF;

  margin: auto auto;
  display: flex;
  justify-content: space-between;
}
/* color themes */
.poka-qr {
  background-color: #a7a7a7;
  font-family: "Century Gothic", Helvetica, sans-serif;
}
.poka-main {
  background-color: #98BF64;
  font-family: "Century Gothic", Helvetica, sans-serif;
}
.main-btns {
  background-color: #7EA310;
}
.poka-trip {
  background-color: #DEE2FC;
  font-family: "Century Gothic", Helvetica, sans-serif;
}
.trip-btns, .addressInputs, .tripSelecter, #tripSubmit-btn {
  background-color: #54C2CC;
}
.poka-game {
  background-color: #F7BE6D;
  font-family: "Century Gothic", Helvetica, sans-serif;
}
.game-btns, .gameInputs, .gameselecter, #gameSubmit-btn{
  background-color: #FFB347;
}
.gameCata {
  background-color: #FA9C1B;
}
.poka-manga {
  background-color: #CCCCFF;
  font-family: "Century Gothic", Helvetica, sans-serif;
}
.manga-btns, .mangaInputs, .mangaselecter, #mangaSubmit-btn {
  background-color: #C3B1E1;
}
.mangaCata {
  background-color: #9E7BB3;
}
.poka-book {
  background-color: #C8B88A;
  font-family: "Century Gothic", Helvetica, sans-serif;
}
.book-btns, .bookInputs, .bookselecter, #bookSubmit-btn {
  background-color: #C19A6B;
}
.bookCata {
  background-color: #D89C60;
}
.poka-user {
  background-color: #F1948A;
  font-family: "Century Gothic", Helvetica, sans-serif;
}
.user-btns {
  background-color: #E74C3C;
}
.poka-setting {
  background-color: #6495ED;
  font-family: "Century Gothic", Helvetica, sans-serif;
}
.setting-btns {
  background-color: #00FFEF;
}
.qr-btns {
  background-color: #878787;
}