/* Copyright © 2024 Hruritiz Corporation */
body {
  color: rgb(255, 255, 255);
  font-family: MiSans,Arial;
  background: url(image/background.jpg) fixed;
  background-size: cover;
  margin: 20px;
}
@font-face {
  font-family: 'MiSans';
  src: url('fonts/MiSansLatin-Normal.otf') format('opentype');
}
@font-face {
  font-family: 'ArchivoBlack';
  src: url('fonts/ArchivoBlack-Regular.ttf');
}
.card_right_mobile {position:absolute;left: 210px;}
.default_card_animation {transition:0.5s;border-radius: 16px;}
.default_card_animation:hover {transform:scale(1.1);}
.default_card_animation:active {transform:scale(98%);transition:0.5s;}
.class1:hover {filter: drop-shadow(4px 4px 25px rgb(255, 205, 42));}
.class2:hover {filter: drop-shadow(4px 4px 25px rgb(219, 215, 212));}
.class3:hover {filter: drop-shadow(4px 4px 25px rgb(234, 214, 118));}
.class4:hover {filter: drop-shadow(4px 4px 25px rgb(39, 170, 225));}
.class5:hover {filter: drop-shadow(4px 4px 25px rgb(179, 32, 240));}
.class6:hover {filter: drop-shadow(4px 4px 25px rgb(111, 215, 162));}
.class7:hover {filter: drop-shadow(4px 4px 25px rgb(167, 211, 163));}
.class8:hover {filter: drop-shadow(4px 4px 25px rgb(255, 71, 0));}
.class9:hover {filter: drop-shadow(4px 4px 25px rgb(36, 58, 94));}
.class10:hover {filter: drop-shadow(4px 4px 25px rgb(184, 202, 220));}
.class11:hover {filter: drop-shadow(4px 4px 25px rgb(251, 230, 127));}
.class12:hover {filter: drop-shadow(4px 4px 25px rgb(0, 116, 205));}
.class13:hover {filter: drop-shadow(4px 4px 25px rgb(247, 147, 30));}
.class14:hover {filter: drop-shadow(4px 4px 25px rgb(80,181,55));}
.class15:hover {filter: drop-shadow(4px 4px 25px rgb(22,224,207));}
.class16:hover {filter: drop-shadow(4px 4px 25px rgb(151,119,248));}
.class17:hover {filter: drop-shadow(4px 4px 25px rgb(222,239,0));}
.class18:hover {filter: drop-shadow(4px 4px 25px rgb(255, 255, 255));}
.class19:hover {filter: drop-shadow(4px 4px 25px rgb(25, 37, 146));
}
.profile-info {
  font-size: 20px;
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.profile-info img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}
.copyright {
  color: #ffffff;
  text-decoration: none;
}
.hidden {
 display: none;
}
.footer {
  background-color: rgba(0, 153, 255, 0.35);
  position: fixed;
  font-family: ArchivoBlack;
  right: 0;
  bottom: 0;
  text-align: center; 
  width: 100%;   
  font-size: 18px;
  font-weight: bold;
  color: #fafaff;  
}
section {
  float: left;
  width: 11%;
}
.button {
  border: 2px solid transparent;
  border-radius: 6px;
  box-sizing: border-box;
  color: #ffffff;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15385;
  outline: none;
  padding: 8px .8em;
  position: relative;
  text-align: center;
  text-decoration: none;
  vertical-align: 20px;
  background-color: #0095ffd8;
  background: linear-gradient(45deg,rgb(101, 193, 255) 12%,rgb(0, 102, 255) 84%);
  background-blend-mode: normal;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
  transition: 0.5s;
}
.button:hover {
  background-color: #0893f7;
  transform: scale(97%); 
  box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.3);
  transition: 0.9.2s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
}
.tab {
  overflow: hidden;
  border: 1px solid #ffffff;
  background-color: #fdfdfd;
  border-radius: 6px;
  margin-top: 10px
}
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: MiSans,Arial;
  padding: 14px 16px;
  font-size: 16px;
}
.tab button.active {
 border-radius: 70px;
 background-color: rgb(242,242,242);
 transition: 0.5s;
}
.tabcontent {
  display: none;
  padding: 8px 14px;
  border-radius: 5px;
  border: 3px solid #ffffff;
  border-top: none;
  background-color: #ffffff;
}
.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: absolute; 
}
.search-container .search-icon {
  margin-right: 10px;
  position: relative;
  margin-top: 33px;
}
#searchInput {
  padding: 9.3px;
  font-size: 16px;
  max-width: 210px;
  border: 3px solid #ffffffa9;
  border-radius: 17px;
  position: relative;
  margin-top: 33px;
}
#searchInput:hover {
cursor: pointer;
background-color:#fdfdfd
}
#searchInput:focus {
cursor: text;
}
.results {
  list-style-type: none;
  padding: 0;
  display: none;
}
.results li {
  padding: 10px;
  border: 3.4px solid #ffffffcb;
  border-radius: 10px;
  background-color: #ffffff56;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
}
.results img {
  margin-right: 10px;
  width: 40px;
  height: 40px;
}
#results a {
  text-decoration: none;
  color: #ffffff;
  width: 100%;
}
#results a:hover {
  color: #ffffffa7;
}
#changeNameForm {
  display: none;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  max-width: 300px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

#changeNameForm h2 {
  font-size: 1.5em;
  color: #333;
  margin-bottom: 10px;
  text-align: center;
}
#changeNameForm input[type="text"],
#changeNameForm input[type="file"] {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1em;
}
#saveChangesButton {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  border: none;
  color: white;
  font-size: 1em;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}
#saveChangesButton:hover {
  background-color: #007bff;
}
#changeMessage {
  font-size: 0.9em;
  margin-top: 10px;
  display: none;
}
#changeNameButton {
  background-color: #007bff;
  border: none;
  position: relative;
  border-radius: 7px;
  width: 40px;
  height: 40px;
}
.file-upload {
  position: relative;
  margin: 8px 0;
  width: 100%;
}
#fileUploadButton {
  display: block;
  width: 93%;
  padding: 10px;
  background-color: #28a745;
  color: white;
  font-size: 1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

#fileUploadButton:hover {
  background-color: #218838;
}

input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}