:root {
    /*colors*/

    --blue-1-color: #2c4e6c;
    --blue-2-color: #3b6c97;
    --white-color: #fff;
    --black-1-color: #333;
    --black-2-color: #00000099;
    --yellow-orange-color: #f0a20b;
    --grey-1-color: #8e98a3;
    --grey-2-color: #687584;
    --grey-3-color: #4d5258;
    --green-1-color: rgba(100, 160, 100);

    /*font*/
    --default-font-family: 'Titillium regular', Helvetica, Arial, Lucida, sans-serif;
    --default-font-size: 16px;
}

* {
    font-family: var(--default-font-family);
}

.goback-button {
    background-color: var(--green-1-color);
}

.large_button {
    color: var(--green-1-color);
    border: 1px solid var(--white-color);
}

.util-navigation>.util-prev:hover span,
.util-navigation>.util-next:hover span {
    color: var(--green-1-color);
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    color: var(--green-1-color);
}

a:hover,
a:focus {
    text-decoration: none;
    color: var(--white-color);
}

.flexbox-footer-sharedprojects a {
    color: inherit; /* Vererbt die Farbe des übergeordneten Elements */
    text-decoration: none;
}

.flexbox-footer-sharedprojects a:visited,
.flexbox-footer-sharedprojects a:active,
.flexbox-footer-sharedprojects a:focus {
    color: inherit; /* Sorgt dafür, dass die Farbe gleich bleibt */
}

#Button:hover {
    color: #fff;
    background-color: var(--green-1-color);
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
    background-color: transparent;
    color: var(--white-color);
    border-color: var(--white-color);
    border: 2px solid;
    border-width: 2px;
    border-radius: 50px;
    padding: 10px 10px;
    font-size: 16px;
    font-weight: bold;
    margin-right: 20px;
}

.flexbox-footer-sharedprojects {
    display: flex;
    justify-content: space-around;
}
.left-footer-sharedprojects {
    font-weight: bold;
}
.footer-separator {
  color: #fff;
  font-weight: normal;
  font-size: 1.1em;
}

@media (min-width: 481px) and (max-width: 768px) {
    .rsImg {
        width: 100%;
        object-fit: cover;
        object-position: center center;
        mask-size: 100% 100%;
    }
    .flexbox-footer-sharedprojects > .footer-item:not(:last-child)::after {
        content: "|";
        margin: 0.5em 0;
        color: #a020f0; 
    }
    .left-footer-sharedprojects {
        padding-top: 0.714rem;
    }
    .right-footer-sharedprojects {
        padding-bottom: 0.714rem;
    }
    .right-footer-sharedprojects {
        padding-top: 0.714rem;
        padding-bottom: 0.714rem;
    } 
     .flexbox-footer-sharedprojects {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 16px;
    }
    .flexbox-footer-sharedprojects span {
        font-size: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
        margin: 0;
    }

    .footer-separator {
        display: none !important;
    }

    .flexbox-footer-sharedprojects span:not(:last-child)::after {
        content: "";
        display: block;
        width: 100%;
        border-top: 1px solid var(--white-color);
        margin: 10px auto 0;
    }
    .center-footer-sharedprojects {
        padding-top: 10px;
    }
    
    .center-footer-sharedprojects::after {
        content: "";
        display: block;
        width: 80%;
        border-top: 1px solid var(--white-color);
        margin: 10px auto 0;  
    }
    tr{
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 480px) { 
    .rsImg {
        object-fit: cover;
        object-position: center center;
        mask-size: 100% 100%;
    }
    h4 {
        font-size: 1.5rem;
    }
    #content_wrapper {
        font-size: 16px;
    }
    .flexbox-footer-sharedprojects > .footer-item:not(:last-child)::after {
        content: "|";
        margin: 0.5em 0;
        color: #a020f0; 
    }
    .left-footer-sharedprojects {
        padding-top: 0.714rem;
    }
    .right-footer-sharedprojects {
        padding-bottom: 0.714rem;
    }
    .right-footer-sharedprojects {
        padding-top: 0.714rem;
        padding-bottom: 0.714rem;
    } 
     .flexbox-footer-sharedprojects {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 16px;
    }
    .flexbox-footer-sharedprojects span {
        font-size: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
        margin: 0;
    }

    .flexbox-footer-sharedprojects span:not(:last-child)::after {
        content: "";
        display: block;
        width: 100%;
        border-top: 1px solid var(--white-color);
        margin: 10px auto 0;
    }

    .footer-separator {
        display: none !important;
    }

    .center-footer-sharedprojects {
        padding-top: 10px;
    }
    
    .center-footer-sharedprojects::after {
        content: "";
        display: block;
        width: 80%;
        border-top: 1px solid var(--white-color);
        margin: 10px auto 0;  
    }
    tr{
        display: flex;
        flex-direction: column;
    }
    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        float: none;
    }
}