style.css

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  background-color: antiquewhite;
  font-family: 'Courier New', Courier, monospace;
}
body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.loader{
position :fixed;
top: 0;
left:0;
width:100vw;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:#333333;
transition :opacity .75s,visibility  .75s;
}
.loader--hidden{
opacity:0;
visibility: hidden;
}
.loader::after{
content:"";
width:75px;
height:75px;
border:15px solid #dddddd;
border-top-color:#009578;
border-radius:50%;
 animation:loading .75s  ease infinite
}
@keyframes loading{
from {
transform:rotate(0turn)

}
to {
transform:rotate(1turn);
}
}
.random-facts{
    display: flex;
    flex-direction: column;
}
.kitty-img{
    width: 25rem;
    height: 20rem;
    display: flex;
    background-size: cover;    
    color:rgb(255, 255, 255);
    align-items: center;
    text-align: center;
    margin: 1rem;
    font-size: medium;
    font-weight: 900;
    text-shadow: 2px 2px 6px #000000;
}
.randomize-btn{
    background-color: rgb(232, 153, 153);
    padding:1rem;
    margin: 1rem;
    border-radius: 25px;
}
.text-input{
    padding:1rem;
    margin:1rem;
}
.makeyourown-btn{
    background-color: rgb(232, 153, 153);
    padding:1rem;
    margin: 0.8rem;
    border-radius: 25px;
}
.custom-text{
    width: 25rem;
    height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-size: cover;    
    color:rgb(255, 255, 255);
    align-items: center;
    text-align: center;
    margin: 0.6rem;
    font-size: medium;
    font-weight: 900;
    text-shadow: 2px 2px 6px #000000;
}
.custom-section{
    display: flex;
    flex-direction: column;
    margin:1rem;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.custom-fact{
    display: flex;
    flex-direction: column;
}