body {
        background-image: url(https://i.postimg.cc/j20xntPM/sky3.png);
        display: grid;
        place-items: center; /* Centers both horizontally and vertically */
      
    }

#content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  max-width:1100px;
  min-width: 1100px;
  padding: 2px;
   box-sizing: border-box;
}

#mass-holder {
  margin-top:10px;
 box-sizing: border-box;
 width: 100%;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 gap: 10px;
 text-align: center;
}

iframe {
  box-sizing: border-box;
 height: 100vh; 
 max-width: 100%;
 border: 5px inset;
 border-color: #cedeed;
}

.now-reading-header {
  box-sizing: border-box;
  display: flex;
 justify-content: center;
 width: 100%;
 background-color: white;
 text-align: center;
 padding: 20px;
 background: #c5dced;
background: linear-gradient(0deg, rgba(197, 220, 237, 1) 0%, rgba(197, 220, 237, 1) 50%, rgba(242, 250, 255, 1) 100%);
border: 3px outset;
border-color: white;
}

.what span {
 font-size: 30px; 
 color: #53667A;
 font-family: impact;
}

button {
    box-sizing: border-box;
 width: 100%;
 background-color: white;
 text-align: center;
 padding: 20px;
 background: #c5dced;
background: linear-gradient(0deg, rgba(197, 220, 237, 1) 0%, rgba(197, 220, 237, 1) 50%, rgba(242, 250, 255, 1) 100%);
border: 3px outset;
border-color: white;
 font-size: 25px; 
 color: #53667A;
 font-family: impact;
}

button:hover {
 cursor: pointer; 
 background: #53667a;
background: linear-gradient(0deg, rgba(83, 102, 122, 1) 0%, rgba(151, 178, 199, 1) 50%, rgba(208, 228, 242, 1) 100%);
}


/* style for smaller devices */
    
    @media screen and (max-width: 768px) {
      
      
      #content {
       width: 100%; 
       min-width: 0px;
       padding: 0;
      }
      
      #mass-holder {
       width: 100%; 
       max-height: none;
       padding: 5px;
      }
    }