/* Login Page ////////////////////////////////////////////////////////////////////////////////////////*/
   
    .social2{width: 40%;height: 95%;background-color: white;border-radius: 25px;display: flex;flex-direction: column;justify-content: start;align-items: start;}
   
    .social2 .items{row-gap: 3vh;display: flex;margin-top: 5vh ;flex-direction: column;justify-content: center;align-items: start;width: 100%;}
    .social2 .item{display: flex;gap: 20px;margin: 0px 60px;flex-direction: row;justify-content: center;align-items: center;}
    .social2 .item .text{display: flex;flex-direction: column;row-gap: 7px;justify-content: center;align-items: start;}
    .social2 .item .text{font-size: 15px;color: #000000a6;}
    .social2 .item img{width: 25px;height: 25px;background: var(--red-grad2);object-fit: cover;padding: 10px;border-radius: 10px;}
    .social2 .item .text span{color: black;font-size: 18px;}
   
  
    .social2 .context{row-gap: 12px;margin: 5vh 0px;display: flex;flex-direction: column;justify-content: start;align-items: center;text-align: center;width: 100%;}
    .social2 h6{margin: 0px 0px;font-size: 35px;color: var(--link1);text-align: center;}
    .social2 h5{margin: 0px 0px;color: var(--link1);opacity: 0.6;font-size: 16px;font-weight: 100;color: var(--primary);text-align: center}
    
    .login{margin: 15vh 0px;gap: 1.7%;height: 95vh;width: 100%;border-radius: 25px;position: relative;display: flex;flex-direction: row;justify-content: center;align-items: center;}
    .login .backgrounded{position: absolute;left: auto;width: 100%;height:100%;z-index: -1;object-fit: cover;border-radius: 35px;}
    .form{width: 55%;;height: 95%;row-gap: 1.5vh;margin: 0 0px;display: flex;flex-direction: column;justify-content: start;align-items: center;background-color: var(--white);border-radius: 25px;}
    .form h1{font-size: 35px;color: var(--link1);margin: 0px;margin-top: 5vh;align-self: center;width: 100%;text-align: center;}
    .form h2{margin-bottom:3vh;margin-top: 0;font-size: 16px;opacity: 0.8;font-weight: 100;color: var(--link1);align-self: center;width: 100%;text-align: center;}

    .form-group{gap: 50px;row-gap: 0vh; position: relative;width:100%;display: flex;flex-direction: row;justify-content: center;align-items: center;}
    
    .credits{position: relative;margin: 0.8vh 0px;width: 30%;}
    .credits label {color: var(--link1); position: absolute; top: 50%; left: 0px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);  transform: translateY(-50%); font-size: 18px; color: var(--primary);font-weight: 100; pointer-events: none;-webkit-transition: all 1s ease-out 0s; transition: all 0.15s ease-out 0s;}
    .credits input { padding: 19px 0;position: relative;width: 100%; display: inline-block; font-size: 19px; background: none; border: none; border-bottom: 1.5px solid #000000a7; color: #333; box-shadow: none; outline: none; -webkit-box-shadow: none !important;-moz-box-shadow: none !important;box-shadow: none !important;}
    input:focus + label,input.has-value + label,textarea:focus + label,textarea.has-value + label {top: 2px;font-weight: 100;font-size: 13px;opacity: 0.8;}
    
    textarea:focus + label,textarea.has-value + label {top: 2px;font-weight: 100;}
    input:focus::-webkit-input-placeholder { color: transparent;}
    
    .form .submit{transition: 0.3s ease-in-out;width: 70%;margin-top: 3vh;font-size: 17px;height: 50px;color: var(--white);background-color: var(--red-grad);border: none;box-shadow: 0 0 10px #0000001d;border-radius: 1000px;text-align: center;}
    .form .submit:hover{width: 60%;}
    .form  .text-area{font-size: 18px;margin-top: 2vh;min-width: calc(60% + 50px);max-width:calc(60% + 50px);border-radius: 15px;height: 100px;max-height: 10vh;min-height: 9vh;padding: 20px;border: none;background-color: #00000000;box-shadow: 6px 6px 20px #00000026,0px 0px 1px 1px #00000026;font-family: var(--font1);}
    .form  .text-area:focus{box-shadow: 0 0 1px 1px var(--primary);outline: none;}
 .upload{width: calc(60%);transition: 0.3s ease-in-out;margin-top: 1vh;background-color: rgba(146, 30, 30, 0.112);padding: 0px 5%;height: 11vh;font-size: 17px;color: var(--title);border-radius: 10px;border: dotted 4px var(--red-grad);display: flex;flex-direction: column;justify-content: start;align-items: center;}
 .upload img{margin:16px 0;height: 4vh;}
 .upload:hover{opacity: 0.8;}
    @media screen and (max-width: 1000px){    body{overflow: auto;}
      
    
    
    .login{margin: 120px 0px;height: 1700px;width: 100%;flex-direction: column-reverse;;}
        .login .backgrounded{top: 0;height: 200%;}
        .form{width: calc(100% - 40px);;height: 95%;row-gap: 15px;margin: 20px 20px;display: flex;flex-direction: column;justify-content: start;align-items: center;background-color: var(--white);border-radius: 25px;}
        .form h1{font-size: 35px;color: var(--link1);margin: 0px;margin-top: 30px;align-self: center;width: 100%;text-align: center;}
        .form h2{margin-bottom: 25px;margin-top: 0;font-size: 16px;opacity: 0.8;font-weight: 100;color: var(--link1);align-self: center;width: 100%;text-align: center;}
        
        .form .form-group{row-gap: 25px; position: relative;width:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
        
        .credits{position: relative;margin: 0px 0px;width: 70%;}
        .credits label {color: var(--link1); position: absolute; top: 50%; left: 0px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);  transform: translateY(-50%); font-size: 18px; color: var(--primary);font-weight: 100; pointer-events: none;-webkit-transition: all 1s ease-out 0s; transition: all 0.15s ease-out 0s;}
        .credits input { padding: 19px 0;position: relative;width: 100%; display: inline-block; font-size: 19px; background: none; border: none; border-bottom: 1.5px solid #000000a7; color: #333; box-shadow: none; outline: none; -webkit-box-shadow: none !important;-moz-box-shadow: none !important;box-shadow: none !important;}
        input:focus + label,input.has-value + label,textarea:focus + label,textarea.has-value + label {top: 2px;font-weight: 100;font-size: 13px;opacity: 0.8;}
        
        textarea:focus + label,textarea.has-value + label {top: 2px;font-weight: 100;}
        input:focus::-webkit-input-placeholder { color: transparent;}
        
        .form .submit{width: 70%;margin-top: 60px;font-size: 17px;height: 50px;color: var(--white);background-color: var(--red-grad);border: none;box-shadow: 0 0 10px #0000001d;border-radius: 1000px;text-align: center;}
        .signupfromlogin{font-size: 15px;color: var(--title);text-decoration: none;margin-bottom: 0px;margin-top: 20px;opacity: 0.7;}
        .signupfromlogin span{font-size: 15px;color: var(--primary);font-weight: 900;}    /* fonts */
        


        .social2{width: calc(100% - 40px);height:75%;background-color: white;border-radius: 25px;display: flex;flex-direction: column;justify-content: start;align-items: start;}
        .social2 .items{row-gap: 3vh;display: flex;margin-top: 5vh ;flex-direction: column;justify-content: center;align-items: start;width: 100%;}
        .social2 .item{display: flex;gap: 20px;margin: 0px 60px;flex-direction: row;justify-content: center;align-items: center;}
        .social2 .item .text{display: flex;flex-direction: column;row-gap: 7px;justify-content: center;align-items: start;}
        .social2 .item .text{font-size: 15px;color: #000000a6;}
        .social2 .item img{width: 25px;height: 25px;background: var(--red-grad2);object-fit: cover;padding: 10px;border-radius: 10px;}
        .social2 .item .text span{color: black;font-size: 18px;}
       
      
        .social2 .context{row-gap: 12px;margin: 5vh 0px;display: flex;flex-direction: column;justify-content: start;align-items: center;text-align: center;width: 100%;}
        .social2 h6{margin: 0px 0px;font-size: 35px;color: var(--link1);text-align: center;}
        .social2 h5{margin: 0px 0px;color: var(--link1);opacity: 0.6;font-size: 16px;font-weight: 100;color: var(--primary);text-align: center}
        
    }