* {
  box-sizing: border-box;
}

html {
  background-color: #fff;
}

body {
  background-color: #fff; 
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: monospace, monospace;
 font-size: 13px;
  overflow-x: hidden;
  

  min-height: 100vh; 
  min-height: 100dvh; 
  display: flex;
  flex-direction: column;   
  justify-content: center;  
  align-items: center;      
  
  padding: 20px; 
}


body > * {
  width: 100%;
  max-width: 600px; 
  text-align: center; 
}


@media (max-width: 1024px) {
  html, body {
    overscroll-behavior-y: none; 
    -webkit-overflow-scrolling: touch; 
  }
}

.left-aligned-component {
  align-self: flex-start;
  text-align: left; 
}

.right-aligned-component {
  align-self: flex-end;
  text-align: right; }


.push-to-bottom-component {
  margin-top: auto; }
  
.justified-component {
  width: 100%;             
  text-align: justify;    
  text-justify: inter-word;
}


.floating-image {
  float: left; 
  margin-right: 20px; 
  margin-bottom: 10px; 
  max-width: 200px; 
  width: 100%; 
  height: auto; 
}


@media (max-width: 600px) {
  .floating-image {
    float: none;
    
    display: block;
    margin: 0 auto 15px auto; 

    max-width: 100%; 
  }
}