body {
background-color: black;
font-family: "Poppins", sans-serif;
color: #edf0f1;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;

}

.parent {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 1;
}


.bricks,
.shadows,
.char,
.title { 
position: absolute;
top: 0; 
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
will-change: transform; 

}

.bricks { z-index: 1; }
.shadows { z-index: 2; }
.char { z-index: 3; }
.title {
display: inline;
border: white solid 5px;
padding: 10px;
border-radius: 60px;
background-color: rgba(0, 0, 0, 1);
z-index: 4; 
display: flex; 
align-items: center;
justify-content: center;
color: rgb(192, 23, 23);
font-size: 60px;
font-family: 'Poppins', sans-serif;
text-align: center;
width: auto; 
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: normal;
transition: background-color 0.25s,
color 0.25s,
border 0.25s;
}
.title:hover{
    background-color: #808080;
    color: #303030;
    border: black solid 5px;
}
.welcome {
display: inline-block; 
width: 100%;
color: white;
font-size: 30px;
font-family: 'Poppins', sans-serif;
margin-bottom: 20px;
border: white, solid, 3px;
padding: 10px;
border-radius: 30px;
}
.content-below-parallax {
display: flex;
justify-content: center;
position: relative;
z-index: 2;
width: 100%; 
max-width: 100%;

margin-top: 100vh;
padding: 40px;
box-sizing: border-box;
background:linear-gradient(0deg, black, black, black,  rgba(0,0,0,0));
color: white;
text-align: center;


}

.content-below-parallax > *{
transform: translateY(20px);
transition: transform 0.25s;
}
.content-below-parallax:hover{
transform: translateY(0);
}
      
.link-buttons-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 30px;
margin-bottom: 30px;
width: 100%;
}

       
.link-button {
position: relative;
width: 300px;
height: 300px;
border: 3px solid white;
border-radius: 30px;
overflow: hidden;
text-decoration: none;
color: inherit;
display: flex;
}
.link-button-img {
display: block;
width: 300px;
height: 300px;
border-radius: 20px;
object-fit: cover;
}
.link-button-overlay {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-family: 'Poppins', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s;
padding: 10px;
box-sizing: border-box;
text-align: center;
}
.link-button-overlay > *{
transform: translateY(20px);
transition: transform 0.25s;
}
.link-button:hover .link-button-overlay {
opacity: 1;
}
.link-button:hover .link-button-overlay > * {
transform: translateY(0);
}

.image-title {
font-size: 2em;
font-weight: bold;
margin-bottom: 0.5em;
}
.image-description {
font-size: 1.25em;
margin-top: 0.25em;
text-align: center;
}