/* Everything on page */
* {
    color: white;
    font-family: "Arial", sans-serif;
    font-size: 1.1em;
    
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

/* Whole page */
html, body {
    height: 100%;
    margin: 0px;
    color: #34495e;
}

/* Background gradients */
.background1 {
    background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}

.background2 {
    background-image: linear-gradient(141deg, #11998e 0%, #38ef7d 100%);
}

/* Hovers */
.background1 a:hover {
    color: #95D9C4;
}

.background2 a:hover {
    color: #8BD9C9;
}

.background2 .buttonPlus:hover, .button2:hover, .buttonUpdate:hover, .buttonBack:hover {
    color: #8BD9C9;
}

/* Text inputs */
.input1 {
    width: 100%;
    height: 6%;
    
    padding: 10px;
    margin-top: 0.25%;
    margin-bottom: 1%;
    
    background-color: transparent;
    
    
    border: 2px solid #d2f5f9;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-appearance: none;
}

.input2 {
    width: 100%;
    height: 100%;
    
    padding: 10px 10px 10px 0px;
    
    background-color: transparent;
    
    border: none;
    border-radius: 0px;
    border-bottom: 3px solid white;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-appearance: none;
}

.input3 {
    width: 100%;
    height: 20%;
    
    padding: 10px;
    margin-top: 0.25%;
    margin-bottom: 1%;
    
    background-color: transparent;
    
    
    border: 2px solid #94ebc5;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-appearance: none;
}

.textarea1 {
    width: 100%;
    height: 70%;
    
    padding: 10px;
    margin-top: 0.25%;
    margin-bottom: 1%;
    
    background-color: transparent;
    
    
    border: 2px solid #94ebc5;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-appearance: none;
}

/* Buttons */
.button1 {
    cursor: pointer;
    
    width: 100%;
    height: 7%;
    
    margin-top: 1%;
    margin-bottom: 2%;
    
    color: #1fc8db;
    background-color: white;
    
    font-size: 1.25em;
    font-weight: bold;
    
    border: none;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-appearance: none;
}

.button2 {
    cursor: pointer;
    
    width: 100%;
    height: 80%;
    
    color: #38ef7d;
    background-color: white;
    
    font-size: 1.25em;
    font-weight: bold;
    
    border: none;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-appearance: none;

}

.button3 {
    cursor: pointer;
    
    width: 100%;
    height: 7%;
    
    margin-top: 1%;
    margin-bottom: 2%;
    
    color: #2BD383;
    background-color: white;
    
    font-size: 1.25em;
    font-weight: bold;
    
    border: none;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-appearance: none;
}

.buttonPlus {
    cursor: pointer;
    
    height: 100%;
    width: 100%;
    
    color: white;
    background-color: transparent;
    
    font-size: 1.75em;
    font-weight: bold;
    
    border: none;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-appearance: none;
}

.buttonBack {
    cursor: pointer;
    
    height: 100%;
    
    color: white;
    background-color: transparent;
    
    font-size: 1.75em;
    font-weight: bold;
    
    border: none;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-appearance: none;
}

.buttonUpdate {
    cursor: pointer;
    
    height: 100%;
    
    color: white;
    background-color: transparent;
    
    font-size: 1.75em;
    font-weight: bold;
    
    border: none;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-appearance: none;
}


/* Form for login and register */
.loginRegisterForm {
    height: 100%;
    
    margin-left: auto;
    padding-left: 25%;
    padding-right: 25%;
}

/* Links */
.redirectBack {
    font-size: 1.2em;
}

.noUnderliningLink {
    text-decoration: none;
}

/* todos-page */
.todos {
    height: 100%;
    
    margin-left: auto;
    padding-left: 25%;
    padding-right: 25%;
}

.todoHeaderForm {
    height: 6%;
    
    margin-bottom: 5%;
}

.todoHeaderTable, .todoTable {
    width: 100%;
}

.todoHeaderRow {
    height: 100%;
}

/* actual todos */
.todoTable {
    width: 100%;
    
    margin-top: 5%;
    margin-bottom: 2%;
}

.todoTable a, .todoHeaderRow a {
    text-decoration: none;
}

.todoTableRow {
    font-size: 0.9em;
}

.todoForm {
    height: 6%;
}

.alignRight {
    text-align: right;
}

.updateForm {
    height: 30%;
}

/* Reshape website for mobile devices */
@media only screen and (max-width: 800px) {
    .loginRegisterForm, .todos {
    padding-left: 5%;
    padding-right: 5%;
    }
    .todoHeaderRow {
        font-size: 0.5em;
    }
    .todoTableData, .logout {
        font-size: 0.7em;
    }
}

.footer {
    position:absolute;
    bottom:0px !important;
    margin:0px;
    padding: 0.5%;
    width: 100%;
    border-top: 1px solid white;
}

/* Placeholder */
::-webkit-input-placeholder {
    color: #ffffff;
    opacity: 0.7;
}
:-moz-placeholder {
    color: #ffffff;
    opacity: 0.7;
}
::-moz-placeholder {
    color: #ffffff;
    opacity: 0.7;
}
:-ms-input-placeholder {
    color: #ffffff;
    opacity: 0.7;
}
::-ms-input-placeholder {
    color: #ffffff;
    opacity: 0.7;
}
::placeholder {
    color: #ffffff;
    opacity: 0.7;
}