body {
  font-family: "Ribeye", serif;
  font-family: 
  background: #ffffff;
  background-image: url("https://wallpapers.com/images/hd/grass-and-sky-background-hbt2fil5g1fuadjf.jpg");
  animation: fadeIn 4s forwards; /* Apply the animation */

}

@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

.column1 {
  float: left;
  width: 12%;
  height: 500px;
  background-color: white;
  margin-top: 40px;
  margin-left: 390px;
  position: absolute;
  border: 4.2px solid black;
          
    
}

.column2 {
  float: right;
  width: 55%;
  height: 500px;
    background-color: white;
      margin-top: 20px;
    margin-left: 600px;
  position: absolute;
    border: 6px solid red;

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}