@font-face{ font-family:'NEXON Lv1 Gothic OTF'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
:root {
--primary-light: #8abdff;
--primary: #6d5dfc;
--primary-dark: #5b0eeb;
--white: #FFFFFF;
--greyLight-1: #E4EBF5;
--greyLight-2: #c8d0e7;
--greyLight-3: #bec8e4;
--greyDark: #9baacf;
}
body {
margin:0;
background:transparent;
font-family:"NEXON Lv1 Gothic OTF", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--greyLight-1);
}
.box {
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width: 380px;
margin: 0 auto;
padding: 20px 32px;
background: var(--greyLight-1);
border-radius: 14px;
text-align: center;
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFF;
}
input {
width: 100%;
height: 2.75rem;
border: none;
border-radius: 1rem;
font-size: 0.85rem;
padding-left: 1.4rem;
box-shadow: inset 0.15rem 0.15rem 0.3rem var(--greyLight-2), inset -0.15rem -0.15rem 0.3rem var(--white);
background: none;
color: var(--greyDark);
}
input::-moz-placeholder {
color: var(--greyLight-3);
}
input:-ms-input-placeholder {
color: var(--greyLight-3);
}
input::placeholder {
color: var(--greyLight-3);
transition: color 0.3s ease;
}
input:focus {
outline: none;
}
input:focus::placeholder {
color: transparent;
}
.circle {
margin-top: 20px;
cursor:pointer;
grid-column: 2/3;
grid-row: 4/6;
justify-self: center;
border-radius: 1rem;
display: grid;
grid-template-rows: 1fr;
justify-items: center;
align-items: center;
}
.circle__btn {
grid-row: 1/2;
grid-column: 1/2;
width: 2rem;
height: 2rem;
display: flex;
margin: 0.2rem;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 1rem;
color: var(--primary);
z-index: 300;
background: var(--greyLight-1);
box-shadow: 0.1rem 0.1rem 0.2rem var(--greyLight-2), -0.066rem -0.066rem 0.166rem var(--white);
cursor: pointer;
position: relative;
}
.circle__btn i {
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px  1px 0 #fff,
1px  1px 0 #fff !important;
transition: color 0.4s ease;
}
.circle__btn:hover i {
color:#FF8000;
}
.circle__btn.shadow {
box-shadow: inset 0.066rem 0.066rem 0.166rem var(--greyLight-2), inset -0.066rem -0.066rem 0.166rem var(--white);
}
.circle__back-1, .circle__back-2 {
grid-row: 1/2;
grid-column: 1/2;
width: 2rem;
height: 2rem;
border-radius: 50%;
filter: blur(0.33px);
z-index: 100;
}
.circle__back-1 {
box-shadow: 0.133rem 0.133rem 0.266rem var(--greyLight-2), -0.133rem -0.133rem 0.266rem var(--white);
background: linear-gradient(to bottom right, var(--greyLight-2) 0%, var(--white) 100%);
animation: waves 4s linear infinite;
}
.circle__back-2 {
box-shadow: 0.133rem 0.133rem 0.266rem var(--greyLight-2), -0.133rem -0.133rem 0.266rem var(--white);
animation: waves 4s linear 2s infinite;
}
@keyframes waves {
0% {
transform: scale(1);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}