/* 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." */

body {
  background-image: url('../images/thumb_CLOVER1.jpg');
  background-color: #FFEDAB;
  color: black;
  /* font-family: 'Courier New', Courier, monospace; */
  font-size: 15px;

  overflow: auto;
  scrollbar-width: thin;
}


/* Container */
.container {
  display: flex;
  align-items: flex-start;
  
  justify-content: center;

  text-align: center;

  margin: 60px 10%;
  top: 2%;  /* position the top  edge of the element at the middle of the parent */

  padding: 20px;

  background-color: #ffffff9d;
  border-style: double;
  border-radius: 10px;
}

/* Main */
.main {
  background-color: #ffffff;
  
  color: black;
  border-style: solid;
  border-radius: 20px;
  
  padding: 50px;
  padding-top: 10px;

  width: auto;
  text-align: justify;

  margin-top: 30px;
}
.main h2 {
  text-align: center;
}
.main .canguro  {
  height: 250px;
}
.main .canguro img {
  height: 250px;
}
.divider {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}



.sidebar {
  /* background-color: #ffffff; */
  /* border-style: solid;
  border-radius: 20px; */

  width: auto;
  height: auto;
  padding: 20px;

  text-align: left;
}

/* Barra izquierda */
.left {
  margin: 0 20px 0 50px;
}

/* Barra derecha */
.right {
  margin: 0 50px 0 20px;
  padding-right: 30px;
}
.stamps {
  list-style: none;
  display: flex;
}

.tcenter {
  text-align: center;
}

/* cajas */
.box {
    border-style: solid;
    border-color: #1f3329;
    border-width: 2px;
    border-radius: 10px;

    background-color: #f7f7f7;
    margin-bottom: 5px;
}
.box p {
    margin-left: 5px;
    padding-bottom: 5px;
}

/* Titulo con favicon */
.title-with-pic {
  display: flex;
  background-color: #1c5238;
  border-radius: 5px 5px 0 0;
  padding: 4px;
  color: #f7f7f7;
}

.title-with-pic img {
  width: 20px;
  height: 20px;

  margin-right: 10px;
}

/* enlaces finales */
.enlaces {
  display: flex;
  text-align: center;
  justify-content: center;
}
.enlacesBlog {
  text-align: center;
}
.button {
  display: flex;
  border-radius: 4px;
  border-style: solid;
  border-width: 2px;
  border-color: #1f3329;

  color: #1c5238;
  background-color: #f7f7f7;

  padding: 5px;
  margin: 5px;
}
.button img {
  width: 20px;
  height: 20px;

  margin-right: 10px;
}
.button a {
  text-decoration: none;
  color: #1c5238;
  display: flex;
}
.button a:hover {
  color: #27a065;
}

/* Contenido del main */
.content {
  display: flex;
}
.boxCont {
  padding: 20px;

  border-style: solid;
  border-width: 1px;
  border-radius: 20px;
  height: 270px;
}
.update {
  padding: 6px;
  height: 270px;
  overflow: scroll;
}
.poll {
  background-image: url('../images/chain\ link\ fence\ 2.gif');
  margin-left: 30px;
}
.status {
  padding: 5px;
}
.story {
  width: 600px;
}

/* CRT Filtro */
.lines {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 300;
  opacity: 0.1;
}
 
.lines:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
  background-size: 100% 4px;
  will-change: background, background-size; animation: scanlines 0.2s linear infinite;
}
 
@keyframes scanlines {
  from {
  background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .5) 51%); background-size: 100% 4px; }
  to {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
  background-size: 100% 4px;
  }
}