*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #121212;
}

:root {
  --article-read-size: 50%;
}


.alert-container{
  height:70vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}


article {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 6rem;
}

p {
  max-width: 150ch;
  line-height: 190%;
}

p:not(:first-child) {
  margin-top: 3rem;
}


header {
  display: flex;
  padding: 3rem 6rem;
  margin: 1rem 0;
  align-items: start;
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0 29px 10px rgba(150, 153, 187, 0.16);
}

header::before {
  content: '';
  display: block;

  width: var(--article-read-size);
  height: .2rem;

  background: linear-gradient(45deg, #8DD8FF, #7870E5, #DD6FE5, #F97BB2, #FED4CB, #FFEEBE);

  position: absolute;
  left: 0;
  bottom: 0;
}





.profile-card {
  display: flex;
  align-items: center;
  margin-left: auto;
  user-select: none;
}

.profile-card img {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  object-fit: cover;
}

.profile-card .profile-container {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.profile-card p {
  font-weight: 700;
}

.profile-card span {
  font-size: .8rem;
}

.profile-card .profile-information {
  display: flex;
  flex-direction: column;
}

.profile-card a {
  font-family: 'Open Sans';
  font-weight: bold;
  color: #fff;

  height: max-content;
  margin-left: 3rem;
  padding: .8rem 3rem;
  border-radius: .2rem;

  background: #00A8FF;
  box-shadow: 0 6px 6px rgba(6, 112, 255, .2);

  transition: box-shadow .2s, transform .2s;
}

.profile-card a:hover {
  cursor: pointer;
  box-shadow: 2px 10px 12px rgba(6, 112, 255, .4);
  transform: translateY(-.1rem);
}

@prashant {
    font-family: "prashant";
    src: url('calligphr/Prashant-Regular.tff') format('tff');
    font-weight: normal;
    font-style: normal;
    }
    
    .english{
      font-family: 'prashant';
      color: white;
      font-size: 1.5rem;
    }
    
    .prashant{
      font-family: 'prashant';
      color: white;
    }