*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:#000;

color:#fff;

font-family:monospace;

width:100%;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

overflow:hidden;

}

.container{

width:100%;

display:flex;

justify-content:center;

align-items:center;

}

.box{

width:100%;

max-width:420px;

padding:40px 30px;

border:2px solid #fff;

display:flex;

flex-direction:column;

gap:50px;

}

.title{

display:flex;

flex-direction:column;

gap:15px;

text-align:center;

}

.title h1{

font-size:30px;

font-weight:900;

letter-spacing:4px;

line-height:1.4;

word-break:break-word;

}

.title p{

font-size:12px;

letter-spacing:3px;

opacity:.8;

}

#googleLogin{

height:60px;

width:100%;

display:flex;

justify-content:center;

align-items:center;

gap:15px;

border:2px solid #fff;

background:#000;

color:#fff;

cursor:pointer;

font-size:14px;

font-weight:700;

transition:.2s;

}

#googleLogin:hover{

background:#fff;

color:#000;

}

#googleLogin svg{

width:22px;

height:22px;

flex-shrink:0;

}

.footer{

text-align:center;

}

.footer p{

font-size:10px;

letter-spacing:3px;

opacity:.6;

animation:blink 1.4s infinite;

}

@keyframes blink{

0%{

opacity:.2;

}

50%{

opacity:1;

}

100%{

opacity:.2;

}

}

@media(max-width:480px){

.box{

padding:35px 22px;

gap:45px;

}

.title h1{

font-size:24px;

}

#googleLogin{

font-size:12px;

}

}