/* Home style */

/* Color themes */
.theme-light {
  --color-social: #000;
  --color-social-hover: #444;
  --color-font: #24292f;      /* Same as style.css */
}
.theme-dark {
  --color-social: #fff;
  --color-social-hover: #aaa;
  --color-font: #c9d1d9;      /* Same as style.css */
}

/* Big logo appearence */
#rookiebwoyBigLogo {
    margin: 10px 25px 50px 25px;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
      -ms-flex-pack: center;
        justify-content: center;
}

#rookiebwoyBigLogoSVG {
  width: 100%;
  max-width: 400px;
}

/* Img version for 404 page - keep equal to svg */
#rookiebwoyBigLogo img {
  width: 100%;
  max-width: 400px;
}

#error404 {
  text-align: center;
}

#error404 h2 {
  font-weight: 900;
}

#error404 a {
  text-decoration: none;
  color: var(--color-font);
}

#error404 a:hover, #error404 a:active {
  text-decoration: underline;
}

/* Social logos appearence */
.socialLogosContainer {
  width: 100%;
  min-height: 10vh;
  
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
    -ms-flex-pack: center;
      justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
    -ms-flex-align: center;
      align-items: center;
}

.socialLogosContainer svg {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin: 5px 5px 5px 5px;
  fill: var(--color-social); 
}

/* when hover the link box -> transform the svg box */
.socialLogosContainer a:hover svg {
  fill: var(--color-social-hover);        /* Color the logo */
  transform: scale(0.9);                  /* Shrink the logo */
  transition: 0.3s;
}

/* when click the link box -> transform the svg box */
.socialLogosContainer a:active svg {
  fill: var(--color-social-hover);        /* Color the logo */
  transform: scale(0.9);                  /* Shrink the logo */
  transition: 0.3s;
}

/* On smaller screens, where width is less than 450px, change the style of the social logo bubbles (smaller size) */
@media screen and (max-width: 450px) {
  .socialLogosContainer svg {width: 60px; height: 60px;}
  #rookiebwoyBigLogo {margin: 10px 25px 25px 25px;}
}