/*   ЦСС Файл */
/*67 67 67 67 67 67 67*/
/* Я РОБЛОКСЕР */
#body1 {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;     /* Центр по горизонтали */
  justify-content: flex-start; /* В начале по вертикали */
  background: linear-gradient(-45deg, #000000, #335369, #ee7752, #e73c7e);
  background-position: top;
  height: 100vh; /* высота окна браузера */
  width: 100vw; /* ширина окна браузера */
  font-family: 'Roboto', sans-serif;
  overflow: auto
  
}
input {
  padding: 8px;
  margin-top: 10px;
}
button {
  margin-top: 15px;
  padding: 10px;
}
.def_h {
  position: absolute;
  
}
.def_form {
  background: #dddddd;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  width: 300px;
  gap: 15px;

}
.int_li {
  position: absolute;
  top: 7.5%;
  left: 1%;
  margin: 0; /* сбросим стандартные отступы */
  padding: 0; /* сбросим внутренние отступы */
  list-style-type: disc;
  width: 9vw;
}

.int_li li {
  color: rgb(49, 49, 49);
  display: block; /* по умолчанию, можно и не писать */
  margin-bottom: 15px; /* отступ между пунктами */
  cursor: pointer;
}

.int_li li:hover {
  color: #1a28a7;
}
#create {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
#loginForm {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
      
.a-containerform {
  background: none;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  width: 300px;
  gap: 15px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 45%;
  left: 57%
}
label {
  color: #2dc40f;
}
.page-container {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 25px;
  height: 80vh;
}
.page-title {
  font-size: 5rem;
  color: grey;
  margin-top: 50px;
  margin-bottom: 20px;
}

h4 {
  position: relative;
  top: 50%;
  left: 0%;
  color: #aaa;
  text-align: center;
  margin-top: 250px;
  font-size: 1.5rem;
}

.default-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  /* Глубокий фиолетовый */
  background: linear-gradient(135deg, #5b2d8e, #3d1b6e, #2d0f55);
  background-size: 200% 200%;
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(90, 40, 150, 0.4), 
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  outline: none;
}
.default-button:hover {
  /* Расширение */
  transform: translate(-50%, -50%) scale(1.12);
  padding: 16px 34px;
  border-radius: 16px;
  /* Усиление свечения */
  background: linear-gradient(135deg, #7b3fc4, #5a28a0, #3d1b6e);
  background-size: 200% 200%;
  box-shadow: 0 8px 30px rgba(120, 50, 200, 0.6),
              0 0 40px rgba(140, 60, 220, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: buttonShine 1.5s ease infinite;
}

.default-button:active {
  transform: translate(-50%, -50%) scale(0.96);
  transition: all 0.1s ease;
}

.image {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px;
  padding: 1px 1px;
  border-radius: 1px;
  cursor: pointer;
  font-size: 1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background-color 0.3s;
  position: absolute;
  width: 320px;
  height: 320px;
}

.panel {
  display: flex;
  justify-content: center;
  background: rgba(80, 9, 187, 0.4); 
  backdrop-filter: blur(15px); 
  -webkit-backdrop-filter: blur(15px); 
  border: 1px solid rgba(49, 8, 112, 0.678); 
  border-radius: 16px; 
  padding: 20px 30px; 
  box-shadow: 0 4px 20px rgba(83, 34, 180, 0.2); 
  color: #ffffff; 
  position: relative; 
}
.panel1 {
  display: flex;
  justify-content: center;
  background: rgba(80, 9, 187, 0.4); 
  backdrop-filter: blur(15px); 
  -webkit-backdrop-filter: blur(15px); 
  border: 1px solid rgba(49, 8, 112, 0.678); 
  border-radius: 16px; 
  padding: 20px 30px; 
  box-shadow: 0 4px 20px rgba(83, 34, 180, 0.2); 
  color: #ffffff; 
  position: relative; 
}
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 
  width: 100vw;           
  background-color: #fffded;
  border-radius: 8px;
} /* айо вайт у тебя спина белая
где найти серую хрень? */
.a-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 98vh; 
  width: 40vw;           
  background-color: #fffef8;
  border-radius: 8px;
  border-color: #e7e3e3;
  margin: 0;
  position: relative !important;
  flex-direction: column;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
.grid-item {
    background-color: #eee;
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    height: 130px; 
    width: 160px;
    margin-top: 30%;
    margin-left: 15%;
  }
.menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
}
.menu.open {
  max-height: 500px; /* или auto, если хотите полностью адаптивно */
}

/*панель страниц*/
#pages_panel-div {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 5%;
  padding: 10px;
  background: rgb(221, 221, 221);
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  border-radius: 15px;
}
#pages_panel-div ul {
  display: flex;
  justify-content: center;
  gap: 300px;
  flex-direction: row;
}

@media (min-aspect-ratio: 8/15) and (max-aspect-ratio:11/18) {
    h1 {
    font-size: 1.75rem;
    }
    h4 {
    font-size: 1rem;
    }
    h2 {
    font-size: 1.5rem;
    }
    .page-container {
      width: 100%;
    }
    .a-container {
      width: 100vw;
    } 
    .panel {
      gap: 40%;
      width: 53% !important;
      margin-left: 53vw !important;
    }
    .panel1 {
      width: 25vw !important;
    }
    .int_li {
      width: 18vh;
    }
    .a-containerform {
      top: 55% !important;
      left: 75% !important;
      width: 60% !important;
       height: 70% !important;
    }
    .grid-item {
      height: 19vh !important;
      width: 25vw !important;
      margin-top: 36%;
    }
    .menu {
      position: absolute;
      left: 20vw !important;
      top:80vh !important;
    }
}
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes buttonShine {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/*profile*/
#main-div {
    display: flex;
    width: 92vw;
    padding-left: 4vw;
    height: 84vh;
    margin-top: 6vh;
    border: #ffffff solid 4px;
    border-radius: 24px;
    align-items: center;
    flex-direction: column;
    background-color: #43495a;
    background-color: #242a3f;
}
#name {
  font-size: 400%;
}
#info-div {
  align-self: initial;
  display: flex;
  flex-direction: column;
  background-color: #43495a;
  width: 41vw;
  padding: 4px 16px;
  border-radius: 16px;
  border: #ffffff solid 4px;
  margin-right: 1vw;
}
#app_menu-div {
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    left: 50vw;
    top: 80vh;
    width: 400px;
    height: 60px;
    border-radius: 96px;
    border: #ffffff solid 4px;
    padding-bottom: 16px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: #4e639a;
    color: white;
    transform: translate(-50%, -50%);
    gap: 12px;
}


.button2 {
    padding: 8px;
    background-color: #4a5471;
    border-radius: 20px;
    border: #ffffff solid 2px;
    color: #ffffff;
    font-size: 130%;
}
#all_info-div {
  display: flex;
  flex-direction: row;
  gap: 2vw;
}
#avatar-form {
  margin-top: 15px;
  display: flex;
  align-items: center;
}