/*base*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --sky-bg: #9bc5f1;
  --surface-1: #d9ebff;
  --surface-2: #c6defa;
  --text-main: rgb(31, 42, 54);
  --text-soft: #4a5b6e;
  --accent: #4fa3ff;
  --accent-soft: #7bbcff;
  --border-soft: rgba(120, 150, 190, 0.4);
}

::selection {
  background: #b1cfe4;
}

::-moz-selection {
  background: #b1cfe4;
}

body {
  animation: fadeInAnimation ease 3s forwards;
  font-family: Segoe;
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
    url(/imagenes/w7wallpaper.jpg) fixed center / cover no-repeat;
  color: var(--text-main);
}

/*fuentes*/
@font-face {
  font-family: "Segoe";
  src: url("fuentes/SegoeAlt.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Frutiger";
  src: url("fuentes/Frutiger.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "VGA";
  src: url("fuentes/VGABios.woff") format("woff");
  font-display: swap;
}

/*Layout principal*/
a {
  color: var(--accent);
  text-decoration: underline;
}

a:hover {
  color: var(--accent-soft);
}

#header,
#navbar,
#main,
#footer {
  margin: auto;
  max-width: 70%;
}

#navbar {
  background-color: #f0f8ff;
  display: flex;
  align-content: center;
  font-family: Segoe;
  padding: 5px 20px;
  border: 3px solid var(--accent);
}

#navbar p {
  font-size: 2.2rem;
  margin: 0;
}

#header {
  margin: 50px auto 0;
  border-radius: 25px 25px 0 0;
}

#headerinside {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh 4vw;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
  border: 1px solid var(--accent);
  box-shadow: 0 4px 12px rgba(31, 42, 54, 0.4);
}

.header-text h1,
.header-text h2 {
  font-family: VGA;
  letter-spacing: 3px;
}

.header-text h1 {
  font-size: clamp(48px, 8vw, 96px);
}

.header-text h2 {
  font-size: clamp(22px, 3vw, 40px);
  color: var(--text-soft);
}

.avatar {
  width: 150px;
  height: auto;
}

#main {
  display: flex;
  min-height: 90vh;
  max-height: 100vh;
  width: 70%;
  margin: 0 auto 2vh;
  background: var(--surface-1);
  backdrop-filter: blur(6px);
  border-radius: 0 0 18px 18px;
  border: 1px solid rgba(231, 212, 181, 0.8);
  box-shadow: 0 4px 12px rgba(31, 42, 54, 0.4);
  overflow: hidden;
}
#leftside {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  min-width: 250px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden; /* Hide horizontal scrollbar */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(220, 235, 255, 0.6));
  backdrop-filter: blur(6px);
  border-right: 1px solid var(--border-soft);
  padding: 2vh 1.5vw;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#leftside::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
}

.widget {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65));
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 1.2em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 10px rgba(30, 50, 80, 0.18);
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.widget h3 {
  font-family: Frutiger, Segoe, sans-serif;
  font-size: 1.1rem;
  letter-spacing: 1px;
  margin-bottom: 0.8em;
  padding-bottom: 0.4em;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border-soft);
}

.widget a {
  display: block;
  padding: 0.3em 0.4em;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-main);
}

.widget a:hover {
  background: rgba(200, 225, 255, 0.6);
}

.widget::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.8em;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.widget img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#updates {
 max-height: 10rem;
  overflow-y: auto;
}

#updates::-webkit-scrollbar {
  width: 7px;
}

#updates::-webkit-scrollbar-track {
  border-radius: 8px;
  background: rgba(200, 225, 255, 0.4);
}

#updates::-webkit-scrollbar-thumb {
  background: var(--accent-soft);
  border-radius: 6px;
  width: 5px;
}
/*::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
  margin: 0.3rem;
}*/

#middle {
  width: 75%;
  font-size: 1.2rem;
  line-height: 25px;
  background-image: url("images/linebg.png");
  background-color: #ffffff;
  overflow: auto;
  border-radius: 0 0 1% 0;
  margin: 0 auto;
  padding: 0;
  position: relative;
  gap: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#middle::-webkit-scrollbar {
  display: none;
}

.middle-inside {
  margin: 3%;
}

.glass {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 0;
  padding: 10%;
  min-height: 100%;
  box-sizing: border-box;
}

/*navbar*/
.nav-section {
  margin: 20px 10px;
  border-radius: 25px;
  background-color: antiquewhite;
  background-image: url("images/linebg.png");
}

/*banners*/
.banner {
  position: relative;
  top: -5px;
  filter: saturate(30%) contrast(130%);
  margin: auto;
}

.banner img {
  width: 100%;
}

.bannertxt {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  font-family: Frutiger;
  font-size: 20px;
  letter-spacing: 2px;
  margin: 1%;
}

/*buttons*/
button {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(220, 235, 255, 0.85));
  border: 1px solid rgba(120, 150, 190, 0.6);
  width: 12vw;
  height: 5vh;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 2px;
  font-family: Segoe, Frutiger;
  font-size: 0.95rem;
  color: var(--text-main);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 5px rgba(30, 50, 80, 0.2);
  transition: all 0.2s ease;
  cursor: pointer;
}

button:hover {
  background: linear-gradient(to bottom, rgba(235, 245, 255, 1), rgba(200, 220, 255, 0.9));
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

button p {
  margin: 0;
  text-align: center;
}

.navbuttons li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/*animations*/
@keyframes fadeInAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 9999;
  width: 20vw;
  height: 5vh;
}

#glenplayer02 a {
  text-decoration: none;
}

#glenplayer02 > div {
  align-self: center;
}

div.ex2 {
  border-radius: 0.8rem;
  border: 1px solid var(--accent);
  background: linear-gradient(to bottom, rgba(245, 250, 255, 0.8) 0%, rgba(220, 235, 255, 0.7) 45%,
      rgba(185, 220, 255, 0.7) 50%, rgba(160, 210, 250, 0.8) 100%);
  padding: 5px 15px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 0 5px rgba(255, 255, 255, 0.4),
    0 5px 15px rgba(0, 0, 0, 0.3);
  width: 20vw;
  backdrop-filter: blur(3px);
}

.music-controls {
  user-select: none;
  width: 3vw;
  font-size: 1.5rem;
  cursor: pointer;
}

.playy,
.pausee {
  color: var(--text-soft);
}

.sonata {
  color: var(--text-soft);
}

.labeltext {
  font-family: Frutiger;
  font-size: 1.4rem;
  color: var(--accent);
}

.stamps {
  display: flex;
  gap: 0.3vw;
  background-color: var(--sky-bg);
  border: 0.3rem solid var(--accent);
  flex-direction: row;
  padding: 1vh;
}

.media-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
  padding: 1.5em;
}

.description {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}

.description:hover {
  transform: translateY(-10px) scale(1.05);
}

.label {
  color: var(--text-soft);
  font-size: 0.8rem;
  font-family: "VGA";
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 1px 1px 2px var(--accent);
}

.mediatitle {
  text-align: center;
  margin-bottom: 8px;
  font-family: Segoe;
  font-size: 0.9rem;
  color: var(--text-main);
  font-weight: bold;
}

.image-fav {
  width: 12rem;
  height: 12rem;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  filter: sepia(0.3);
}

.image-fav img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 0 5px var(--accent));
}

::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
  margin: 0.3rem;
}


#middle h3 {
  font-family: "VGA";
  color: var(--text-soft);
  margin-bottom: 0.5rem;
  padding: 0.5rem;

}

/*responsive design*/

@media (max-width: 900px) {
    #main {
    flex-direction: column;
    width: 100%;
    min-height: auto;
    max-height: none;
    border-radius: 0;
  }

    #leftside {
    width: 100%;
    min-width: auto;
    order: 0;
    padding: 4vw 4vw 2vw 4vw;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    gap: 1rem;
    justify-content: center;
    }

    #middle {
    order: 1;
    width: 100%;
    padding: 5vw;
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.6;
    border-radius: 0;
    margin: 0;
    max-height: none;
    }


    #headerinside {
    flex-direction: column;
    text-align: center;
    gap: 2vh;
    padding: 3vw 4vw;
    }

    .header-text h1 { font-size: clamp(28px, 10vw, 64px); }
    .header-text h2 { font-size: clamp(16px, 6vw, 28px); }

    .avatar {
    width: 30vw;
    max-width: 120px;
    height: auto;
    }

    button {
    width: 100%;
    max-width: 420px;
    height: auto;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    border-radius: 10px;
    flex-direction: row;
    justify-content: center;
    gap: 0.6rem;
    }

    button p { margin: 0; }

    .navbuttons li { margin-bottom: 0.5rem; }


    #glenplayer02 {
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    width: min(92vw, 480px);
    height: auto;
    padding: 0.4rem;
    }

    div.ex2 { width: 100%; gap: 0.6rem; padding: 0.6rem 0.8rem; }


    .media-container { gap: 1rem; padding: 1rem; }
    .image-fav { width: 40vw; height: 40vw; max-width: 10.5rem; max-height: 10.5rem; }
    .mediatitle { font-size: 1rem; }


    #middle { -webkit-overflow-scrolling: touch; }


    .glass, .widget { box-shadow: none; }
    

    #leftside { display: none; }

    .header-text h1 { font-size: clamp(22px, 12vw, 48px); }
    .header-text h2 { font-size: clamp(14px, 8vw, 22px); }

    .bannertxt { font-size: 14px; letter-spacing: 1px; padding: 0.2rem 0.4rem; }

    .labeltext { font-size: 1.1rem; }

    button {
    padding: 1rem;
    font-size: 1.05rem;
    }

    .image-fav { width: 48vw; height: 48vw; max-width: none; }

    body, .glass, div.ex2, .image-fav img {
         backface-visibility: hidden; filter: none; backdrop-filter: none; 
        }
    }


@media (max-width: 900px) {

  #leftside {
    display: block;
    width: 100%;
    order: 0;
    padding: 0.45rem 0.75rem;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .sidebar-inner {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
  }

  .widget {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    margin: 0 0.35rem;
    border-radius: 10px;
    min-width: auto;
    box-shadow: none;
  }

  .widget h3 { display: none; }

  .widget a {
    display: inline-block;
    padding: 0;
    color: var(--text-main);
  }

  .navbuttons li {
    display: inline-block;
    margin: 0 0.15rem;
    list-style: none;
  }


  .navbuttons li a,
  .sidebar-btn,
  button {
    padding: 0.55rem 0.9rem;
    font-size: 1rem;
    border-radius: 8px;
  }

  #updates,
  .status {
    display: none !important;
  }
}

@media (max-width: 600px) {
  #leftside {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 0.4rem);
    z-index: 999;
    padding: 0.35rem 0.5rem;
  }

  .widget { margin: 0 0.25rem; padding: 0.4rem 0.6rem; }
}