*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}

body{

    background:#020617;

    color:white;

    min-height:100vh;

    padding:30px;
}

.container{

    max-width:900px;

    margin:auto;
}

.card{

    background:#0f172a;

    padding:30px;

    border-radius:25px;

    box-shadow:
    0 0 30px rgba(0,0,0,.4);
}

.logo{

    font-size:55px;

    font-weight:bold;
}

.desc{

    margin-top:10px;

    opacity:.7;

    font-size:18px;
}

.custom-box{

    display:flex;

    margin-top:25px;

    background:#1e293b;

    border-radius:18px;

    overflow:hidden;
}

.custom-box input{

    flex:1;

    padding:18px;

    border:none;

    outline:none;

    background:none;

    color:white;

    font-size:16px;
}

.domain{

    padding:18px;

    background:#334155;

    font-size:15px;
}

.email-box{

    display:flex;

    gap:10px;

    margin-top:20px;
}

.email-box input{

    flex:1;

    padding:18px;

    border:none;

    border-radius:18px;

    background:#1e293b;

    color:white;

    font-size:16px;
}

button{

    border:none;

    border-radius:18px;

    padding:18px;

    cursor:pointer;

    font-size:16px;

    transition:.3s;
}

button:hover{

    transform:scale(1.02);
}

.generate{

    background:#2563eb;

    color:white;

    width:100%;
}

.refresh{

    background:#0ea5e9;

    color:white;

    width:100%;
}

.button-group{

    display:flex;

    gap:10px;

    margin-top:20px;
}

.timer{

    margin-top:20px;

    font-size:18px;
}

.mail-card{

    margin-top:20px;

    background:#1e293b;

    padding:20px;

    border-radius:20px;
}

.mail-top{

    display:flex;

    justify-content:space-between;

    gap:20px;
}

.mail-top h3{

    font-size:20px;
}

.mail-body{

    margin-top:15px;

    line-height:1.7;

    opacity:.9;
}

.empty{

    margin-top:20px;

    background:#1e293b;

    padding:20px;

    border-radius:18px;

    text-align:center;

    opacity:.7;
}

.toast{

    position:fixed;

    bottom:30px;

    right:30px;

    background:#2563eb;

    padding:15px 20px;

    border-radius:15px;

    animation:fade .3s;
}

@keyframes fade{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:700px){

    .button-group{

        flex-direction:column;
    }

    .email-box{

        flex-direction:column;
    }

    .custom-box{

        flex-direction:column;
    }

    .domain{

        text-align:center;
    }

    .logo{

        font-size:40px;
    }
}