@charset "UTF-8";


/*------- Mobile First -------*/

/*
================ Everyone ================
======= Typical Device Breakpoints =======
small screen: max 600px
cellphone screen: min 600px max 768px
tablet screen: min 768px max 992px
desktop screen: min 992px max 1200px
tv screen: min 1200px
*/

:root {
    --colour00: #000000; /*Eerie black*/
    --colour01: #59656F; /*payne´s gray*/
    --colour02: #FFFFFF; /*white*/
    --colour03: #17BEBB; /*Maximum red*/
    --colour06: #FEFFFE; /*Snow*/
    --colour07: #DEDADA; /*Gray*/
}

* {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    box-sizing: border-box;
    color: var(--colour00);
}

html {
    background: black url(../../images/pop-bg2.jpg);
    height: 100vh;
    width: 100vw;
}

main {
    position: relative;
    height: 100vh;
    width: 100vw;
}

section#login {
    width: 290px;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0px 0px 7px #0000007a;
    transition: width 0.7s, height 0.7s;
    transition-timing-function: ease;
    
}

div#image {
    background: #00000079;
    display: block;
    height: 220px;
    width: 290px;
    background-size: cover;
    position: relative;
}

div#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div#form {
    background-color: rgba(255, 255, 255, 0.521);
    color: var(--colour00);
    display: block;
    height: 275px;
    padding: 7px;
}

h1 {
    text-align: center;
}

p {
    font: arial;
    padding: 7px;
}

div.pInput {
    background-color: var(--colour01);
    padding: 0px;
    margin: 4px;
    border-radius: 20px;
}

div.button {
    text-align: left;
}

input {
    font-size: 20px;
    background-color: #FFFFFF;
    border: 0px;
    border-radius: 40px;
}

input.button {
    background-color: var(--colour07);
    color: var(--colour08);
    display: block;
    text-align: center;
    width: 100%;
    padding: 7px;
    margin: 0px;
}

input.button:hover {
    color: var(--colour06);
    background-color: var(--colour03);
    transition: 0.3s;
    cursor: pointer;
}

div#form label {
    display: none;
}

a.button {
    display: block;
    text-align: center;
    text-decoration: none;
    background-color: var(--colour01);
    color: var(--colour06);
    padding: 7px;
    border-radius: 40px;
    margin: 5px 0px;
}

a.button:hover {
    color: var(--colour06);
    background-color: var(--colour03);
    cursor: pointer;
    transition: 0.3s;
} 

div.pInput span {
    /*background-color: #000000;*/
    font-size: 1.5em;
    width: 40px;
    padding: 5px;
}

input.campus {
    background-color: var(--colour07);
    width: calc(100% - 45px);
    transform: translateY(-2px);
    height: 100%;
    padding: 7px;
}

input.campus:focus-within {
    background-color: #ffffff;
}

span#icon {
    color: var(--colour00);
}

.t {
    text-align: center;
    color: green;
}

.f {
    text-align: center;
    color: red;
}