:root {
    --theme-color: #303C6C;
    --secondary: #F4976C;
}
#filterInput {
    color: var(--primary);
}
span.deleteicon {
    position: relative;
}
span.deleteicon span {
    color:grey;
    position: inherit;
    top: -32px;
    right: 7px;
    cursor: pointer;
    z-index:10;
    float:right;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
span.deleteicon span:hover {
    color:red;
}
span.deleteicon input {
    padding-right: 16px;
    box-sizing: border-box;
}
body {
    /*background:url("../src/img/mio_writing.jpeg");
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment: fixed;*/
    background: #D2FDFF;
}
nav {
    text-align:center;
    margin-bottom:20px;
}
nav a {
    font-size:24px;
    border-bottom: 2px solid var(--theme-color);
    margin: 0px 7px;
}
nav a:hover {
    text-decoration:none;
}
.currentlink {
    border-bottom: 2px solid var(--secondary);
}
.parallax {
    background:url("../src/img/mio_writing.jpeg");
    background-position: bottom;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
    height: 250px;
    text-align: center;
    position: relative;
    border-radius: 25px 25px 0px 0px;
}
.parallax div {
    max-width: 100%;
    -webkit-transform: translateZ(-999px) scale(2);
    transform: translateZ(-999px) scale(2);
    z-index: 3;
}
#bodywrap {
    max-width:1365px;
    margin:auto;
    background: rgba(255,255,255,0.9);
    padding: 25px;
    margin-top: 25px;
    margin-bottom:25px;
    border-radius: 25px;
}
h1 {
    font-weight:bold;
    text-transform: full-width;
    background:white;
    position: absolute;
    background: rgba(255,255,255,0.9);
    padding: 5px;
    vertical-align: bottom;
    bottom: 0;
    margin: 0;
    width: 100%;
}
h3 {
    border-bottom:2px solid var(--theme-color);
}
h1,h2,h3,h4,h5, a {
    color: var(--theme-color);
}
a:hover {
    color: var(--secondary);
}
.section {
    padding: 20px 0px;
    background: rgba(255,255,255,0.6);
    padding: 10px;
}
table tr td {
    padding:5px;
}
table th:nth-child(1){
    width:3%;
}
table th:nth-child(2){
    width:10%;
}
table th:nth-child(3){
    width:50%;
}
table th:nth-child(5){
    width:12%;
}
.youressay {
    background:yellow !important;
}
.tag {
    background: black;
    display: inline-flex;
    padding: 2px 7px;
    margin: 2px;
    color: white;
    cursor: pointer;
}
.tag:hover {
    background: grey;
}
.frontendtag {
    background:var(--theme-color);
}
.frontendtag:hover {
    background:var(--secondary);
}
.addtag {
    background: red;
}
.addtag:hover {
    background: orange;
}
.btn-primary {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}
.btn-primary:hover{
    background-color: var(--secondary);
    border-color: var(--secondary);
}
.fail {
    border-color: red;
}
.nav-item {
    position: relative;
}
.dashalert {
    color:white;
    background:var(--secondary);
    padding: 0px 8px;
    margin: 5px;
    border-radius: 25px;
    display: inline;
    position: absolute;
    top: -8px;
    right: -15px;
}
#examples-wrap {
    height:0;
    margin-bottom:0px;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.26s ease;
}
@media(max-width:911px){
    body {
        background:none;
    }
    h1 {
        text-transform:none;
    }
    #bodywrap {
        margin:0px;
        border-radius: 0px;
        background:beige;
    }
}