html{
    background: linear-gradient(to bottom right, #AEE2FF, #FEDEFF) ;
    background-attachment: fixed;
    height: 100%;
} 
@font-face{
    font-family: "regular";
    src: local("regular"), url(fonts/Nunito-Regular.ttf);
}
html{
    font-family: regular;
}
#notif{
    width: 50%;
    height: 60%;
    border: 15px solid #519dd0;
    border-radius: 35px 35px;
}

#notif{
    transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete;
  
    animation: close 0.3s forwards;
    &[open] {
      animation: open 0.3s forwards;
    }
}
  
  @keyframes open {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes close {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
}
body:has(dialog[open]) {
    overflow: hidden;
}
#notif::backdrop {
    background-color: rgb(0 0 0 / 35%);
}
#close-notif{
    grid-area: close;
    margin-top: 20px;
    cursor: pointer;
    margin-left: auto;
    margin-right: 0;
}

#notif h1{
    grid-area: name;    
    font-size: 55px;
    color: #519dd0;
    margin-top: 20px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: 0;
}
.notif-head{
    height: 80px;
    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-rows: auto;
    grid-template-areas:
        "name close"
}
.notif-body > p{
    font-size: 20px;
    text-align: justify;
}
.header{
    grid-area: head;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    grid-template-areas:
       "exit info"
}
#exit{
    grid-area: exit;
    text-align: left;
    margin: 25px;
    width: 90px;
    height: 90px;
}
#info{
    grid-area: info;
    margin: 25px;
    cursor: pointer;
    margin-right: 25px;
    margin-left: auto;
    width: 90px;
    height: 90px;
}
.gif{
  width: 100%;
  height: 50%;
  text-align: center;
}
#notif::-webkit-scrollbar {
    width: 15px;
}
  
#notif::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background-color: white;
}
#notif::-webkit-scrollbar-button:increment:increment {
    height: 10%;
    display: block;
    background: transparent;
}