﻿body{
	background: url(back.jpg) no-repeat;
    background-position: center;
    background-size: cover;
	backdrop-filter: blur(5px) brightness(0.8);
    margin: 0;
}

.main{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-logo{
	max-width: 10em;
    margin: auto;
    display: block;
	animation: fadeInUp 5s ease-out;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  65% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.buttons{
	margin: auto;
    display: block;
    width: fit-content;
    margin-top: 50px;
    padding: 30px;
    background-color: #00000050;
    border-radius: 10px;
}

.buttons a{
	font-family: "Winky Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	display: block;
    padding: 10px 20px;
    font-size: 1.5em;
    text-decoration: none;
    color: #fff;
    border-radius: 10px;
	text-align: center;
}

.buttons a:not(:last-of-type){
	margin-bottom: 15px;
}

.buttons a.btn-yt{
	background-color: #FF0000;
}

.buttons a.btn-ig{
	background: radial-gradient(
      circle farthest-corner at 0% 150%,
      rgb(255, 225, 125) 0%,
      rgb(255, 205, 105) 12%,
      rgb(250, 145, 55) 25%,
      rgb(235, 65, 65) 41%,
      transparent 95%
    ),
    linear-gradient(-15deg, rgb(35, 75, 215) -10%, rgb(195, 60, 190) 65%);
}

p{
	text-align: center;
    color: #ffcc4b;
    font-family: 'Winky Sans', sans-serif;
	font-weight: 400;
	font-style: normal;
    text-shadow: 0px 0px 15px #000;
	margin-top: 50px;
	font-size: 1.2em;
}