img  {
  max-width: 850px;
}

body {
  
  background-color: white;
  text-align: center;
  background-image:url(https://files.strawcdn.com/straw/DHjHcbprkoCnoqldiwSU.jpg);
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* visited link */
a:visited {
  color: ;
}

/* mouse over link */
a:hover {
  color: ;
}

/* selected link */
a:active {
  color: ;
}

/* headers */
 h1 {
  color: #2c1a0d;
  outline-color: #614216;
  font-size: 2.5em;
}


    #container {
      border-radius: 10px;
      box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    }

        #container::-webkit-scrollbar {
        width: 0;
        /* remove scrollbar space */
        background: transparent;
        /* to make scrollbar invisible */
        }

        #container::-webkit-scrollbar-thumb {
        background: transparent;
        }
        
      

.box {
  background-image: url(urlhere);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 850px;
  margin: auto;
  padding: 25px;
  border-style: outset;
  border-width: 5px;
  border-radius: 3px;
  border-color: #abdedd;
}

.invisibox {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 700px;
  margin: auto;
  padding: 5px;
}

/* these are float commands, after you put id="left" or id="right" inside the brackets for your img src command after the link */
#right  {
float: right;    
 margin: 15px;
}

#left  {
float: left;    
 margin: 15px;
}