:root {
    --font-weights-thin: 100;
    --font-weights-normal: 400;
    --font-weights-bold: 700;

    --font-sizes-x-small: 12px;
    --font-sizes-small: 16px;
    --font-sizes-medium: 18px;
    --font-sizes-semi-large: 21px;
    --font-sizes-large: 28px;
    --font-sizes-x-large: 32px;
    --font-sizes-xx-large: 56px;
    --font-sizes-xxx-large: 64px;
    --font-sizes-xxxx-large: 111px;
    --font-sizes-xxxxx-large: 128px;

    --body-width-medium: 655px;
}

@font-face {
	font-family: 'EB Garamond';
    src: 
        url('/css/fonts/EB_Garamond/EBGaramond-Italic-VariableFont_wght.ttf') format('tff')
        url('/css/fonts/EB_Garamond/EBGaramond-VariableFont_wght.ttf') format('tff');
	font-display: swap;
}

body {
    font-family: 'EB Garamond', 'Apple Garamond Light';
    font-weight: var(--font-weights-normal);
    font-size: var(--font-sizes-semi-large);
    /* font-size: 1.8vw; */
    margin-left: 80px;
    margin-right: 80px;
}

article {
    width: 655px;
    padding-bottom: 300px;
    margin: auto;
    font-size: var(--font-sizes-semi-large);
}

img {
    max-width: 600px;
    max-height: 600px;
    height: auto;
    width: auto;
    margin-bottom: 80px;
    margin-top: 80px;
    /* margin-left: calc(var(--body-width-medium) + 20px); */
    /* margin-left: 50%; */
    margin: auto;
    display: block;
  }

.coe-grid {
    width: 1200px;
    height: auto;
    max-height: 2000px;
    margin-left: 80px;
}

.grid-container {
    position: relative;
    width: 600px; /* Adjust to match the actual size of your grid image */
    height: 1200px; /* Adjust to match the actual size of your grid image */
    background-image: url('assets/images/coe-grid-empty.png');
    background-size: cover; /* This ensures that your background image covers the entire div */
}

.grid-cell {
    position: absolute;
    z-index: 999;
}

#cell1 {
    top: 35px;
    left: 51px;
    width: 115px;
}

#cell2 {
    top: 47px;
    left: 213px;
    width: 178px;
}

#cell3 {
    top: 19px;
    left: 440px;
    width: 128px;;
}

/* Continue with positions for other cells... */

.grid-cell img {
    width: 100%;
    height: auto;
    text-decoration: none; /* Removes underline from links */
    color: inherit; /* Keeps the text color consistent */
    display: block; /* Makes the entire area clickable */
}

.grid-cell a {
    display: block;
}

.grid-cell a img {
    transition: filter 0.3s ease; /* Smooth transition for the glow effect */
}

.grid-cell a img:hover, .grid-cell a img:focus {
    /* Optional: Styles for hover and focus states */
    filter: drop-shadow(0 0 10px #48abe0); /* Adjust color and size of glow */
}

.coe-title {
    max-height: 200px;
    margin-left: -50px;
    margin-bottom: 0px;
    z-index: 1000;
    max-height: 200px;
    position: sticky;
    top: 20px; 
    /* margin: auto;  */
}

.coe-doc-title {
    z-index: 1000;
    max-height: 77px;
    position: sticky;
    top: 20px; 
    margin: auto; 
}

.index-container {
    display: flex;
    font-size: var(--font-sizes-large);
    /* width: calc(var(--body-width-medium)*2); */
}

.doc-container {
    display: flex;
    flex-direction: column;
    /* flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center; */
}

.doc-container img {
    flex: 1; /* Each column takes up equal space */
    padding: 10px; /* Optional: for some space inside the columns */
}

.doc-container p.normal-text {
    flex: 1;
    margin-top: 0px;
    margin-bottom: 0.5em;
    /* margin-bottom: 0.05em; */
}

.column1, .column2 {
    flex: 1; /* Each column takes up equal space */
    padding: 10px; /* Optional: for some space inside the columns */
}

ul {
    list-style-type: circle;
}

.title {
    margin-bottom: 0.05em;
}

.subtitle {
    margin: 0;
    color: darkgray;
    font-size: var(--font-sizes-large);
    margin-bottom: 4em;

}

h2 {
    font-size: var(--font-sizes-x-large);
}

p.normal-text:empty {
    margin-bottom: 1em;
}

p.normal-text span:empty {
    margin-bottom: 1em;
}