body {
  background-image: url(../foticos/green&pinkplaid.jpg);
  background-repeat: repeat;
  color: black;
  font-family: Verdana;
  margin: 40px 20px 20px 20px;
}  

@font-face {
  font-family: "KidDos";
  src: url("../foticos/kiddos-regular-webfont.woff") format("woff"),
   url("../foticos/kiddos-regular-webfont.woff2") format("woff2"), url("../foticos/KIdDOS-Regular.ttf") format("truetype");
   }

@font-face {
  font-family: "Notie";
  src: url("../foticos/hello-notie-webfont.woff") format("woff"),
    url("../foticos/hello-notie-webfont.woff2") format("woff2"), url("../foticos/Hello-Notie.otf") format("opentype");
}

h1, h3, h4 {
  text-align: center;
  font-family: Notie;
  font-weight:lighter;
  letter-spacing:1.5px;
  color:rgb(237, 183, 189);
  text-shadow: 4px 3px 6px #f5f7b7;
  transform: scale(1.7);
  transition: 03s;
}

h2 {
  text-align: center;
  font-family: Notie;
  font-weight:lighter;
  letter-spacing:1.5px;
  text-shadow: 4px 3px 6px #f5f7b7;
  transform: scale(1.7);
  color: #bd3e68;
  transition: 0.4s;
}

h3 {
  padding-top: 20px;
  padding-bottom: 7px;
}

h2:hover {
  color:rgb(237, 183, 189);
}

h1:hover, h3:hover, h4:hover {
  color:#f5c4c4;
  opacity: 1;
}

p, a {
  margin-top:0;
  font-family: KidDos;
  font-size:18px;
  color:#3b290b;
  line-height:1.5;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color:rgb(237, 183, 189);
  cursor: pointer;
}

button {
  color: white;
  transition: 0.3s;
  padding: 1px 6px;
  border-radius: 22px;
  border-color:white;
  border-style: solid;
  background-color: rgb(237, 183, 189);
}

button:hover {
  background-color:white;
  color:rgb(237, 183, 189);
  transform: scale(1.1);
  cursor:pointer;
}

.apple-button {
  position: relative;
  display: inline-block;
  left: 22.5px;
  padding: 11px;
  padding-left:35px;
  background-color: white;
  color: rgb(237, 183, 189);
  border-color: rgb(237, 183, 189);
  border-radius: 22px;
  border-style: solid;
  cursor: pointer;
  transition: transform .6s, color .6s, background-color .6s;
  /* Agregado por chat */
  font-weight: bold;
  font-size: 14px;
  z-index: 1;
}

.apple-button:hover{
  background-color: rgb(237, 183, 189);
  color: white;
  border-color:white ;
  transform: scale(1.1) rotate(5deg);
}

.apple-button:active, a:active, button:active{
  opacity: 0.9;
}

.apple-button::before {
   content: "";
   background-image: url("foticos/appleparche.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   position: absolute;
    top: 50%;
   width: 92px;
   height: 92px;
    transform: translateY(-75%) rotate(7deg);
    left:-40px;
   z-index: 2;
   transition: transform .6s;
}

.apple-button:hover::before{
  transform: translateY(-75%) rotate(-17deg)
} 


.date, .updatedate {
  background-image:linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(168, 214, 227, 0.4) 60%);
  background-size:100% 1.2em;
  background-repeat:no-repeat;
  margin:20px;
  transition:0.4s;
  display:inline-block;
}

.date:hover, .updatedate:hover {
  color:rgb(168, 214, 227);
  background-image:linear-gradient(180deg, rgba(255, 255, 255, 0) 80%, rgba(168, 214, 227, 0.3) 20%);
  transform: translate(0,-5%);
}

.entrytitle {
  font-size: 1.2em;
  font-weight: 600;
  line-height:1.6;
}

#journalwrapper {
  max-width:72%;
  margin-left:172.250px;
  margin-right:172.250px;
  display:grid;
  grid-template-areas:
    "header main"
    "nav main"
    ;
  grid-template-columns:30% 70%;
  grid-template-rows:500px 600px;
  gap:30px;
  padding:10px ;
  position:relative;
}

header {
  grid-area: header;
  height: 100%;
  width: 100%;
  position:relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.Mordizcos,.finds{
  position:relative;
  transform:translate(-50%,0%) scale(0.8);
  left: 50%;
}

.de-pensamiento {
  position:relative;
  transform: translate(-50%,0%) scale(0.6);
  left: 50%;
  top:-10px;
}

.Thrift {
  position:relative;
  transform: scale(0.8);
  left:-100px;
  top:20px;
}

.subtitle {
  text-align:center;
  position:relative;
}

.pin {
  height:50px;
  position:absolute;
  z-index:2;
  left:227px;
  top:50px;
}

.mainpic {
  position:relative;
  height: 180px;
  z-index:0;
  transform:rotate(5deg) translate(-50%, 0%);
  margin-top: 30px;
  margin-bottom: 10px;
  left: 50%;
}

.secondpic {
  position:absolute;
  height: 70px;
  left:195px;
  top: 80px;
  z-index:1;
  transform: rotate(25deg);
}

#back {
  left:50%;
  transform: translate(-50%,0%);
  position:relative;;
}

nav {
  grid-area: nav;
  display:flex;
  width:100%;
  height:200px;
  background-image:url("../foticos/rippedpage.png");
  background-repeat: no-repeat;
  background-position:center;
  background-size:cover;
  padding: 30px;
}

main {
  grid-area: main;
  position:relative;
  width:100%;
  height:100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background-image: radial-gradient(circle, #f5f5f5, #faf9f6);
  border-radius: 12px;
  padding: 10px;
}
article {
  grid-area: article;
  border-bottom:1px solid #a8d6e3;
  line-height: 1.5;
}