:root{
    --author-picture-width: 10rem;
    --author-picture-height: auto;
    --book-image-width: 18rem;
    --book-image-height: auto;
    --about-me-margins: 10rem 25rem;
    --about-me-container-margins: 1rem;
    --list-item-margins: 0 1rem;
    --my-name-color: #ff5378;
    --site-bg-color: #ffffff;
    --about-me-card-bg: #f8f7f8;
    --about-me-border: solid #0f0f0f 2px;
    --list-item-text-color: #393939;
    --book-images-box-shadow: 5px 5px 10px #0000007f;
    --testing-bg: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
    --h1-color: #515050;
}

*{
    font-family: Arial, Helvetica, sans-serif;
}
.landing-page-container{
    display: flex;
    justify-content: center;
    align-items: center;
}
img{
    width: var(--book-image-width);
    height: var(--book-image-height);
    box-shadow: var(--book-images-box-shadow);
}

#picture-of-krizel{
    width: var(--author-picture-width);
    height: var(--author-picture-height);
    box-shadow: none;
}

#about-me, .message{
    display:flex;
    justify-content: center;
    align-items: center;
    margin: var(--about-me-margins);
    border:var(--about-me-border);
    background-color: var(--about-me-card-bg);
    border-radius: 20px;
}

.about-me-container{
    margin: var(--about-me-container-margins);
    background-color: var(--about-me-card-bg);
}

.about-me-paragraph{
    background-color: var(--about-me-card-bg);
}

ul{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 0;
}

li{
    list-style: none;
    margin: var(--list-item-margins);
    color: var(--list-item-text-color);
}

a{
    text-decoration: none;
    color: var(--list-item-text-color);
}

#my-name{
    color:var(--my-name-color);
}

input{
    padding: 10px 20px;
    margin: 5px;

}

button {
  align-self: center;
  background-color: #ffffff;
  background-image: none;
  background-position: 0 90%;
  background-repeat: repeat no-repeat;
  background-size: 4px 3px;
  border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
  border-style: solid;
  border-width: 2px;
  box-shadow: #00000033 15px 28px 25px -18px;
  box-sizing: border-box;
  color: #41403e;
  cursor: pointer;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 23px;
  outline: none;
  padding: .75rem;
  text-decoration: none;
  transition: all 235ms ease-in-out;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

button:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
}

button:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}

h1{
    font-size: 24px;
    margin: 0;
    color: var(--h1-color);
}
#hook{
    font-weight: 700;
}

body{
    display:flex;
    flex-direction: column;
    height: 100dvh;
    background-image: var(--testing-bg);
}
footer{
    margin-top: auto;
    display:flex;
    justify-content: center;
    align-items: center;
    color: var(--list-item-text-color);
}

html, body{
    margin: 0;
}

.social-media-tags{
  width: 15px;
  height: auto;
  box-shadow: none;
}

@media screen and (width <= 1000px){
  h1{
    font-size: 18px;
  }
  img{
    width: 10rem;
    height: auto;
  }
  #about-me{
    margin: 10rem 1rem;
    flex-direction: column;
  }
  
  #picture-of-krizel{
    width: 6rem;
    height: auto;
  }
  #about-me-paragraph{
    padding: 0;
  }
  .landing-page-container{
    flex-direction: column;
    padding-inline: 0;
  }
  body{
    display:flex;
    flex-direction: column;
    min-height: 95vh;
  }
  footer{
    margin-top: auto;
    display:flex;
    justify-content: center;
    align-items: center;
  }
  #landing-page{
    margin: 5rem 0;
  }
}