/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
.box {
        padding: 10px;
        border: 1px solid white;
        margin: 50px;
        background-color: #edfff5;
      }
      #moveimg {
        width: 170px;
        height: 170px;
        position: absolute;
        top: 10px;
        left: 10px;
      }
body {
  /* background-image: linear-gradient(to right, #DCD3F0, #738BE5);*/
  color: black;
  text-align: center;
  font-family: Verdana;
  /* background-image: url('/assets/media/4.jpg'); */
  /* background-image: linear-gradient(to right, #DCD3F0, #738BE5); */
  background-color: #FEAEC9;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}
a { color: #ff00e1; }
a:link, a:visited {
    color: #ff00e1;
}

.toolbar {
  height: 85%;
  width: 3%;
  position:fixed;
  right: 0.5%;
  bottom:1%;
  margin-top:0px;
  background-color: #FEAEC9;
  border: 5px solid #FF6189;
  border-radius: 10px;
  padding: 5px;
  justify-content: center;
}

.window {
  background-color: #FEAEC9;
  border: 5px solid #FF6189;
  border-radius: 10px;
  padding: 5px;
  /* text */
   font-family: "Crimson Text", serif;
    font-weight: 700;
    font-style: italic;
  font-size: 30px;
  color: #fff;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

/* hasta aqui texto glowy */
button {
  background: linear-gradient(90deg,var(--mid-color) 0%,var(--lt-color) 100%);
  color: var(--dkest-color);
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 2px solid var(--dk-color);
  font-family: "magica";
  font-size: 1em;
  font-weight: 700;
  margin: 0;
  cursor: pointer;
  transition: .2s;
}
button:hover {
  background: linear-gradient(to right, #9ecbff, #FEAEC9);
  color: white;
}

/* fonts */
@font-face {
                font-family: AngelicWar;
                src: url('/assets/fonts/AngelicWar.ttf');
            }
            @font-face {
                font-family: Gothic Valentine;
                src: url('/assets/fonts/Gothic Valentine.ttf');
            }
            .mochiy-pop-p-one-regular {
                font-family: "Mochiy Pop P One", serif;
                font-weight: 400;
                font-style: normal;
            }
            .crimson-text-regular {
                font-family: "Crimson Text", serif;
                font-weight: 400;
                font-style: normal;
            }
            .crimson-text-semibold {
                font-family: "Crimson Text", serif;
                font-weight: 600;
                font-style: normal;
            }
            .crimson-text-bold {
                font-family: "Crimson Text", serif;
                font-weight: 700;
                font-style: normal;
            }
            .crimson-text-regular-italic {
                font-family: "Crimson Text", serif;
                font-weight: 400;
                font-style: italic;
            }
            .crimson-text-semibold-italic {
                font-family: "Crimson Text", serif;
                font-weight: 600;
                font-style: italic;
            }
            .crimson-text-bold-italic {
                font-family: "Crimson Text", serif;
                font-weight: 700;
                font-style: italic;
            }

/* end of fonts */

            h1 {
                font-family: "Crimson Text", serif;
                font-weight: 700;
                font-style: italic;
                font-size: 35px;
                color: #e60073;
                text-align: center;
            }
            p {
                font-family: Arial, sans-serif;
                font-size: 15px;
                color: #333;
                max-width: 600px;
                margin: 20px auto;
                margin-top: 10px;
                text-align: center;
            }
            .image-container {
                margin-top: 20px;
            }
            img {
                max-width: 100%;
                border-radius: 10px;
            }
/* header */
            nav ul {
                list-style-type: none; /* Quitamos las viñetas de la lista */
                color: black;
            }
            nav li {
                display: inline; /* Ítems del menú en una línea horizontal */ 
            }
            header {
                background-image: url('/assets/media/stars3.jpg');
                  background-repeat: no-repeat;
                  background-position: center center;
                  background-size: cover;
                  background-attachment: fixed;
                border: 5px solid #FF6189;
                border-radius: 10px;
                color: #fff;
                padding: 3px;
            }
            
            nav ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            
            nav li {
                display: inline; /* Hace que los ítems del menú estén en una línea horizontal */
                margin-right: 20px; /* Espacio entre los ítems del menú */
            }
            
            nav a {
                text-decoration: none;
                color: #fff;
                font-size: 16px;
            }
            
            nav a:hover {
                text-decoration: underline;
            }
/* end of header */
    .box {
      background: white;
      }
    .clock {
      color: pink;
      }
    .button {
      background-image: linear-gradient(to right, #f2fffd, #b0ebe2);
      color: #FE6287;
      font-size: 30px;
      border-radius: 20px;
      border: 6px solid #9ecbff;
      font-family: "AngelicWar", serif;
      padding: 8px 16px;
      cursor: pointer;
      display: inline-block;
    }
    
    /* footer */
    .footer {  
        display: flex;
        text-align: center;
        margin: auto;
        justify-content: center;
        background-color: white;
        border: 5px solid #FF6189;
        border-radius: 10px;
      }
  
      .footer div {
        padding: 5px;
        font-size: 20px;
        text-align: center;
        margin: auto;
      }
      
      /* DROPDOWN START */
      /* Dropdown Button */
      .dropbtn {
        background-color: #FEAEC9;
        color: black;
        padding: 16px;
        font-size: 16px;
        border: none;
      }
      
      /* The container <div> - needed to position the dropdown content */
      .dropdown {
        position: relative;
        display: inline-block;
      }
      
      /* Dropdown Content (Hidden by Default) */
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      }
      
      /* Links inside the dropdown */
      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }
      
      /* Change color of dropdown links on hover */
      .dropdown-content a:hover {background-color: #FEAEC9;}
      
      /* Show the dropdown menu on hover */
      .dropdown:hover .dropdown-content {display: block;}
      
      /* Change the background color of the dropdown button when the dropdown content is shown */
      .dropdown:hover .dropbtn {background-color: #FF6189;}
      /* DROPDOWN END */
      
       /* FLEXBOX START */
       .container {
        max-width: 960px;
        margin: auto;
        line-height: 1.5;
      }
      
      
      .flex-grid {
        display: flex;
        margin: auto -1rem 1rem;
      }
      
      .col {
        border: 5px solid #FF6189;
        border-radius: 20px;
        /* background-image: url('/assets/media/box.jpg'); */
        /* background-color: white; */
        background-image: url('/assets/media/pink.jpg');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
          background-attachment: fixed;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding: 1rem;
      }
      
      .sidebar {
        flex: 1;
      }
      
      .main {
        flex: 3;
        max-width:510px;
      } 
      /* FLEXBOX END */
      
      /* SCROLL WINDOW */
      .scroll {
        height:120px;
        width:160px;
        border:1px solid #ccc;
        font:16px/26px Georgia, Garamond, Serif;
        overflow:auto;
      }
      .scroll2 {
        height:220px;
        width:520px;
        border:1px solid #ccc;
        font:16px/26px Georgia, Garamond, Serif;
        overflow:auto;
      }
          /* FLEXBOX END */
          
      .onebox {
        border: 5px solid #FF6189;
        border-radius: 20px;
        background: white;
        margin: 20px;
        padding: 1rem;
      }