:root {
    --colour: black;
    --backgroundColour: white;
    --borderColour: #0033a1;
    --radius: 0px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial;
}



body, form {

    /*Size*/
    height: 100vh;
    width: 100%;
    /*Background*/
    background-color: var(--backgroundColour);
    background-image: url("../Pictures/background2026.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

header{
    /*Size*/
    width: 100%;

    /*Look*/
    padding: 10px 5px;
    border-radius:var(--radius);

    /*Item Positioning*/
    display: flex;
    justify-content: right;
    align-items: center;
    z-index: 0;
}

/* Buttons */
.button {
    /*Size*/
    width: 100px;
    height: 40px;
    /*background*/
    background: transparent;
    /*Look */
    border: 1px solid var(--colour);
    outline: none;
    border-radius: var(--radius);
    font-size: 1em;
    font-weight: 500;
    color: var(--colour);
    background-color: var(--backgroundColour);
    /*Spacing*/
    margin-left: 20px;
    /*Cursor*/
    cursor: pointer;
    /* Transition on hover */
    transition: 0.2s
}
.button:hover,.button:focus{
    color:var(--backgroundColour);
    background-color:var(--borderColour);
}

/*Message*/
.message {
    display: flex;
    justify-self: center;
    color: red;
    background: var(--backgroundColour);
    font-size: 1em;
    padding: 20px 20px;
    border-radius: var(--radius);
}

/*Close buttons*/
.close {
    color: var(--colour);
    border: 0px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 30px;
    height: 30px;
    font-size: 1em;
    background: transparent;
    border-radius: var(--radius);
    transition: ease-in-out 0.2s;
    cursor: pointer;
}
    .close:hover,.close:focus{
        color:var(--backgroundColour);
        background-color:red;
    }


/* Empty Space */
.emptySpace {
    display: block;
    width: 100%;
}

    .emptySpace img {
        height: 100%;
        width: 100%;
    }

/*Pop Up Panels*/
.popUp {
    display: flex;
    /*Size*/
    width: 450px;
    height: fit-content;
    max-height: 96%;
    padding: 1%;
    /*Position*/
    position: relative;
    /*Look*/
    color: var(--colour);
    border: 2px solid var(--borderColour);
    background-color: var(--backgroundColour);
    border-radius: var(--radius);
    /*Item Positioning*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*Overflow*/
    overflow-x: hidden;
    overflow-y: scroll;
}
.popUp::-webkit-scrollbar{display:none;}

/*Items on Pop Up Panels*/
.popUp h1{
    font-size:2em;
    padding-bottom:20px;
}
    .popUp .validate {
        color: red;
        font-size: 0.8em;
    }
    .popUp div {
        width: 70%;
        border-bottom: 1px dotted var(--colour);
        margin-bottom: 40px;
    }
    .popUp .button{margin-left:0px;}
.popUp label{
    position:absolute;
    width:80%;
    font-size:1em;
    font-weight:500;
    pointer-events:none;

    transform:translate(-18px,-20px) scale(0.9);
}
.popUp .input{
    width:100%;
    height:100%;

    background:transparent;
    border:none;
    outline:none;
    color:var(--colour);
}
    .popUp .forgotPassword {
        width: 70%;
        border-bottom: 2px solid var(--colour);
        text-align: center;
        border: none;
        background: none;
        text-decoration: underline;
    }
        .popUp .forgotPassword:hover,.forgotPassword:focus{
            color:var(--borderColour);
        }
        .button.forget{
            width:fit-content;
            padding:5px 10px;
        }