:root {
   --bodyMargin: 15%;
   --defaultFont: Arial, Helvetica, sans-serif;

   --mainHeaderSize: 2.5em;
   --middleMainHeaderSize: 2em;
   --smallHeaderSize: 1.5em;

   --link-color: rgb(227, 204, 0);
   --link-color-hover: rgb(237, 255, 75);
   --link-color-active: rgb(222, 255, 152);

   --table-button-color: rgba(255, 255, 255, 0.404);
   --table-button-color-hover: rgba(255, 255, 255, 0.329);
   --table-button-color-active: rgba(255, 255, 255, 0.669);
   --table-button-color-textcolor: rgb(3, 163, 172);
   --table-cell-background-color: rgba(255, 255, 255, 0.244);
   --table-object-background-color: rgba(255, 255, 255, 0.313);
   --table-object-background-color-hover: rgba(255, 255, 255, 0.411);
   --table-object-background-color-active: rgba(255, 255, 255, 0.505);

   --header-gradiant: linear-gradient(to top, rgb(23, 140, 176) 0%, rgb(128, 244, 221) 91%);
   --header-color: rgb(255, 230, 0);

   --button-input-color: rgb(0, 169, 166);
   --button-background-color: rgba(255, 255, 255, 0.726);
   --button-background-color-hover: rgba(255, 255, 255, 0.8);
   --button-background-color-active: rgba(255, 255, 255, 0.9);
   --title-color: rgb(255, 255, 255);
   --text-color: antiquewhite;
   --site-body-background: rgba(147, 147, 147, 0.701);
   --border-color: black;
   --main-border-color: rgb(255, 230, 0);
   --devider-color: rgb(239, 219, 0);

   --menu-bar-background: linear-gradient(to top, rgba(48, 113, 133, 0.66) 0%, rgb(23, 140, 176) 91%);
   --menu-deviders-color: rgba(193, 193, 193, 0.42);
   --menu-text-color: rgb(220, 220, 220);
   --activeMenu: rgb(255, 230, 0);
}

body {
    background-color: white;
    color: black;
}

.section div div h3 {
    border-color: var(--main-border-color);
}

.section div h3 {
    border-color: var(--main-border-color);
}

.exerciseObject {
    background-color: var(--table-object-background-color);
    transition: all 0.5s ease;
}

.exerciseObject:hover {
    background-color: var(--table-object-background-color-hover);
}

.exerciseTitle {
    color: var(--header-color);
}

table,
tbody,
th,
td,
tr {
    border-color: var(--border-color);
}

img {
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--header-color);
}

.styledLink {
    color: var(--link-color);
}

.styledLink:hover {
    color: var(--link-color-hover);
}

.styledLink:active {
    color: var(--link-color-active);
}

header {
    /*Level 1*/
    background-color: antiquewhite;
    border-bottom: 5px var(--devider-color) solid;
    background: var(--header-gradiant);
}

#title {
    /*Level3-actualHeaderHolder*/
    color: var(--title-color);
}

#menuBar {
    /*Level 3 - actualHeaderHolder*/
    background-color: var(--menu-bar-background);
}

#menuTitle {
    /*Level 4 - menuBar [ALSO menuObject]*/
    border-left: 1px solid var(--menu-deviders-color);
}

.menuObject {
    /*Level5 - menuOptionBar [BOTH menuTitle and menuOption]*/
    border-right: 1px solid var(--menu-deviders-color);
    color: var(--menu-text-color);
}

.siteBody {
    /*Level1*/
    background-color: var(--site-body-background);
    color: var(--text-color);
}

#loginLink, #signupLink, #returnLink {
    color: var(--link-color);
}

#loginLink:hover,
#signupLink:hover,
#returnLink:hover {
    color: var(--link-color-hover);
}

#loginLink:active,
#signupLink:active,
#returnLink:active {
    color: var(--link-color-active);
}

body {
    font-family: var(--defaultFont);
}

#exercise-tables {
    border-color: var(--main-border-color);
}

.activeMenuText {
    color: var(--activeMenu);
}

.background {
    /*Level 1*/
    background-image: url(../images/background2.jpg);
    position: fixed;
    filter: blur(25px) saturate(170%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    transform: scale(1.2);
    /*MUCHOIMPORTANTEbeimbluren-->sonstweißevignette*/
    -webkit-filter: blur(25px) saturate(170%);
}

.defaultButton {
    background-color: var(--button-background-color);
    transition: all 0.2s ease;
    color: var(--button-input-color);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

.defaultButton:hover {
    background-color: var(--button-background-color-hover);
}

.defaultButton:active {
    background-color: var(--button-background-color-active);
}

.tableButton {
    background-color: var(--table-button-color);
    color: var(--table-button-color-textcolor);
}

.tableButton:hover {
    background-color: var(--table-button-color-hover);
}

.tableButton:active {
    background-color: var(--table-button-color-active);
}

canvas {
      background: #a1a1a1ad;
      border: 2px solid var(--main-border-color);
}

td, th {
    background-color: var(--table-cell-background-color);
}

#exercise-tables table tr td select, 
#exercise-tables table tr td input, 
#plan-table-table tr td input,
#plan-table-table tr td select {
    color: var(--button-input-color);
    background-color: var(--table-object-background-color);
}

#username,
#password,
#email,
#weight,
#size,
#birthday {
    color: var(--button-input-color);
    background-color: var(--table-object-background-color);
}

#username:focus,
#password:focus,
#email:focus,
#weight:focus,
#size:focus,
#birthday:focus {
    outline: none;
    outline: .1em solid var(--border-color);
    box-shadow: 0 0 5px rgba(0, 102, 204, 0.3);
}

#username:hover,
#password:hover,
#email:hover,
#weight:hover,
#size:hover,
#birthday:hover,
#exercise-tables table tr td select:hover,
#exercise-tables table tr td input:hover,
#plan-table-table tr td input:hover,
#plan-table-table tr td select:hover {
    background-color: var(--table-object-background-color-hover);
}

#username:active,
#password:active,
#email:active,
#weight:active,
#size:active,
#birthday:active,
#exercise-tables table tr td select:active,
#exercise-tables table tr td input:active,
#plan-table-table tr td input:active,
#plan-table-table tr td select:active {
    background-color: var(--table-object-background-color-active);
}

#plan-table-table tr td select option,
#exercise-tables table tr td select option,
#exercise-tables table tr td select optgroup {
    color:black;
    background-color: #7b7b7b59;
}

#plan-table-table tr td select option:checked,
#exercise-tables table tr td select option:checked {
    color: var(--button-input-color);
    background-color: var(--button-background-color);
}

/* Mobile and Tablet Responsive Design */

/* Tablets: 481px to 768px */
@media (max-width: 768px) {
    :root {
        --bodyMargin: 5%;
    }
}

/* Mobile: up to 480px */
@media (max-width: 480px) {
    :root {
        --bodyMargin: 0;
    }
}