/**************************************************/
/************** UNIVERSAL PROPERTIES **************/
/**************************************************/

body {
    background-color: rgb(255, 255, 255);
    margin: 80px 0px 0px 0px;
    padding: 0px;
    overflow: auto;
}
@media only screen and (max-width:450px) {
    body {
        margin-top: 70px;
    }
}

p {
    font-family: "Lato", sans-serif;
    font-weight: 600;
}

h1 {
    font-family: "Lato", sans-serif;
    font-weight: 700;
}

h2 {
    font-family: "Lato", sans-serif;
    font-weight: 700;
}

button {
    font-family: "Lato", sans-serif;
    font-weight: 700;
}

.page-content {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    width: 100%;
}

a:visited {
    color: rgb(154, 63, 239);
}

body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background-color: rgb(240, 240, 240);
}

body::-webkit-scrollbar-thumb {
    background-color: rgb(221, 221, 221);
    border-radius: 0px;
}

body::-webkit-scrollbar-thumb:hover {
    background: rgb(173, 173, 173);
    border-radius: 10px;
}

.error {
    text-align: center;
    margin: 130px 5% 50px 5%;
}

/************** END OF UNIVERSAL PROPERTIES **************/

/*********************************************************/
/************************ HEADER *************************/
/*********************************************************/

.header {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    box-shadow: 0px 0px 5px rgb(18, 28, 32);
    background-color: aliceblue;
    height: 80px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1;
}


.inside-header {
    width: 80%;
    height: 100%;
}

.header-bar li {
    text-decoration: none;
    display: block;
    float: right;
    margin: 15px;
}

.header-bar li a {
    text-decoration: none;
    color: black;
    padding: 10px;
}

.header-bar li a:hover {
    border-radius: 10px;
    background-color: rgb(223, 240, 255);
    transition-duration: 200ms;
}

.title {
    font-family: "Lato", sans-serif;
    font-style: italic;
    font-size: 40px;
    font-weight: 900;
    float: left;
    text-decoration: none;
    color: rgb(60, 128, 188);
}

.logo {
    height: 50px;
    float: left;
    margin-right: 10px;
}

.logo-section {
    vertical-align: middle;
    margin-left: 25%;
}

.themeswitcher {
    height: 20px;
}

.themeswitcher:hover {
    background-color: white;
    border-radius: 100%;
}

@media only screen and (max-width:450px) {
    .title {
        font-size: 30px;
    }

    .logo {
        height: 40px;
        margin-left: 10px;
    }

    .togglemenu {
        margin-top: -4px; 
    }

    .header {
        height: 70px;
    }
}

@media only screen and (max-width:1345px) {
    .inside-header {
        width: 85%;
    }
    .logo-section {
        margin-left: 20%;
    }
}

@media only screen and (max-width:1196px) {
    .inside-header {
        width: 100%;
    }
    .logo-section {
        margin-left: 2%;
    }
}

@media only screen and (min-width:680px) {
    .togglemenu {
        display: none;
    }
}

/* idea from https://www.w3schools.com/howto/howto_css_menu_icon.asp */
@media only screen and (max-width:680px) {
    .header-bar li {
        display: none;
    }

    .togglemenu {
        float: right;
        margin-right: 2%;
        padding: 0;
        cursor: pointer;
    }
    
    .bar1, .bar2, .bar3 {
        background-color: rgb(0, 0, 0);
        height: 7px;
        width: 50px;
        margin: 7px;
        border-radius: 3px;
        transition: 0.4s;
        z-index: 2; 
    }

    /*.change .bar1 {
        transform: translate(0, 12px) rotate(-45deg);
      }
      
    .change .bar2 {
        opacity: 0;
    }
      
    .change .bar3 {
        transform: translate(0, -12px) rotate(45deg);
      }*/

    .change .bar1 {
        transform: translate(-6px, 7px) rotate(-45deg);
        width: 25px;
      }
      
      
    .change .bar3 {
        transform: translate(-6px, -7px) rotate(45deg);
        width: 25px;
      }


    .sidebar {
        height: 100%; 
        width: 180px; 
        position: fixed; 
        z-index: 2; 
        top: 80px; 
        right: 0;
        background-color: aliceblue;
        overflow-x: hidden;
        transition-duration: 300ms;
        box-shadow: -10px 0px 10px -3px #00000030;
        border: 1px solid rgb(180, 180, 180);
    }

    @media only screen and (max-width:450px) {
        .sidebar {
            top: 70px;
        }
    }
    #menulink {
        visibility: hidden;
    }

    .menulink a {
        text-decoration: none;
        color: black;
    }

    .menulinkactive li {
        visibility: visible;
        border-radius: 10px;
        margin-bottom: 10px;
        margin-right: 30px;
        padding: 10px;
        list-style-type: none;
    }

    .menulinkactive li:hover {
        background-color: rgb(212, 229, 245);
        transition-duration: 300ms;
    }
}

#menulink {
    visibility: hidden;
}

/************** END OF HEADER **************/


/**************************************************/
/******************** FOOTER **********************/
/**************************************************/

.footer {
    background-color: black;
    padding: 20px;
    right: 0;
    left: 0;
    box-shadow: 0 100vw 0 100vw #000;
    position: absolute;
}

.footer p {
    text-align: center;
    color: white;
    font-family: "Lato", sans-serif;
    font-weight: 700;
}

/************* END OF FOOTER *************/

/****************************************/
/************* TABLE STYLING ************/
/****************************************/

.brokertable {
    overflow-y: auto;
    width: 100%;
    height: 100%;
    display: block;
    border-collapse: collapse;
    margin:auto;
}

@media only screen and (min-width:2000px) {
    .brokertable {
        display: table;
    }
}
    

.brokertable::-webkit-scrollbar {
    height: 15px;
}

.brokertable::-webkit-scrollbar-track {
    background-color: rgb(255, 255, 255);
}

.brokertable::-webkit-scrollbar-thumb {
    background-color: rgb(255, 255, 255);
    background: rgb(206, 206, 206);
    border-radius: 3px;
}

.brokertable::-webkit-scrollbar-thumb:hover {
    background: rgb(173, 173, 173);
}

td {
    border: 2px solid rgb(230, 230, 230);
}
th {
    border: 2px solid rgb(203, 203, 203);
}

th:nth-of-type(1) {
    position: sticky;
}
/************** END OF TABLE STYLING *************/


/*************************************************/
/****************** HOMEPAGE *********************/
/*************************************************/

.title-home {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    margin: 0px 0px 30px 0px;
    padding: 40px 40px 40px 40px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
}


.containerhome {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
    margin: 50px 50px 50px 50px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    padding: 2%;
    text-decoration: none;
    color: black;
    justify-items: center;

}

.containerhome:hover {
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
    transition-duration: 0.4s;
}

.containerhome:visited {
    color: black;
}

@media only screen and (min-width:1100px) {
    .containerhome {
        margin: 50px 25% 50px 25%;
    }
}

@media only screen and (max-width:600px) {
    .containerhome {
        grid-template-columns: auto;
        padding: 4%;
    }
    .hometext {
        order: 1; /*https://stackoverflow.com/questions/42095934/change-order-of-html-element-depending-on-screen-size#:~:text=%23element2%20%7B-,order%3A%20%2D1%3B,-%7D*/
    }
}

.hometext {
    align-self: center;
    text-align: center;
    box-shadow: 0px 0px 20px rgba(0, 81, 255, 0.4);
    margin: 3%;
    padding: 4%;
    border-radius: 20px;
}

.fined {
    width: 100%;
    border-radius: 20px;
    margin: 2%;
}

/**************** END OF HOMEPAGE ******************/



/******************************************************/
/****************** ARTICLE STYLES ********************/
/******************************************************/

.description {
    padding: 1% 20% 1% 20%;
    box-shadow: 0px 0px 12px rgb(178, 178, 178);
    overflow-x: hidden;
}

.articletitle {
     
}

.subtitlefirst {
    margin: 0px;
    padding: 1% 5% 1% 5%;
    box-shadow: 0px 12px 12px -12px rgb(218, 218, 218);
    text-align: center;
}

.subtitle {
    margin: 0px;
    padding: 1% 3% 1% 3%;
    box-shadow: 0px 0px 12px rgb(178, 178, 178);
    text-align: center;
}

.articlesection {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /*https://www.quora.com/How-do-you-make-all-grids-the-same-width*/
    padding: 5%;
    justify-content: center;
    justify-items: center;
    justify-self: center;
    max-width: 1090px;
    margin: auto;
} 

.article {
    padding: 0px;
    text-align: center;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
    max-width: 350px;
    border-radius: 30px;
}

.article a {
    text-decoration: none;
    color: black;
}

.article:hover {
    transition-duration: 0.4s;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
}

.articletext {
    padding: 15px;
}

.articlepic {
    width: 100%;
    border-radius: 30px 30px 0px 0px;
    aspect-ratio: 16 / 9;
    height: 200px;
    object-fit: cover;
}

@media only screen and (max-width:900px) {
    .articlesection {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .article:last-child {

    }
}

@media only screen and (max-width:600px) {
    .articlesection {
        grid-template-columns: auto;
    }
}


.articlepage {
    margin: 2% 20% 2% 20%;
    line-height: 35px;
}

.articlepage p {
    text-align: justify;
}

/*.articletitle {
     
}*/

@media only screen and (max-width:800px) {
    .articlepage {
        margin: 2% 5% 2% 5%;
    }
    .description {
        padding: 1% 5% 1% 5%;
    }
}

@media only screen and (min-width:1300px) {
    .articlepage {
        margin: 2% 30% 2% 30%;
    }
    .description {
        padding: 1% 30% 1% 30%;
    }
}

/**************** END OF ARTICLE STYLES ***************/



/******************************************************/
/************** COMPARISONS OVERVIEW PAGE *************/
/******************************************************/

.vergleich-page {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    box-shadow: 0px 0px 0px rgb(92, 92, 92);
    text-align: center;
    text-decoration: none;
}

.vergleichcontainer {
    display: grid;
    margin: 5px;
    gap: 10px;
    grid-template-columns: auto auto;
    justify-content: center;
    padding: 2%;
}

.vergleichcontainer a {
    text-decoration: none;
    color: black;
}



@media only screen and (max-width:900px) {
    .vergleichcontainer {
        grid-template-columns: auto;
        font-size: min(3vw, 15px);
    }
}

.vergleichlink {
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
    padding: 30px 30px 0px 30px;
    margin: 10px;
    border-radius: 30px;
    max-width: 350px;
    min-width: 100px;
}

.vergleichlink:hover {
    transition-duration: 200ms;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
}

.vergleichlink h1 {
    padding: 0px 0px 30px 0px;
}

.imgvergleich {
    width: 100%;
    border-radius: 20px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/************** END OF COMPARISONS OVERVIEW PAGE *************/



/***************************************************/
/************** BROKER COMPARISON ******************/
/***************************************************/

.brokerdescribtion{
    line-height: 35px;
    display:flex;
    margin: 1% 5% 0 5%;
    justify-content: center;
    text-align:center;
}

.bankenlogos {
    width: 100px;
    margin: 10px;
}


.vergleichsmodus {
    margin: 4%;
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 20px;
    justify-content: center;
}

@media only screen and (max-width:800px) {
    .vergleichsmodus {
        grid-template-columns: auto auto;
    }
}

.brokerbutton1 {
    color: rgb(0, 0, 0);
    background-color: white;
    border: 2px solid rgb(28, 62, 255);
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    font-size: 15px;
    max-width: 300px;
}

.brokerbutton2 {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(123, 255, 0);
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    font-size: 15px;
    max-width: 300px;

}

.brokerbutton3 {
    color: rgb(0, 0, 0);
    background-color: white;
    border: 2px solid rgb(203, 0, 0);
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    font-size: 15px;
    max-width: 300px;
}

.brokerbutton4 {
    color: rgb(0, 0, 0);
    background-color: white;
    border: 2px solid rgb(0, 255, 229);
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    font-size: 15px;
    max-width: 300px;
}

.brokerbutton1:hover {
    color: rgb(255, 255, 255);
    background-image: linear-gradient(to bottom right, rgb(28, 134, 255), rgb(0, 16, 105));
    border: 2px solid rgb(255, 255, 255);
    transition: 0.4s;
    box-shadow: 0px 0px 10px rgb(103, 103, 103);
}

.brokerbutton1:focus {
    color: rgb(255, 255, 255);
    background-image: linear-gradient(to bottom right, rgb(28, 134, 255), rgb(0, 16, 105));
    border: 2px solid rgb(255, 255, 255);
    transition: 0.4s;
    box-shadow: 0px 0px 10px rgb(103, 103, 103);
}

.brokerbutton2:hover {
    color: rgb(255, 255, 255);
    background-image: linear-gradient(to bottom right, rgb(86, 184, 0), rgb(3, 70, 0));
    border: 2px solid rgb(255, 255, 255);
    transition: 500ms;
    box-shadow: 0px 0px 10px rgb(103, 103, 103);
}

.brokerbutton2:focus {
    color: rgb(255, 255, 255);
    background-image: linear-gradient(to bottom right, rgb(86, 184, 0), rgb(3, 70, 0));
    border: 2px solid rgb(255, 255, 255);
    transition: 500ms;
    box-shadow: 0px 0px 10px rgb(103, 103, 103);
}

.brokerbutton3:hover {
    color: rgb(255, 255, 255);
    background-image: linear-gradient(to bottom right, rgb(255, 77, 77), rgb(117, 0, 0));
    border: 2px solid rgb(255, 255, 255);
    transition: 0.4s;
    box-shadow: 0px 0px 10px rgb(103, 103, 103);
}

.brokerbutton3:focus {
    color: rgb(255, 255, 255);
    background-image: linear-gradient(to bottom right, rgb(255, 77, 77), rgb(117, 0, 0));
    border: 2px solid rgb(255, 255, 255);
    transition: 0.4s;
    box-shadow: 0px 0px 10px rgb(103, 103, 103);
}

.brokerbutton4:hover {
    color: rgb(255, 255, 255);
    background-image: linear-gradient(to bottom right, rgb(0, 255, 229), rgb(0, 120, 108));
    border: 2px solid rgb(255, 255, 255);
    transition: 0.4s;
    box-shadow: 0px 0px 10px rgb(103, 103, 103);
}


#submitweight, #restartweight {
    display: none;
    color: rgb(0, 0, 0);
    background-color: white;
    border: 2px solid rgb(0, 255, 229);
    border-radius: 10px;
    padding: 20px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0px 10px 20px 10px;
}

#submitweight:hover, #restartweight:hover {
    transition: 0.4s;
    background-image: linear-gradient(to bottom right, rgb(0, 255, 229), rgb(0, 120, 108));
    color: rgb(255, 255, 255);
    border: 2px solid rgb(255, 255, 255);
    box-shadow: 0px 0px 10px rgb(103, 103, 103);
}


.indiweight {
    text-align: center;
    background-color: rgb(255, 255, 255);
    color: black;
    border: none;
    width: 90%;
}

.indiweight:focus {
    outline: none;
}


/* for Broker Calculator*/

.brokercontainer {
    box-shadow: 0px 0px 10px rgb(103, 103, 103);
    margin: 10%;
    padding: 4%;
    border-radius: 20px;
    align-content: center
}

.logolink {
    float: left;
    display: inline;
    height: 100%;
    box-shadow: 0px 0px 10px rgb(103, 103, 103);
    border-radius: 20px;
    padding: 20px;
}

.textcalc {
    float: right;
    display: inline;
}

.quizdescription {
    text-align: center;
    margin: 15% 5% 10% 5%;
}

.framegforms {
    width: 100%;
    min-height: 1000px;
    overflow-y:hidden;
    background-color: white;
}

#brokerrechner {
    display: none;
}

.banner {
    background-color: rgba(255, 0, 0, 0.491);
    width: 4100px;
    backdrop-filter: blur(8px);
    height: 350px;
    right: 0;
    left: 0;
    position: absolute;
    z-index: 1;
    text-align: left;
    padding-left: 40%;
    align-content: center;
}

/************** END OF BROKER COMPARISON ******************/

/*************************************/
/*********** ABOUT US PAGE ***********/
/*************************************/

.aboutpage {
    margin: 3% 20% 2% 20%;
    line-height: 35px;
    text-align: justify;
}

@media only screen and (max-width:800px) {
    .aboutpage {
        margin: 2% 5% 2% 5%;
    }
}

@media only screen and (min-width:1300px) {
    .aboutpage {
        margin: 2% 30% 2% 30%;
    }
}

























@media (prefers-color-scheme: dark) {
    body {
        color: #ededed;
        background-color: rgb(15, 15, 15);    
    }   
    
    a {
        color: rgb(44, 44, 255);
    }

    a:visited {
        color: rgb(154, 63, 239);
    }
    
    body::-webkit-scrollbar {
        width: 10px;
    }
    
    body::-webkit-scrollbar-track {
        background-color: rgb(126, 126, 126);
    }
    
    body::-webkit-scrollbar-thumb {
        background-color: rgb(28, 28, 28);
        border-radius: 0px;
    }
    
    body::-webkit-scrollbar-thumb:hover {
        background: rgb(0, 0, 0);
        border-radius: 10px;
    }
    
    .header {
        box-shadow: 0px 0px 5px rgb(18, 28, 32);
        background-color: rgb(0, 80, 151);
    }

    .header-bar li a {
        color: aliceblue;
    }
    
    .header-bar li a:hover {
        background-color: rgb(0, 62, 117);
    }
    
    .title {
        color: aliceblue;
    }

    .bar1, .bar2, .bar3 {
        background-color: aliceblue;

    }

    .sidebar {
        background-color: rgb(0, 80, 151);
        border: 0px;
    }

    .menulink a {
        text-decoration: none;
        color: aliceblue;
    }

    .menulinkactive li:hover {
        background-color: rgb(0, 62, 117);
    }

    table::-webkit-scrollbar-track {
        background-color: rgb(43, 43, 43);
    }
    
    table::-webkit-scrollbar-thumb {
        background-color: rgb(123, 123, 123);
    }
    
    table::-webkit-scrollbar-thumb:hover {
        background: rgb(173, 173, 173);
    }
    
    td {
        border: 2px solid rgb(63, 63, 63);
    }
    th {
        border: 2px solid rgb(148, 148, 148);
    }

    .brokerbutton1 {
        color: rgb(255, 255, 255);
        background-color: rgb(0, 0, 0);
        border: 2px solid rgb(28, 62, 255);
    }
    
    .brokerbutton2 {
        color: rgb(255, 255, 255);
        background-color: rgb(0, 0, 0);
        border: 2px solid rgb(123, 255, 0);
    }
    
    .brokerbutton3 {
        color: rgb(255, 255, 255);
        background-color: rgb(0, 0, 0);
        border: 2px solid rgb(203, 0, 0);
    }
    
    .brokerbutton4 {
        color: rgb(255, 255, 255);
        background-color: rgb(0, 0, 0);
        border: 2px solid rgb(0, 255, 229);
    }

    #submitweight, #restartweight {
        color: rgb(255, 255, 255);
        background-color: rgb(0, 0, 0);
        border: 2px solid rgb(0, 255, 229);
    }

    #submitweight:hover, #restartweight:hover {
        background-image: linear-gradient(to bottom right, rgb(0, 127, 114), rgb(0, 45, 41));
    }

    .indiweight {
        background-color: rgb(15, 15, 15);
        color: white;
        border: none;
        width: 90%;
    }
    
    .brokerbutton1:hover {
        background-image: linear-gradient(to bottom right, rgb(0, 72, 155), rgb(0, 11, 70));
    }
    
    .brokerbutton1:focus {
        background-image: linear-gradient(to bottom right, rgb(0, 72, 155), rgb(0, 11, 70));
    }
    
    .brokerbutton2:hover {
        background-image: linear-gradient(to bottom right, rgb(52, 112, 0), rgb(0, 41, 0));
    }
    
    .brokerbutton2:focus {
        background-image: linear-gradient(to bottom right, rgb(52, 112, 0), rgb(0, 41, 0));
    }
    
    .brokerbutton3:hover {
        background-image: linear-gradient(to bottom right, rgb(161, 0, 0), rgb(62, 0, 0));
    }
    
    .brokerbutton3:focus {
        background-image: linear-gradient(to bottom right, rgb(161, 0, 0), rgb(62, 0, 0));
    }
    
    .brokerbutton4:hover {
        background-image: linear-gradient(to bottom right, rgb(0, 127, 114), rgb(0, 45, 41));
    }
    
    .article {
        box-shadow: 0px 0px 5px rgb(255, 255, 255);
    }
    .article a {
        color: rgb(255, 255, 255);
    }
    
    .article:hover {
        box-shadow: 0px 0px 12px rgb(255, 255, 255);
    }

    .vergleichcontainer a {
        color: rgb(255, 255, 255);
    }

    .vergleichlink {
        box-shadow: 0px 0px 4px rgb(255, 255, 255);
    }

    .vergleichlink:hover {
        box-shadow: 0px 0px 12px rgb(255, 255, 255);
    }

    .title-home {
        box-shadow: 0px 1px 5px rgb(192, 192, 192);
    }

    .containerhome {
        color: white;
        box-shadow: 0px 0px 20px rgb(0, 81, 255);
    }
    
    .containerhome:hover {
        box-shadow: 0px 0px 15px rgb(0, 81, 255);
    }

    .containerhome:visited {
        color: white;
    }

    .hometext {
        box-shadow: 0px 0px 20px rgb(0, 81, 255);
    }

}

  .d-button {
    align-items: center;
    appearance: none;
    background-color:#ffffff;
    border: 0;
    border-radius: 15px;
    box-sizing: border-box;
    color: #141414;
    cursor: pointer;
    display: inline-flex;
    font-family: 'Inter', sans-serif;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    margin-top: 20px;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow, transform;
    font-size: 18px;
  }
  
  .d-button:focus {
    box-shadow: 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #000000 0 -3px 0 inset;
  }
  
  .d-button:hover {
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #000000 0 -3px 0 inset;
    transform: translateY(-2px);
  }
  
  .d-button:active {
    box-shadow: #000000 0 3px 7px inset;
    transform: translateY(2px);
  }

  .pdflogo {
  align-items: left;
  width: 25px;
  margin-right: 11px;
}