/* Add a universal box-sizing reset at the top of your CSS file */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    /* background-color: rgba(0,0,0,0.01);  */
    background-color: white;
    font-size: 20px; 
    margin: 0;
    padding: 0; 
    text-align: left;
    font-weight: 400; 
    width: 100%;
    font-family: "Work Sans";
    overflow: auto;
}

header {
    background-color: blue; 
    color: white; 
    padding: 1.5em 0 1.5em 0;
    margin: 0;
    width: 100%;
    /* hyphens: auto; */
}

header div {
    margin: 0 auto;
    max-width: 800px;
}

header h1 {
    font-family: paris; 
    /* padding: 0 20px 0 20px;
    font-size: clamp(3rem, 12vw, 5rem); */
    hyphens: auto;
}




footer {
    background-color: grey; 
    color: white; 
    opacity: 0.7;
    font-family: "Work Sans", sans-serif;
    font-size: 0.9rem;
}



/* div:hover {
    background-color: rgba(0,0,0, 0.3);
    color: white; 

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    border-radius: 10px;
} */

hr, h1, h2, ul, blockquote {
    margin: 0; 
    font-size: inherit;  
    font-weight: inherit;
}

h1, h2, h3 {
    font-weight: bold; 
    margin: 0 0 0.5rem 0;
    text-align: left;
}


p {
    margin: 0 0 0.5rem 0;
    text-align: left;
}

blockquote {
    margin: 0 0 0.5rem 20px;
    font-style: italic;
    border-style: none none none solid;
    border-width: 5px;
    border-radius: 3px;
    border-color: orange;
    text-align: justify;
    padding-left: 10px;
}

a {
    color: #6A8AF9; 
    text-decoration: none;

}

a:hover {
    text-decoration: underline;
}

footer a {
    color: inherit;
}

footer ul {
    list-style-type: none; 
    padding: 1em 0 1em 0;
    text-align: center;
    line-height: 150%;
    
}


main {
    font-family: "Play Fair", serif;
    margin: 0 auto; 
    padding: 0.5rem 0 0.5rem 0;

    /* background-color: rgba(240, 240, 240, 0.8);  */
}

h1 {
    font-family: "Work Sans", sans-serif;
    font-weight: bold;
    font-size: 2rem;
}

h1:hover {
    font-family: "Jersey 10 Charted";
    color: yellow;
}


h2 {
    font-family: "Work Sans", sans-serif;
    font-weight: bold;
    font-size: 1.3rem;
}

h3 {
    font-family: "Work Sans", sans-serif;
    font-weight: normal;
    font-size: 1.2rem;
}

main div {
    margin: 0 auto 0 auto;
}


.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted; 
    cursor: pointer;
}

.tooltiptext {
    visibility: hidden;  
    width: 200px;
    background-color: rgba(113, 106, 106, 0.9);

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    color: white;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
    
    /* Absolute positioning to place above the text */
    position: absolute;
    bottom: 100%; /* Places the tooltip above the parent element */
    left: 50%; /* Moves starting point to middle of parent */
    transform: translateX(-50%); /* Centers the tooltip relative to parent */
    /* margin-bottom: 5px; Adds space between text and tooltip */
    z-index: 10; /* Ensures the tooltip sits on top of other elements */
    
    opacity: 0;
    transition: opacity 0.3s; /* Adjusted speed for smoother response */
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


a.tooltip:hover  {
    color: blue;
    border-bottom: 1px dotted;
    text-decoration: none;

}

::selection {
  background-color: rgba(255,204,0, 0.8); 
}



.banner {
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
    
    border-style: none dashed none dashed;
    border-width: 2px;
    border-color: rgba(0,0,0,0.1);

    text-align: justify;

    width: 100%;

    /* max-width: 800px; */

    width: min(800px, 100%);
    min-width: 300px;


    margin: 0 auto;

    overflow: auto;
    resize: both;
}

.banner div:not(.reminder):not(.click-me-button):not(.target-box):not(.table-of-contents):not(.simple-div) {
    padding: 1rem 20px 1rem 20px;
    border-style: dashed none dashed none;
    border-color: white;
    border-width: 1px;

}

.banner div:hover:not(.reminder):not(.click-me-button):not(.target-box):not(.table-of-contents):not(.simple-div) {
    border-style: dashed none dashed none;
    border-color: grey;
    border-width: 1px;
}


.orientation {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    color: white; 
    font-family: 'Courier New', Courier, monospace;
    font-weight: 500;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    background-color: darkblue;
    border-radius: 10px;
}


.orientation a { 
    color: inherit; 
    text-decoration: underline;
}

.orientation a:hover {
    color: inherit; 
    text-decoration: none;
}


iframe {
    margin-bottom: 0.5rem;
}



table, tr, td, th {
    border-style: none none solid none;
    border-width: 2px;
    border-collapse: collapse;
    padding: 0.5rem;
    text-align: left;

}

th td{
    text-align: left;
}


td a:hover {
    color: #6A8AF9;
}

td a {
    color: black;
}

tr:hover {
    background-color: lightcyan;
    text-decoration: underline;
    cursor: default;
}




.table-container {
    width: 100%;            
    max-width: 100%;       
    overflow-x: auto; 
}

.table-container table {
    width: 100%;
    min-width: 500px;
    table-layout: auto;     /* Adjusts column widths automatically */
}


.table-container th {
  position: sticky;
  top: 0;
  background-color: #f4f4f4;
  z-index: 1;
}

/* 
.reminder div {
    
} */

.reminder {
    margin: 0 0 0.5rem 20px;
    font-style: italic;
    border-style: none none none solid;
    border-width: 5px;
    border-radius: 3px;
    border-color: red;
    text-align: justify;
    padding-left: 10px;
    padding: 1rem 20px 1rem 20px;
}


ul {
    text-align: left;
}






@font-face {
    font-family: paris;
    src: url("fonts/graph-paris-web.woff2");
    font-weight: bold;
}

@font-face {
    font-family: "Work Sans"; 
    src: url("fonts/WorkSans-VariableFont_wght.ttf");
    font-weight: normal;
}

@font-face {
    font-family: "Play Fair"; 
    src: url("fonts/PlayfairDisplay-VariableFont_wght.ttf") 
}

@font-face {
    font-family: "Jersey 10 Charted";
    src: url("fonts/Jersey10Charted-Regular.ttf")
}


.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased; 
    vertical-align: middle;
    font-size: 1em;
}



#score {
    container-type: inline-size;
    
}

#score .material-symbols-outlined {
    font-size: 17cqi;
}


/* div {
    overflow: auto;

    resize: vertical;
} */





.hidden-checkbox {
  display: none;
}

#hide-trigger:checked ~ .target-box {
  display: none;
}

#hide-trigger:checked ~ .click-me-button span::before {
  content: "+";
}

#hide-trigger:not(:checked) ~ .click-me-button span::before {
    content: "-";
}

.click-me-button {
    cursor: pointer;
    font-family: "Work Sans", sans-serif;
    font-size: 1.3rem;
    padding: 0.5rem;
}

div.table-of-contents {
    border-style: solid;
    color: black; 
    background-color: lightcyan;
    
}

.target-box {
    font-size: 1rem;
    padding: 0.5rem;
}

ol {
    text-align: left;
    margin-bottom: 0;
}

div.table-of-contents {
     padding: 1rem 20px 1rem 20px;
     border-width: 1px;
     border-radius: 10px
}

.text-row {
      display: flex;
      justify-content: space-between; /* Pushes first item to left, second item to right */
      align-items: center; 
      padding: 0;           /* Aligns text vertically in the center */
    }



div.simple-div {
    margin: 1rem 20px 1rem 20px;
    padding: 0;
}

.button {
    background-color: white; 
    color: black;

}

.button:hover {
    background-color: rgb(0,0,200, 0.7);
    color: white;
    transition-delay: 1ms;
    transition-duration: 1s;
    transition-property: background-color, color, font-weight;
    text-decoration: none;
}

.material-symbols-outlined:hover {
    text-decoration: none;
} 

/* Weitere Ideen: 
- Quote mit Anführungszeichen großen */