/* 
    Author  : CHRISTOPHER PETER MSUBI
    Phone   : +255 766 777 130 / +255 654 250 555
    Email   : chrispeterlucian@gmail.com
*/

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    
}

@font-face {
    font-family: 'Roboto Italic';
    src: url('../fonts/roboto/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Inter Italic';
    src: url('../fonts/inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: 'Lora';
    src: url('../fonts/lora/Lora-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Lora Italic';
    src: url('../fonts/lora/Lora-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

* { box-sizing: border-box; }

body { background-color: lightyellow; }

header, section, footer {

    /*border: 1px solid black;*/
    margin: 2px 0px;
}

h1, h2, h3, p { color: #333333; }

header h1 {

    /*border: 1px solid black;*/
    margin: 5px 2px;
    text-align: center;
    font-size: 60px;
    font-weight: 500;
    font-family: Georgia, serif;
}

header h2 {

    /*border: 1px solid black;*/
    margin: 5px 2px;
    text-align: center;
    font-size: 36px;
    font-weight: normal;
    font-family: 'Lora', serif;
}

.login_container {

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.login_container > div {

    width: 400px; /*height: 65vh;*/
    border-radius: 15px;
    background-color: ivory;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin: 20px 0px 40px;
    padding: 30px 40px 70px;
}

.login_container > div h3 {

    /*border: 1px solid red;*/
    padding: 5px;
    margin: 5px 0px 50px;
    text-align: center;
    font-size: 26px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

input[type="text"], input[type="password"] {
    
    border: 1px solid #d0c4b8;
    font-family: verdana, sans-serif;
    font-size: 14px;
    font-weight: normal;
    display: inline;
    background: ghostwhite;
    outline: none;
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    border-radius: 10px;
    transition: background 0.4s ease 0.05s, transform 0.4s ease 0.05s;
}

input[type="text"]:hover, input[type="password"]:hover {
    
    border: 1px solid #4c9a76;
    outline: 1px solid #4c9a76;
    background: aliceblue;
    transform: scale(1.05, 1.05);
}

.login_button {

    /*border: 1px solid black;*/
    display: flex;
    justify-content: space-between;
    margin: 35px 0px 40px;
}

.error {

    /*border: 1px solid black;*/
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    
}

.error p {

    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #fe7600;
    
}

.login_button > div { width: 40%; }

input[type="submit"], input[type="button"] {
        
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    transition: background 0.5s ease, box-shadow 0.5s ease;
            
}

input[type="submit"] {

    background: #4c9a76;
    color: ivory;
}

input[type="submit"]:hover {

    background: #3e7a5e; /*#5abf8f;*/
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

input[type="button"] {
    
    background: #AED9C0;
    color: black;
}

input[type="button"]:hover {

    background: #8BBF9F;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.tooltip {

    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {

    display: none;
    width: 300px;
    background-color: #AED9C0;
    color: #333333;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.5;
    /*text-align: center;*/
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: -430%;
    left: 100%;
    margin-left: 5px; /*center positioning */
}

.tooltip:hover .tooltiptext {

    display: inline-block;
    background-color: #AED9C0;
    opacity: 0.1;
    animation-name: shiftopacity;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes shiftopacity {
  from {opacity: 0.1;}
  to {opacity: 1;}
}

footer p {

    /*border: 1px solid black;*/
    margin: 2px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

.password-wrapper {
    position: relative;    
}

.password-wrapper input {
    padding-right: 30px; /* space for the icon */
}

.password-wrapper .toggle-password {
    position: absolute;
    right: 8px;
    top: 50%;
    /*transform: translateY(-50%);*/
    cursor: pointer;
    user-select: none;
    font-size: 16px;
    color: #555;
    transition: right 0.4s ease 0.05s;
}

.password-wrapper:hover .toggle-password { right: 5px; }



/* RESPONSIVENESS */
@media screen and (max-width: 600px) {

    .flex_container { }

    .tooltip .tooltiptext {

        bottom: -500%;
        left: 50%;
        margin-left: -200px;
    }

}