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

}
@keyframes appear{
from{
opacity: 0;
scale: 0.5;
}
to {
opacity: 1;
scale: 1;
}
}
.image img {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: 200px;
object-fit: cover;
margin-top: 30px;
border: 3px, solid, white;
border-radius: 80px;
animation: appear 0.2s linear;
}
.button {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
color: #edf0f1;
border: 3px solid #edf0f1;
border-radius: 40px;
padding: 10px 20px;
height: 50px;
font-weight: bold;
font-size: 30px;
background: rgb(10, 5, 5);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: all 0.3s ease;
margin-top: 30px;
margin-left: auto;

}

.button:hover {
color: white;
background-color: gray;
}

.button:active {
color: black;
background: white;
transform: translateY(1px);
}

.button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
   .container {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #1a1a1a;
border-radius: 10px;
box-shadow: 0 0 15px rgba(94, 94, 94, 0.3);
text-align: center;
border: 5px solid white;
 }
.container h1.title {
font-size: 60px;
color: rgb(255, 255, 255);
margin-bottom: 20px;
display: block;
width: auto;
height: auto;
border: none;
border-radius: 0;
background: none;
padding: 0;
}

.container h2.title,
.container h3.title,
.container h4.title {
font-size: 40px;
color: rgb(255, 255, 255);
margin-top: 30px;
margin-bottom: 15px;
display: block;
width: auto;
height: auto;
border: none;
border-radius: 0;
background: none;
padding: 0;
}

.container p {
color: white;
font-family: 'Poppins', sans-serif;
font-size: 20px;
margin-bottom: 15px;
line-height: 1.5;
}

.container ul {
list-style-type: none; 
padding: 0;
margin-bottom: 20px;
}

.container li {
color: white;
font-family: 'Poppins', sans-serif;
font-size: 18px;
margin-bottom: 5px;
}

.container ul p { 
font-size: 16px;
color: #ccc;
margin-top: -10px; 
margin-bottom: 10px;
}

.container a {
color: #8aff8a;
text-decoration: underline;
}
.container a:hover {
color: #00e600;
}

.left-aligned-image {
display: block;
position: absolute; 
width: 30%; 
height: 70vh;
object-fit: cover;
margin-top: 30px;
left: 0;
border: 5px solid white;
border-radius: 80px;
animation: appear 0.2s linear;
top: 50%;
transform: translateY(-50%);
}

.socials {
display: flex;
gap: 40px;
justify-content: center;
align-items: center;
margin-top: 30px;
margin-bottom: 30px;
position: relative;
transition: transform 0.2s ease-out;

}

.socials a { 
position: relative; 
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
text-decoration: none;
transition: transform 0.2s ease-out;
}

.socials a:hover {
transform: translateY(-5px);
}
.socials svg:hover {
transform: translateY(-5px);

}

.socials svg {
fill: rgb(255, 255, 255);
width: 40px;
height: 40px;

}

.socials svg::before { 
content: attr(data-label); 
position: absolute;
background-color: black;
color: white;
text-decoration: none;
padding: 0.5em 1em;
border-radius: 100px;
transform: translateY(-65px);
opacity: 0; 
visibility: hidden; 
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none; 
white-space: nowrap; 
font-size: 0.9em;
content: attr(data-social);
}

.socials svg:hover::before {
opacity: 1;
visibility: visible; 
transform: translateY(-75px); 
}