/* First ensure that all HTML elements have the box-sizing property set to border-box. 
This makes sure that the padding and border are included in the total width and height of the elements.*/
* {
  margin: 0;
  box-sizing: border-box;
}

/* my variables */
:root {
  --dottedLine: #FFAFCC;
}

/* universal existing properties */

body {
  background-color: #FFDCDC;
  color: #573C67;
  font-family: Verdana;
}

p {
  padding: 5px 0px;
  font-size: 14px;
}

img {
  padding: 5px 0px;
}

h1 {
  color: hotpink;
  padding: 10px 0px;
}

h4 {
  font-size: 16px;
  padding-bottom: 10px;
  color: hotpink;
}

a {
  color: hotpink;
}

a:hover {
  color: #A2D2FF;
}

/* <----- used on thoughts.html -----> */
.blog-page {
  padding: 25px;
}

.blog-entry {
  border-style: dotted;
  border-color: var(--dottedLine);
  padding: 5px;
  margin-bottom: 10px;
 }

.blog-entry:hover {
  background-color: #BDE0FE;
  }


/* <----- used on individual entry pages -----> */
#cloud-bg {
    background-image: url("../Images/andrea-ferrario-3WgPZbsDSkE-unsplash.jpg");
    background-size: cover;  
    background-repeat: no-repeat;
}

.blog-center {
  margin: auto;
  max-width: 700px;
}

.blog-body {
  border-style: dotted;
  border-color: var(--dottedLine);
  margin: 50px 25px;
  padding: 25px;
  background-color: #ffe6f290;
  & img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
    padding: 10px 0px;
  }
  & h4 {
    color: #A2D2FF;
  }
}

.blog-content > p {
  line-height: 1.6;
  padding-bottom: 15px;
}


/* <----- editing how the grid on home page presents itself -----> */
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'left main main main main right'
    'garden garden garden garden garden garden'
    'footer footer footer footer footer footer';
  gap: 10px;
  padding: 10px;
  & div {
    padding: 20px;
    font-size: 16px;
  }
}

.zone1 {
  grid-area: header;
  text-align: center;
  color: #ffffff;
}

.zone2 {
  grid-area: left;
  border-style: dotted;
  border-color: var(--dottedLine);
  }
  
.zone3 {
  grid-area: main;
  border-style: dotted;
  border-color: var(--dottedLine);
}

.zone4 {
  grid-area: right;
  border-style: dotted;
  border-color: var(--dottedLine);
}

.zone5 {
  grid-area: garden;
  border-style: dotted;
  border-color: var(--dottedLine);
  text-align: center;
}

.zone5 img {
  max-width: 200px;
  border: 5px solid #fff;
  border-radius: 4px;
  padding: 0px;
  margin: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.zone5 img:hover {
  transform: scaleX(-1);
}

.zone6 {
  margin: auto;
  grid-area: footer;
}

/* This adds a break point when the screen size goes below 600px (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) */
@media only screen and (max-width: 600px) {
  .zone1 {grid-area: 1 / span 6;}
  .zone2 {grid-area: 2 / span 6;}
  .zone3 {grid-area: 3 / span 6;}
  .zone4 {grid-area: 4 / span 6;}
  .zone5 {grid-area: 5 / span 6;}
  .zone6 {grid-area: 6 / span 6;}
}
/* <----- grid editing over -----> */

/* custom classes */

.img-block {
  display: block;
}


/* custom IDs */

#siteLinks {
  padding: 0px;
}

#siteUpdates {
  height: 200px;
  overflow: scroll;
  background-color: #FFAFCC;
  padding: 5px;
  margin: -5px;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  scrollbar-color: #ff4da6;
  scrollbar-width: thin;
}

#pinkwindow {
  margin-left: -100px;
  margin-top: -100px;
}