/* Color variables:*/
:root {
/* signup button colours: */
    --button: rgba(114, 190, 35, 0.7);
    --button-hover: rgba(114, 190, 35);
/* navbar colours: */
    --navbarDark-backgroundGradientTop: #f2f2f2; /* gradient top */
    --navbarDark-backgroundGradientBottom: #d9d9d9;
    --navbarBrand-color: black;
    --navbarBrand-color-hover: black;
    --navbarBrand-backgroundColor-hover: transparent;
    --navbarText-color: #999;
    --navbarNav-a-last-child: red;
    --navbarNav-navItem-backgroundColor: #ccc;
    --navbarNav-navItem-borderRight: #999;
    --navbarNav-active-a-color: #808080;
    --navbarNav-active-a-backgroundColor: white;
    --navbarNav-active-a-backgroundImageGradientTop: #eee;
    --navbarNav-active-a-backgroundImageGradientBottom: #999;
    --navbarNav-navItem-navLink-color: #fff;
    --navbarNav-navItem-navLink-color-hover: #808080;
    --navbarToggler-borderColor: #bbb;
    --navbarToggler-backgroundColor-hover: #bbb;
/* mainpageloggedin:*/
/*    textarea colours: */
    --textarea-borderColor: #ca3dd9;
    --textarea-backgroundColor: #fbefff;
/*    noteheader colours: */
    --noteheader-border: grey;
    --noteheader-border-hover: black;
    --noteheader-backgroundGradientBottom: white;
    --noteheader-backgroundGradientTop: #eceae7;
    --tr-hover: #ccc;
    --td-color: #808080;
    --td-color-hover: black;
}
html {
    position: relative;
    min-height: 100%;
}
/* Background-image: */
body {
    background: url("notes.jpg") no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Arvo', serif;
}
/* Style Jumbotron: */
.jumbotron {
    background-color: transparent;
    text-align: center;
    letter-spacing: 2.5px;
    padding: 10px;
    margin-top: 150px;
}
/* Signup Button: */
.jumbotron button {
    margin-top: 50px;
}
.signup {
    background-color: var(--button);
}
.signup:hover {   
    background-color: var(--button-hover);
}

/* ----------- mainpageloggedin.php: ----------------- */
#container {
    margin-top: 120px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.buttons {
    margin-bottom: 20px;
}
textarea {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.5em;
    background-color: var(--textarea-backgroundColor);
    border: 1px solid var(--textarea-borderColor);
    border-left: 20px solid var(--textarea-borderColor);
    padding: 10px;
}
.noteheader, tr { /* also on profile.php */
    border: 1px solid var(--noteheader-border);
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 0 10px; /* top-bottom: 0, left-right: 10px */
    background: linear-gradient(var(--noteheader-backgroundGradientBottom), var(--noteheader-backgroundGradientTop));
}
.noteheader:hover, tr:hover {
    border: 1px solid var(--noteheader-border-hover);
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 0 10px; /* top-bottom: 0, left-right: 10px */
    background: linear-gradient(var(--noteheader-backgroundGradientTop), var(--noteheader-backgroundGradientBottom));
}
tr:hover {
    border: 2px solid var(--tr-hover);
}
td {
    color: var(--td-color);
}
td:hover, td:hover + td {
    color: var(--td-color-hover);
}
/* Style the footer: */
footer {
    position: absolute;
    bottom: 0;
    text-align: left;
    width: 100%;
    padding-top: 10px;
    color: var(--navbarText-color);
}
footer p {
    margin-left: 100px;
}
/* Navigation bar: */
.navbar-dark, footer {
    background-color: cornflowerblue;
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(var(--navbarDark-backgroundGradientTop)), to(var(--navbarDark-backgroundGradientBottom))); /* Not sure, maybe have to change */
    background-image: -webkit-linear-gradient(top, var(--navbarDark-backgroundGradientTop), 0%, var(--navbarDark-backgroundGradientBottom), 100%);
    background-image: -moz-linear-gradient(top, var(--navbarDark-backgroundGradientTop) 0%, var(--navbarDark-backgroundGradientBottom) 100%);
    background-image: linear-gradient(to bottom, var(--navbarDark-backgroundGradientTop) 0%, var(--navbarDark-backgroundGradientBottom) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1d6ecb', endColorstr='#ff17569e', GradientType=0);
}
.navbar-dark {   
    border-bottom: 1px solid white;
}
.navbar-dark .navbar-brand {
    color: var(--navbarBrand-color);
}
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
    color: var(--navbarBrand-color-hover);
    background-color: var(--navbarBrand-backgroundColor-hover);
}
.navbar-dark .navbar-text {
    color: var(--navbarText-color);
    margin-right: 5px;
}
.navbar-dark .navbar-nav > a:last-child {
    border-right: 1px solid var(--navbarNav-a-last-child);
}
.navbar-nav .nav-item  {
    background-color: var(--navbarNav-navItem-backgroundColor);
    border-right: 1px solid var(--navbarNav-navItem-borderRight);
    width: 110px;
    text-align: center;
}
.navbar-nav .nav-item .nav-link {   
    color: var(--navbarNav-navItem-navLink-color);
}
.navbar-nav .nav-item .nav-link:hover {   
    color: var(--navbarNav-navItem-navLink-color-hover);
}
.navbar-nav .nav-link {
    background-color: var(--navbarNav-navItem-backgroindColor);
}
.navbar-dark .navbar-nav > a:hover,
.navbar-dark .navbar-nav > a:focus {
    color: red;
    background-color: green;
}
.navbar-dark .navbar-nav > .active > a,
.navbar-dark .navbar-nav > .active > a:hover,
.navbar-dark .navbar-nav > .active > a:focus,
.navbar-nav .nav-item:hover, .navbar-nav .nav-item:focus,
.navbar-dark .navbar-toggler:hover,
.navbar-dark .navbar-toggler:focus {
    color: var(--navbarNav-active-a-color);
    background-color: var(--navbarNav-active-a-backgroundColor);
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(var(--navbarNav-active-a-backgroundImageGradientTop)), to(var(--navbarNav-active-a-backgroundImageGradientBottom)));
/*    background-image: -webkit-linear-gradient(top, var(--navbarNav-active-a-backgroundImageGradientTop), 0%, var(--navbarNav-active-a-backgroundImageGradientBottom), 100%);*/  /* This line not work and I did'nt find the mistake */
    background-image: -moz-linear-gradient(top, var(--navbarNav-active-a-backgroundImageGradientTop) 0%, var(--navbarNav-active-a-backgroundImageGradientBottom) 100%);
    background-image: linear-gradient(to bottom, var(--navbarNav-active-a-backgroundImageGradientTop) 0%, var(--navbarNav-active-a-backgroundImageGradientBottom) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff134681', endColorstr='#ff195eae', GradientType=0);
}
.navbar-dark .navbar-toggler {
    border-color: var(--navbarToggler-borderColor);
    color: red;
}
/*
.navbar-dark .navbar-toggler:hover,
.navbar-dark .navbar-toggler:focus {
    background-color: var(--navbarToggler-backgroundColor-hover);
}
*/
.navbar-dark .navbar-toggler .icon-bar {
    background-color: yellow;
}
.navbar-dark .navbar-collapse,
.navbar-dark .navbar-form {
    border-color: red;
}
.navbar-dark .navbar-nav > .open > a,
.navbar-dark .navbar-nav > .open > a:hover,
.navbar-dark .navbar-nav > .open > a:focus {
    background-color: yellow;
    color: red;
}
.navbar-dark .navbar-nav > .open > a .caret,
.navbar-dark .navbar-nav > .open > a:hover .caret,
.navbar-dark .navbar-nav > .open > a:focus .caret {
    border-top-color: red;
    border-bottom-color: yellow;
}

@media (max-width: 1024px) {
/* -----------------------index.php ---------------- */
    .jumbotron {
        letter-spacing: 2px;
        padding: 8px;
        margin-top: 140px;
    }
    .jumbotron button {
        margin-top: 40px;
    }
    footer {
        text-align: center;
        padding-top: 10px;
    }
    footer p {
        margin-left: 0;
    }
    .navbar-dark .navbar-brand {
        margin-left: 10px;
    }
/* --------------- mainpageloggedin.php ---------------- */
    #container {
        margin-top: 110px;
        width: 60%;
    }
    .buttons {
        margin-bottom: 18px;
    }
}
@media (max-width: 992px) {
    .navbar-nav .nav-item  {
        width: 100%;
        text-align: left;
    }
    .nav-link {
        margin-left: 10px;
    }
    .navbar-dark .navbar-nav .active {
        color: var(--navbarNav-active-a-color);
        background-color: var(--navbarNav-active-a-backgroundColor);
        background-image: -webkit-gradient(linear, left 0%, left 100%, from(var(--navbarNav-active-a-backgroundImageGradientTop)), to(var(--navbarNav-active-a-backgroundImageGradientBottom)));
/*    background-image: -webkit-linear-gradient(top, var(--navbarNav-active-a-backgroundImageGradientTop), 0%, var(--navbarNav-active-a-backgroundImageGradientBottom), 100%);*/  /* This line not work and I did'nt find the mistake */
        background-image: -moz-linear-gradient(top, var(--navbarNav-active-a-backgroundImageGradientTop) 0%, var(--navbarNav-active-a-backgroundImageGradientBottom) 100%);
        background-image: linear-gradient(to bottom, var(--navbarNav-active-a-backgroundImageGradientTop) 0%, var(--navbarNav-active-a-backgroundImageGradientBottom) 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff134681', endColorstr='#ff195eae', GradientType=0);
    }
}

@media (max-width: 768px) {
    /* -----------------------index.php ---------------- */
    .jumbotron {
        letter-spacing: 1px;
        padding: 7px;
        margin-top: 120px;
    }
    .jumbotron button {
        margin-top: 30px;
    }
/* --------------- mainpageloggedin.php ---------------- */
    #container {
        margin-top: 100px;
        width: 90%;
    }
    .navbar-nav .nav-item  {
        width: 100%;
        text-align: center;
    }
    .navbar-dark .navbar-text {
        text-align: center;
    }
}
@media (max-width: 480px) {
/* -----------------------index.php ---------------- */
    .jumbotron {
        letter-spacing: 0px;
        padding: 4px;
        margin-top: 50px;
    }
    .display-4 {
        font-size: 300%;
    }
    hr {
        display: none;
    }
    .jumbotron button {
        margin-top: 20px;
    }
    footer {
        padding-top: 8px;
    }
    footer p {
        font-size: 12px;
    }
/* --------------- mainpageloggedin.php ---------------- */
    #container {
        margin-top: 80px;
        width: 100%;
    }
    .navbar-nav .nav-item  {
        width: 100%;
    }
}