@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap');

@font-face {
  font-family: 'burbank_big_regularblack';
  src: url('../fonts/burbank_big_regular_black-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  --main-font-size: 18px;
  --main-font: 'Poppins', sans-serif;
  --main-font-weight: 700;
  --main-color: #ffffff;
  --font-shadow-1: none;
  --font-shadow-2: -1px 1px #000000, -1px 1px 1px rgba(0, 0, 0, 0.75);
  --font-shadow-3: -1px 1px #000000, -2px 2px #000000, 0 0 4px #000000;
  --font-shadow-4: -1px 1px #000000, -2px 2px #000000, -3px 3px #000000, 0 0 6px #000000, -2px -1px #000000, -3px -1px #000000, 1px 1px #000000, 1px -1px #000000, -1px -1px #000000;
  --font-shadow: var(--font-shadow-3); 
}

body {
  margin: 0;
  overflow: hidden;
}

main {
  display: flex;
  flex-direction: row;
  font-family: var(--main-font);
  font-size: var(--main-font-size);
  width: calc(100% - 20px);
  padding: 5px 10px 10px 10px;
  overflow: hidden;
}

#socials {
  display: flex;
  flex-direction: row;
  line-height: 1;
  font-size: 2em;
}

#socials div {
  margin: auto 0;
}

.social-media-name {
  display: flex;
  font-weight: var(--main-font-weight);
  color: var(--main-color);
  text-shadow: var(--font-shadow);
}

.no-socials {
  font-size: var(--main-font-size);
  font-weight: 700;
  color: #ffffff;
  text-shadow: var(--font-shadow);
}

.logos {
  display: flex;
  height: .8em;
  margin: auto .35em auto 0 !important;
  filter: drop-shadow(-1px 1px 1px #000000);
}

.logopreview {
  display: flex;
  height: 1em;
  margin: 0 .5em .75em 0 !important;
  filter: drop-shadow(-1px 1px 1px #000000);
}

@keyframes animation-down {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes animation-up {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes anim2-up {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes anim2-down {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

.animation-down {
  animation: animation-down 2s ease-in-out;
}

.animation-up {
  animation: animation-up 1000ms ease-in-out;
}

.anim2-up {
  animation: anim2-up 2s ease-in-out;
}

.anim2-down {
  animation: anim2-down 1s ease-in-out;
}