@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

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

body {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   min-height: 100vh;
   background-color: #232420;
}

.box {
   position: relative;
   width: 380px;
   height: 420px;
   background-color: #1c1c1c;
   border-radius: 8px;
   overflow: hidden;
}

.box::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 380px;
   height: 420px;
   background: linear-gradient(0deg, transparent,
         transparent, #45f3ff, #45f3ff, #45f3ff);
   z-index: 1;
   transform-origin: bottom right;
   animation: animate 6s linear infinite;
}

.box::after {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 380px;
   height: 420px;
   background: linear-gradient(0deg, transparent,
         transparent, #45f3ff, #45f3ff, #45f3ff);
   z-index: 1;
   transform-origin: bottom right;
   animation: animate 6s linear infinite;
   animation-delay: -3s;
}

.borderline::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 380px;
   height: 420px;
   background: linear-gradient(0deg, transparent,
         transparent, #ff2770, #ff2770, #ff2770);
   z-index: 1;
   transform-origin: bottom right;
   animation: animate 6s linear infinite;
   animation-delay: -1.5s;
}

.borderline::after {
   content: '';
   position: absolute;
   top: -50%;
   left: 50%;
   width: 380px;
   height: 420px;
   background: linear-gradient(0deg, transparent,
         transparent, #ff2770, #ff2770, #ff2770);
   z-index: 1;
   transform-origin: bottom left;
   animation: animate 6s linear infinite;
   animation-delay: -3.5s;
}

@keyframes animate {
   0% {
      transform: rotate(0deg);

   }

   100% {
      transform: rotate(360deg);
   }
}

.Main {
   position: absolute;
   inset: 4px;
   background-color: #222;
   padding: 50px 40px;
   border-radius: 8px;
   z-index: 2;
   display: flex;
   flex-direction: column;
}

.Main h2 {
   color: #fff;
   font-weight: 500;
   text-align: center;
   letter-spacing: 0.1em;
}

.inputBox {
   position: relative;
   width: 300px;
   margin-top: 35px;
}

.inputBox input {
   position: relative;
   width: 100%;
   padding: 20px 10px 10px;
   background-color: transparent;
   outline: none;
   border: none;
   box-shadow: none;
   color: #23242a;
   font-size: 1em;
   letter-spacing: 0.05em;
   transition: 0.5s;
   z-index: 10;
}

.inputBox span {
   position: absolute;
   left: 0;
   padding: 20px 0px 10px;
   pointer-events: none;
   color: #8f8f8f;
   font-size: 1em;
   letter-spacing: 0.05em;
   transition: 0.5s;
}

.inputBox input:valid~span,
.inputBox input:focus~span {
   color: #fff;
   font-size: 0.75em;
   transform: translateY(-37px);
}

.inputBox i {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 2px;
   background-color: #fff;
   border-radius: 4px;
   overflow: hidden;
   transition: 0.5s;
   pointer-events: none;
}

.inputBox input:valid~i,
.inputBox input:focus~i {
   height: 44px;
}

.link {
   display: flex;
   justify-content: space-between;
}

.link a {
   margin: 10px 0;
   font-size: 0.75em;
   color: #8f8f8f;
   text-decoration: none;
}

.link a:hover,
.link a:nth-child(2) {
   color: #fff;
}

.btn-login {
   border: none;
   outline: none;
   padding: 9px 25px;
   background-color: #fff;
   cursor: pointer;
   font-size: 0.9em;
   border-radius: 4px;
   font-weight: 600;
   width: 100px;
   margin-top: 10px;
}

input[type="submit"]:active {
   opacity: 0.8;
}

.borderline {
   position: absolute;
   top: 0;
   inset: 0;
}

.btn-login {
   background-image: linear-gradient(to right, #D31027 0%, #EA384D 51%, #D31027 100%);

   padding: 10px;
   text-align: center;
   text-transform: uppercase;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;
   box-shadow: 0 0 10px #eee;
   border-radius: 10px;
   display: block;
   outline: none;
   border: none;
}

.btn-login:hover {
   background-position: right center;
   color: #fff;
   text-decoration: none;
}

/*  بداية الرسالة */
.MSGInf-Container {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   height: 100vh;
   width: 100vw;
}

.View_MSG {
   display: block;
   background-color: transparent;
   z-index: 100;
}

.MSGInf {
   width: 400px;
   height: 170px;
   padding: 10px;
   border-radius: 5px;
   box-shadow: 0 0 10px black;
   position: relative;
   left: calc((100vw - 400px)/2);
   top: calc((100vh - 200px)/2);
   text-align: center;
   background-image: url(../img/Lawrencium.jpg);
   color: white;
}

.MSGInf p {
   text-align: center;
   padding: 5px;
}

.btn-OkInf {
   background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 51%, #1FA2FF 100%);
   padding: 10px;
   width: 100px;
   text-align: center;
   text-transform: uppercase;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;
   box-shadow: 0 0 20px #eee;
   border-radius: 10px;
   /* display: block; */
   outline: none;
   border: none;
}

.btn-OkInf:hover {
   background-position: right center;
   color: #fff;
   text-decoration: none;
   cursor: pointer;
}

.MSGInf div {
   margin-top: 10px;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
}

.div-logo img {
   width: 150px;
   height: 150px;
   border-radius: 10px;
}

/* نهاية الرسالة */