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

::selection{
background:#191919;
color:magenta;
}

body{
display:flex;
flex-direction:column;
height:100vh;
background:yellow;
}

.login{
flex:1;
position:relative;
background-image:
repeating-radial-gradient(
circle at 25vw 50%,
transparent 0 10px,
#191919 10px 11px,
transparent 11px 22px
);
}

header {
display: flex;
padding: 3px 5px;
font-family:MS Gothic, monospace;
font-size:14px;
color:yellow;
background:#191919;
border-bottom:1px solid #191919;
}

.details > b{ 
padding-right:10px;
}

.details:last-child{
border:none;
}

.weather{
margin-left: auto;
}

.weather > b{ 
margin-left: auto;
}

.weather b:last-child{
padding: 0;
border:none;
}

.enter{
position:absolute;

left:25vw;
top:50%;

width:24px;
height:24px;

transform:translate(-50%,-50%);
border-radius:50%;
animation:pulse 2s ease-in-out infinite;
transition:.3s;
background: magenta;
box-shadow: 0 0 10px magenta, 0 0 20px yellow;
}

.enter:hover{
transform:translate(-50%,-50%) scale(1.5);
background: cyan;
box-shadow:0 0 20px cyan, 0 0 40px yellow;
}

@keyframes pulse{

0%,100%{

transform:translate(-50%,-50%) scale(1);

}

50%{

transform:translate(-50%,-50%) scale(1.4);

}

}