:root{
    --gray:#333132;
	--pink:#EE478D;
	--btnPink:#ee9fc0;
}
@font-face {
    font-family: 'neutra';
    src: url('./fonts/neutra.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/lato.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/latoBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('./fonts/latoBlack.woff2') format('woff2');
}

body{box-sizing: border-box;font-size:62.5%;margin:0;}
a{text-decoration:none;-webkit-transition:all 0.3s ease-out;-webkit-transition:0.3s ease-out;transition:0.3s ease-out;}
h2, h3{font-family: "neutra", serif;line-height: 75px;}
p{font-family: "Lato", serif;font-size:2em;line-height: 25px;}
.background{position:absolute;background-image:url(./splash.jpg);background-size: cover;width: 100%;height: 100vh;background-repeat:no-repeat;z-index:-1;animation: fadeIn 5s;}
.header{margin:0 5%;padding-top:10px;display:flex;justify-content:space-between;align-items:center;}
.header a.logo img{width:300px;height:auto;}
.header a.logo:hover{opacity:0.7;}
.header .social{display:flex;gap:15px;}
.header .social a{color:var(--gray);font-size:2.25em;}
.header .social a:hover{color:var(--pink);}

.content{margin:0 5%;}

/*SPLASH*/
.splash{display:flex;flex-direction:column;justify-content: center;margin-top:100px;}
.splash h2{color:var(--gray);font-size:8em;margin:0;}
.splash .countdown p{margin:0;font-family: "neutra", serif;color:var(--gray);font-size:6em;line-height:60px;width:100%;}
.splash p{width:60%;}
.splash h3{margin:0;font-family: "neutra", serif;color:var(--gray);font-size:6em;line-height:60px;width:100%;}

.srOnly{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

/*Button*/
.btn{
    position:relative;
    z-index:0;
    width:240px;
    height:56px;
    text-decoration:none;
    font-size:1.5em; 
    font-weight:900;
    color:var(--gray);
    transition:all .3s ease;
	font-family: 'Lato', serif;
}
.btnText{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
}
.btn::before,
.btn::after,
.btnText::before,
.btnText::after{
    content:'';
    position:absolute;
    height:3px;
    border-radius:2px;
    background:var(--gray);
    transition:all .5s ease;
}
.btn::before{
    top:0;
    left:54px;
    width:calc( 100% - 56px * 2 - 16px );
}
.btn::after{
    top:0;
    right:54px;
    width:8px;
}
.btnText::before{
    bottom:0;
    right:54px;
    width:calc( 100% - 56px * 2 - 16px );
}
.btnText::after{
    bottom:0;
    left:54px;
    width:8px;
}
.btnLine{
    position:absolute;
    top:0;
    width:56px;
    height:100%;
    overflow:hidden;
}
.btnLine::before{
    content:'';
    position:absolute;
    top:0;
    width:150%;
    height:100%;
    box-sizing:border-box;
    border-radius:300px;
    border:solid 3px var(--gray);
}
.btnLine:nth-child(1),
.btnLine:nth-child(1)::before{
    left:0;
}
.btnLine:nth-child(2),
.btnLine:nth-child(2)::before{
    right:0;
}
.btn:hover::before,
.btn:hover .btnText::before{
    width:8px;
}
.btn:hover::after,
.btn:hover .btnText::after{
    width:calc( 100% - 56px * 2 - 16px );
}
.btnSqig1,
.btnSqig2{
    position:absolute;
    z-index:-1;
    border-radius:16px;
    transform-origin:16px 16px;
}
.btnSqig1{
    top:-16px;
    left:40px;
    width:32px;
    height:0;
    transform:rotate( 30deg );
}
.btnSqig2{
    top:44px;
    left:77px;
    width:32px;
    height:0;
    transform:rotate(-127deg );
}
.btnSqig1::before,
.btnSqig1::after,
.btnSqig2::before,
.btnSqig2::after{
    content:'';
    position:absolute;
}
.btnSqig1::before{
    bottom:0;
    left:0;
    width:0;
    height:32px;
    border-radius:16px;
    transform-origin:16px 16px;
    transform:rotate( -60deg );
}
.btnSqig1::after{
    top:-10px;
    left:45px;
    width:0;
    height:32px;
    border-radius:16px;
    transform-origin:16px 16px;
    transform:rotate( 69deg );
}
.btnSqig2::before{
    bottom:0;
    left:0;
    width:0;
    height:32px;
    border-radius:16px;
    transform-origin:16px 16px;
    transform:rotate( -146deg );
}
.btnSqig2::after{
    bottom:26px;
    left:-40px;
    width:0;
    height:32px;
    border-radius:16px;
    transform-origin:16px 16px;
    transform:rotate( -262deg );
}
.btnSqig1,
.btnSqig1::before,
.btnSqig1::after,
.btnSqig2,
.btnSqig2::before,
.btnSqig2::after{
    background:var( --btnPink );
}
.btn:hover .btnSqig1{
    animation:drow1 ease-in .06s;
    animation-fill-mode:forwards;
}
.btn:hover .btnSqig1::before{
    animation:drow2 linear .08s .06s;
    animation-fill-mode:forwards;
}
.btn:hover .btnSqig1::after{
    animation:drow3 linear .03s .14s;
    animation-fill-mode:forwards;
}
.btn:hover .btnSqig2{
    animation:drow4 linear .06s .2s;
    animation-fill-mode:forwards;
}
.btn:hover .btnSqig2::before{
    animation:drow3 linear .03s .26s;
    animation-fill-mode:forwards;
}
.btn:hover .btnSqig2::after{
    animation:drow5 linear .06s .32s;
    animation-fill-mode:forwards;
}
@keyframes drow1{
    0%   { height:0; }
    100% { height:100px; }
}
@keyframes drow2{
    0%   { width:0; opacity:0;}
    10%  { opacity:0;}
    11%  { opacity:1;}
    100% { width:120px; }
}
@keyframes drow3{
    0%   { width:0; }
    100% { width:80px; }
}
@keyframes drow4{
    0%   { height:0; }
    100% { height:120px; }
}
@keyframes drow5{
    0%   { width:0; }
    100% { width:124px; }
}
/*End Button*/

@keyframes fadeIn {
            0% {
                background-position: 0 0;
                opacity: 0;
            }
            100% {
                background-position: 99% 100%;
                opacity: 1;
            }
        }

@media only screen and (max-width: 1521px) {
.background{background-position:99% 0;}
}

@media only screen and (max-width: 797px) {
	.splash p{width:100%;}
}
@media only screen and (max-width: 451px) {
	.header{flex-direction:column;}
	.header .social{margin:20px 5%;}
	.splash{margin-top:80px;}
}