html {
  background-image: url("fondo.png");
}

a {
  color: rgb(214, 170, 12);
  text-decoration: none;
  display: inline;
}


/* Style the header */
.header {
  padding: 20px;
  text-align: center;
  
}

#logo {
  text-align: center;
  color: rgb(214, 170, 12);   /* Color de texto */
  font-family: "Audiowide", sans-serif;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color:rgba(69, 95, 144, 0.64);
  margin-left: 15%;
  margin-right: 15%;
  margin-bottom: 20px;
}

.topnav ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

.topnav li {
                padding-top: 10px;
            }

.topnav li a {
  float: left;
  display: block;
  color: rgb(214, 170, 12);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
            }
.topnav li a:hover {
  background-color: rgb(214, 170, 12);
  color:rgba(69, 95, 144, 0.64);
            }


#flex {
                display: flex;
            }

            /* this colors BOTH sidebars
    if you want to style them separately,
    create styles for #leftSidebar and #rightSidebar */
            aside {
                background-color: rgba(69, 95, 144, 0.64);
                padding: 10px;
                font-size: smaller;
                /* this makes the sidebar text slightly smaller */
                position: relative;
            }


            /* this is the color of the main content area,
    between the sidebars! */
            main {
                background-color: rgba(69, 95, 144, 0.64);
                flex: 1;
                padding: 20px;
                order: 2;
            }

            /* what's this "order" stuff about??
    allow me to explain!
    if you're using both sidebars, the "order" value
    tells the CSS the order in which to display them.
    left sidebar is 1, content is 2, and right sidebar is 3! */

            */ #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }


p{
  color: rgb(255, 255, 255);   /* Color de texto */
}

h1 {
  text-align: center;
  color: rgb(214, 170, 12);   /* Color de texto */
}

h2 {
  text-align: center;
  color: rgb(214, 170, 12);   /* Color de texto */
}

h3{
    text-align: center;
    color: rgb(27, 28, 74);
}

.iosona {
position:absolute;
pointer-events:none;
top:220px;
width:270px;
height:370px;
background-image:url('IMG_3827\ \(1\).png');
display:inline-block;
margin-right:1000px;
margin-left:-20px;
z-index:2;
}


.textbox{
    text-align: right;
    margin-top: 0;
    margin-left: 200px;
    z-index: 0;
}

.logbook {
  margin-top: 5px;
  background-color: #253258;
  border-width:1px;
  border-style:solid;
  border-radius:1px;
  padding: 2px;
  line-height: 0.9;
  margin: 1px;
  overflow-y: scroll;
}




.logbook a {
  float: left;
  color: rgb(214, 170, 12);
  text-align: right;
  padding: 14px 16px;
  text-decoration: none;
            }


.socials {
  background-color:transparent;
  padding: 2px;
  line-height: 0.9;
  height: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.socials ul {
                display: flex;
                padding: 0;
                margin: auto;
                list-style-type: none;
            }

.socials li {
                padding-top: 5px;
            }

.socials li a {
  float: left;
  display: block;
  color: rgb(214, 170, 12);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
            }
.socials li a:hover {
  background-color: rgb(214, 170, 12);
  color:rgba(69, 95, 144, 0.64);
            }


.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.imgtxt span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 1rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.imgtxt:hover span, .imgtxt:focus span {
  opacity: 1;
}

            footer {
                background-color: rgba(214, 170, 12, 0.686);
                /* background color for footer */
                width: 50%;
                height: 40px;
                padding: 10px;
                text-align: center;
                /* this centers the footer text */
            }


.moon{
  display: block;
  margin-left: auto;
  margin-right: 60px;
  width: 50%;
  }
  
#statuscafe {
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}