/* ==========================================
   FANVORA SETTINGS PAGE
========================================== */

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

body{

    font-family:'Poppins',sans-serif;
    background:#07111f;
    color:#fff;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px 20px;

}

/* Background Glow */

body::before{

    content:"";

    position:fixed;

    inset:0;

    z-index:-1;

    background:

    radial-gradient(circle at top left,
    rgba(255,106,0,.15),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(255,106,0,.10),
    transparent 40%),

    #07111f;

}

/* Container */

.container{

    width:100%;
    max-width:750px;

}

/* Card */

.card{

    background:#101a2b;

    border:1px solid #243650;

    border-radius:25px;

    padding:40px;

    box-shadow:0 25px 60px rgba(0,0,0,.40);

}

/* Heading */

h1{

    text-align:center;

    margin-bottom:35px;

    font-size:34px;

    font-weight:700;

}

h1 i{

    color:#ff6b00;

    margin-right:10px;

}

/* Avatar */

.avatar{

    text-align:center;

    margin-bottom:35px;

}

.avatar img{

    width:140px;

    height:140px;

    border-radius:50%;

    object-fit:cover;

    border:5px solid #ff6b00;

    box-shadow:0 15px 35px rgba(255,106,0,.30);

}

/* Labels */

label{

    display:block;

    margin-top:20px;

    margin-bottom:8px;

    color:#d7dfec;

    font-weight:600;

}

/* Inputs */

input,
select,
textarea{

    width:100%;

    background:#162438;

    border:1px solid #2b4568;

    border-radius:15px;

    padding:16px 18px;

    color:#fff;

    font-size:15px;

    outline:none;

    transition:.3s;

}

input:focus,
select:focus,
textarea:focus{

    border-color:#ff6b00;

    box-shadow:0 0 18px rgba(255,106,0,.25);

}

textarea{

    resize:vertical;

    min-height:120px;

}

/* Readonly */

input[readonly]{

    opacity:.75;

    cursor:not-allowed;

}

/* Button */

button{

    width:100%;

    margin-top:35px;

    padding:16px;

    border:none;

    border-radius:15px;

    background:#ff6b00;

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 15px 35px rgba(255,106,0,.30);

}

button:hover{

    transform:translateY(-4px);

    background:#ff7a1a;

}

/* Responsive */

@media(max-width:768px){

.card{

padding:30px;

}

h1{

font-size:28px;

}

.avatar img{

width:110px;
height:110px;

}

}

@media(max-width:480px){

body{

padding:20px 15px;

}

.card{

padding:22px;

}

h1{

font-size:24px;

}

button{

font-size:15px;

}

}

/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#ff6b00;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#07111f;

}

::selection{

background:#ff6b00;

color:#fff;

}