/* hey! this code is NOT free to use! this is my personal. see /sprout 4 templates and awesome code snippets! ✧ദ്ദി( ˶^ᗜ^˶ ) */

main {
 width: 600px;
  margin: auto;
}

.text-container {
  background: none;
  position: relative;
  height: 700px;
}

#box1 {
  border: 2px solid white;
  border-radius: 5px;
  padding: 10px;
  width: 270px;
  height: 130px;
  margin-top: -450px;
  margin-left: 270px;
  overflow: auto;
}

#box2 {
  border: 2px solid white;
  border-radius: 5px;
  padding: 10px;
  width: 200px;
  height: 130px;
  margin-top: 50px;
  margin-left: -10px;
  overflow: auto;
}

mark {
 background: var(--color);
 color: var(--background);
 border-radius: 3px;
 padding: 2px;
}

a {
   text-decoration-line: underline;
  text-decoration-style: wavy; 
}

*, a {
 color: var(--color); 
}

.button, .button:hover {
   color: var(--color);
}

:root[data-theme="light"] {
    --color: black;
    --background: white;
}

:root[data-theme="dark"] {
    --color: white;
    --background: black;
}

.publish-timestamp, .edit-timestamp, .site-footer {
 display: none; 
}

.button, .button:hover {
 background: none; 
}

    @media screen and (max-width: 500px) {
.text-container {
  height: auto;
}
      
p {
 text-align: center; 
}

main {
 width: 360px;
}
   
img {
 width: 100%; 
}
      
#box1 {
 margin-top: 10px;
 margin-left: 50px;
}
      
#box2 {
 margin-top: 20px;
 width: 160px;
}
}