@import url(reset.css);
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,200;8..144,300;8..144,500;8..144,700&family=Roboto:wght@100;300;400;500;700;900&display=swap');

a {
    color: #fff;
}

body {
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Flex', sans-serif;
background-color: rgb(7, 7, 7);
display: flex;
justify-content: center;
}

.main-container {
    width: 800px;
    height: 100vh ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logo {
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img {
    max-height: 70%;
}

.links {
    width: 70%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.links h3 {
    color: #e7e7e7;
    font-size: 32px;
    font-weight: 700;
}

.links a {
    width: 55%;
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    background-color: #FFAF00;
    color: #202020;
    font-weight: 700;
    border-radius: 16px;
    cursor: pointer;
}

.links a:active {
    background-color: #ce8e05;
    transform: translateY(-1px);
}

.tg-shop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
    height: 33%;
}

.tg-chat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
    height: 33%;
}

.tg-channel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
    height: 33%;
}

.bounce-in-left {
	-webkit-animation: bounce-in-left 1.1s both;
	        animation: bounce-in-left 1.1s both;
}

.slide-in-left {
	-webkit-animation: slide-in-left 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-1 {
	-webkit-animation: slide-in-left 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
	        animation: slide-in-left 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
}

.slide-2 {
	-webkit-animation: slide-in-left 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
	        animation: slide-in-left 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
}

 @-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  
@-webkit-keyframes bounce-in-left {
    0% {
      -webkit-transform: translateX(-600px);
              transform: translateX(-600px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 0;
    }
    38% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
    55% {
      -webkit-transform: translateX(-68px);
              transform: translateX(-68px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    72% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    81% {
      -webkit-transform: translateX(-28px);
              transform: translateX(-28px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    90% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    95% {
      -webkit-transform: translateX(-8px);
              transform: translateX(-8px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  @keyframes bounce-in-left {
    0% {
      -webkit-transform: translateX(-600px);
              transform: translateX(-600px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 0;
    }
    38% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
    55% {
      -webkit-transform: translateX(-68px);
              transform: translateX(-68px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    72% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    81% {
      -webkit-transform: translateX(-28px);
              transform: translateX(-28px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    90% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    95% {
      -webkit-transform: translateX(-8px);
              transform: translateX(-8px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  
  @media screen and (max-width: 480px) {
    .links h3 {
        font-size: 28px;
    }

    .links a {
        width: 75%;

    }
  }

  @media screen and (max-width: 410px) {
    .links h3 {
        font-size: 22px;
    }

  }