body {
  background-color: black;
  height: 100vh;  
  display: grid;
  place-items: center;
  margin: 0;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
}

footer{
 display:flex;
 flex-direction:row;
 justify-content:center;
 align-items:center;
 flex-wrap:wrap;
 background-image:url("https://s94.nl/s94.svg");
 background-size:auto;
 background-repeat:no-repeat;
 background-position-x:45%;
 background-position-y:38%;
}
.contact-info .contact-item a{
 color:#adadad !important;
 text-shadow:rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) -1px 0px 1px !important;
}
.firstone{

    border-radius:25px;
}

/* Footer */
footer{
 background-color:#424242;
 transform:translatex(0px) translatey(0px);
 box-shadow:0px -5px 50px 27px rgba(255,255,255,0.1);
}

/* Contact item */
footer .contact-info .contact-item{
 background-color:#262626 !important;
 box-shadow:0px 0px 11px 2px #4c4c4c !important;
}


/* Firstone */
#logo .firstone{
 background-color:#424242;
}

/* Image */
#logo img{
 box-shadow:0px 0px 47px 2px rgba(0,0,0,0.1);
}


/* Import Google Fonts */
@import url("//fonts.googleapis.com/css2?family=Exo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Footer */
footer{
 border-top-left-radius:25px;
 border-top-right-radius:25px;
 border-bottom-left-radius:25px;
 border-bottom-right-radius:25px;
 box-shadow:0px -5px 50px 60px rgba(255,255,255,0.1);
}

/* Contact item */
footer .contact-info .contact-item{
 background-color:#feeaae;
}

/* Contact text */
.contact-info .contact-item a.contact-text{
 font-weight:400;
 font-family:'Exo', sans-serif;
}

/* Contact text */
.contact-info .contact-item span.contact-text{
 font-family:Exo, sans-serif;
 font-weight:400;
}

/* Contact icon */
.contact-info .contact-item .contact-icon{
 filter: invert(0.79);
}



.contact-text:hover {
    color: #aaa; /* Slightly change color on hover for better UX */
}

footer {
  width: 50%;

  padding: 20px 0;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
  border-radius:;
}

.contact-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.contact-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.contact-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.contact-icon {
  margin-right: 10px;
  font-size: 20px;
}

.contact-text {
  color: black;
  font-weight: 500;
   text-decoration: none; /* Remove the default underline */
    transition: color 0.3s ease; /* Smooth color transition for hover */
}

/* Mobile styles */
@media (max-width: 768px) {
  .contact-info {
    flex-direction: column;
  }

  .contact-item {
    margin: 10px 0;
    width: 80%;
    justify-content: center;
  }
}

#logo {
  position: relative;
  width: 300px;
  aspect-ratio: 1000 / 556;
  user-select: none;
}

#logo > img {
  width: 100%;
  position: absolute;
}

/* -- Links -- */

#links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  padding: 1rem;
}

.meta-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meta-link > :is(span, a) {
  font-family: "Rubik", sans-serif;
  font-size: 1.25rem;
  color: white;
}

.meta-link > .label {
  text-align: right;
}

.meta-link > a {
  text-decoration: none;
  outline: none;
}

.meta-link > a.source {
  color: rgb(94, 106, 210);
}

.meta-link > a:is(:hover, :focus) > i {
  color: white;  
}

.meta-link > a.youtube {
  color: rgb(239, 83, 80);
}

.meta-link > a.youtube > i {
  padding-top: 0.2rem; 
}

.meta-link > a > i {
  height: 1rem;
  line-height: 1rem;
}