@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=block');
:root {
  --font-size: 16px;
  --font: 'Vazirmatn';
  --main-color: #0090FF;
  --card-color: #EEEEEE;
  --text-color: #000000;
  --bg-color: #FFFFFF;
  --icon-invert: 0%;
  --btn-text: var(--bg-color);
}
html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0; 
  background: var(--bg-color);
  font-family: var(--font);
  color: var(--text-color);
  user-select:none;
  transition: all 1s cubic-bezier(.01,.96,.6,1.31);
}
form{
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:0;
  padding:0;
}
.content{
  display:flex;
  width:100%;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}
.profile-card{
  text-align:center;
  display:flex;
  flex-direction: row;
  border-radius:20px;
  left: 10%;
  width: 80%;
  background: var(--card-color);
  padding:10px;
  margin-top:30px;
  margin-bottom:30px;
  box-shadow: 0 5px 10px var(--card-color);
}
.link-card{
  display: flex;
  flex-direction:row;
  text-align:center;
  width: 80%;
  background: var(--main-color);
  padding:2px;
  margin-top:30px;
  transition:all 1s ease;
}
.btn1:active{
  transform: scale(0.8);
}
.btn1:hover{
  padding: 10px;
  filter: brightness(120%) hue-rotate(20deg);
}
.btn1{
  border: 8px double rgba(130,130,130,0.0);
  color:var(--bg-color);
  box-shadow: 0 5px 10px var(--main-color);
  border-radius:20px;
}
.btn2{
  /*box-shadow: 0 9px 0px var(--main-color);*/
  background:var(--main-color);
  /*border: 8px double var(--main-color);*/
  box-shadow: inset 0 0 20px rgba(130,130,130,0.9);
  border-bottom: 10px outset var(--main-color);
  padding: 8px;
  color: var(--main-color);
  border-radius: 10px;
}
.btn2:hover{
  filter:hue-rotate(60deg);
  transform:translateY(10px);
  border-bottom: 0px outset var(--main-color);
}
.btn3{
  color:var(--main-color);
  border-radius: 20px;
  padding:10px;
  box-shadow: 0 0 30px var(--bg-color);
  backdrop-filter: blur(20px) brightness(105%);
  background: linear-gradient(to right, rgba(130,130,130,0.04), rgba(130,130,130,0.08));
}
.btn3:hover{
  padding:15px;
}
.btn3:active{
  box-shadow: 0 0 30px var(--main-color);
  transform:scale(0.8);
}
.topbar{
  top:0;
  font-weight:bold;
  font-size: 30px;
  text-align:center;
  padding-top: 5px;
  background: linear-gradient(to top,rgba(130,130,130,0.0),rgba(130,130,130,0.2));
}
.bottom-gradient{
  background: linear-gradient(to top,rgba(130,130,130,0.6),rgba(130,130,130,0));
  with: 100%;
  height: 70px;
}
.column{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.row{
  display: flex;
  flex-direction:row;
  white-space: nowrap;
}
.logo-picture{
  filter: invert(var(--icon-invert));
  height: 50px;
  transition: all 2s ease;
  pointer-events: none;
}
.link-text{
  color:var(--text-color);
  font-size:25px;
  margin-right: 20px;
  font-weight: 600;
  margin-top: 5px;
  filter: invert(100%);
}
.picture{
  filter: invert(var(--icon-invert));
  height: 90px;
  width: 90px;
  transition: all 0.3s ease;
}
.picture:active{
  transform: scale(0.5);
}
.input{
  font-family: 'Vazirmatn';
  color: var(--text-color);
  background: rgba(0,0,0,0);
  width:100%;
  border: 0;
  border-radius:30px;
  border-bottom: 2px solid rgba(130,130,130,0.2);
  font-size: 18px;
  font-weight: 300;
  padding-bottom:5px;
  padding-right:5px;
  margin-right :20px;
  margin-left: 20px;
  transition:all 2s ease;
}
.input::placeholder{
  font-family: 'Vazirmatn';
  transform: translateX(-30px);
  transition:all 2s ease;
}
.input:focus::placeholder{
  transform: translateX(-10px);
}
.input:focus{
  border-bottom: 2px solid rgba(130,130,130,0.8);
  outline:0;
}
.buttoninput{
  direction:ltr;
  border-bottom: 0px solid rgba(130,130,130,0.8);
  font-family: 'Vazirmatn';
  color: var(--btn-text);
}
.buttoninput::placeholder{
  color: var(--btn-text); 
  transform: translateX(50px);
  font-family: 'Vazirmatn';
  font-weight:600;
}
.buttoninput:focus::placeholder{
  transform: translateX(30px);
}
.bio{
  color: var(--text-color2);
  text-align:right;
  margin-right: 20px;
  font-size:15px;
}
.description{
    display:block;
    margin-left:40px;
}
.color{
  background: var(--card-color);
  border-radius:5px;
  margin-right:7px;
  border: 3px groove var(--main-color);
}
.radio{
  display:flex;
  flex-direction:row;
  border-radius:20px;
  color: gray;
  padding:5px; 
  margin:5px;
}
.light{
  background: black;
  color: gray;
  box-shadow: 0px 0px 10px black;
}
.dark{
  background: white;
  color: gray;
  box-shadow: 0px 0px 10px white;
}
.picker{
  max-width:90px;
}
.picker::file-selector-button{
  width:0;
  padding:0;
  margin:0;
  border: 0px;
}
.link{
  padding:5px;
  display:flex;
  flex-direction: row;
  overflow:scroll;
  color: gray;
  background-color: var(--card-color);
  border-radius:20px;
  border-top-right-radius:0px;
  font-size:18px;
  width:100%;
  box-shadow:0px -5px 10px var(--card-color);
}
.link-column{
  display:flex;
  flex-direction:column;
  align-items:right;
  
  width:80%;
}
.link-input{
    outline:0;
    border:0;
  border:0;
  color: gray;
  background-color: var(--card-color);
  font-size:18px;
  width:100%;
}
.link-hint{
    width:60%;
  color:gray;
  padding:5px;
  padding-right:15px;
  background-color: var(--card-color);
  font-size:15px;
  border-radius:30px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  box-shadow:0px -5px 10px var(--card-color);
}
.submit{
  font-family: 'Vazirmatn';
  margin-top:50px;
  background-color: #EEFAFF;
  font-size:30px;
  border-radius:20px;
  border: 6px groove #00AAFF;
  color: #0070AA;
}
.submit:active{
  filter: invert(80%);
}

    
    .password-input {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 8px;
      margin-bottom: 10px;
      background: var(--bg-color);
      color: var(--text-color);
    }
    
    .link-error {
      color: #ff4757;
      font-size: 14px;
      margin-top: 5px;
      display: none;
    }
    
    .edit-option {
      margin-top: 15px;
      padding: 10px;
      background: #ffeaa7;
      border-radius: 8px;
      display: none;
    }
.particle-row{
              background:rgba(150,150,150,0.2);
              width:90%;
              display:flex;
              flex-direction: row;
              align-items:center;
              justify-content:center;
              border-radius: 20px;
            }
            .particle-column{
              display:flex;
              margin:10px;
              flex-direction:column;
              align-items:center;
              justify-content:center;
            }
            .particle{
            	border-radius: 20px;
                border:2px solid blue;
                box-shadow: 0px 0px 10px blue;
                width: 100%;
            }