@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");

/* 
===========================================
Reset basic css styles, here the asterisk(*) 
is known as the css universal selector and 
selects all the elements in html
===========================================
*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

/* 
==============================
change body background color
==============================
*/
body {
  background: #ffebee;
}

/* 
===========================================
select and style the h1 tag having a 
parent element with class `heading` in html
===========================================
*/
.heading h1 {
  text-align: center;
  padding: 1rem;
  color: red;
  letter-spacing: 1px;
}

/* 
=============================================
select the element with class cat-container
=============================================
*/
.cat-container {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

/* 
==============================================
select and style the img tag having 
the parent element with class `cat-container` 
in html
==============================================
*/
.cat-container img {
  width: 95%;
  max-width: 400px;
  height: 400px;
  border-radius: 10px;
}

/* 
====================================
all other selectors below works as 
shown in above comments
====================================
*/

.fetch-image {
  display: flex;
  justify-content: center;
}

.cat-facts {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fact-block {
  padding: 1rem;
  color: red;
  width: 90%;
  max-width: 900px;
  border: 1px solid blue;
  border-radius: 10px;
  margin: 1rem;
}

.fact-block p {
  font-size: 1.5rem;
  line-height: 1.8rem;
  font-weight: 500;
  letter-spacing: 1px;
}

.more-button {
  display: flex;
  justify-content: center;
  margin-bottom: 5rem;
}

button {
  color: black;
  padding: 5px 10px;
  border: 1px solid red;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 2px;
  background: rgb(255, 255, 177);
  min-width: 150px;
}

/* 
=====================================
hover is a pseudo-class, 
pseudo-class is used to select 
an element in a specific state,
for example here we select a button
when it is being hovered and change 
its backgorund color
=====================================
*/
button:hover {
  background: yellow;
}