@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');

 @import url('https://fonts.googleapis.com/css2?family=Gentium+Book+Basic:ital,wght@0,400;0,700;1,400;1,700&display=swap');

 @import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400;0,500;1,400;1,500&display=swap');

 @import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');


 .book-preview {
            display: flex;
            align-items: center;
            margin: 7.5px 0;
        }

        .book-image {
            width: 100px !important;
            height: auto;
            margin-right: 7.5px;
        }

        .book-details {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .book-type {
            font-size: 12px;
            color: #555;
            margin-bottom: 0px;
            line-height: 1;
        }

        .book-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 7.5px;
            line-height: 1;
        }

        .book-tags {
            display: flex;
            gap: 7.5px;
        }

        .tag {
            font-size: 12px;
            padding: 5px 10px;
            border: 0.5px solid #000;
            border-radius: 50px;
            text-align: center;
        }






#block>a>h4 {
    color: #222222 !important; -webkit-text-stroke: 4px #222222; background-color: white; display: inline-block; width: 100%; overflow: visible; margin-bottom: 5px; transform: rotate(-1deg);
}

#block>a:visited>h4 {
    color: gray; background-color: white; display: inline-block; margin-bottom: 5px; transform: rotate(-1deg);
}

#block>a>h4:hover {
    color: white !important; -webkit-text-stroke: 4px white; background-color: #222222 !important; 
}

#block:hover>a>h4 {color: white; -webkit-text-stroke: 4px white;}

.langbut {display:flex; justify-content: center; align-items: center; 
    width: 50px; height: 50px; border-radius: 50%; background-color: white; color:
     white !important; border: none; font-size: 16px;
}

.dutchlang {background-color:#fdffdf;}
.englishlang {background-color:#edfdff;}
.langbut:hover {rotate: 10deg;}

.langbut h1 {
    margin: 0; line-height: 0! important; /* Remove default margins */
}

#contentssign th {font-weight: normal; font-style: italic;}
#contentssign td {font-weight: normal; padding-right: 25px; padding-bottom: 25px;}

#contentssign img {width: 125px !important; height: 125px !important;transform: rotate(2deg);}

.langbut-container {
    display: flex; /* Use flexbox to align buttons horizontally */
    gap: 10px; /* Add spacing between the buttons */
}

body {margin: 7.5px;
            display: flex;
            flex-wrap: nowrap;margin-top: 2.5px; background-color: #e1e1e1;     font-family: 'alda', serif !important;}

        .column {
            padding: 7.5px;
            box-sizing: border-box;
        }



        .right {position: fixed; right: 0px; height: 100%;}

        

       
        .left:first-child, .middle:first-child {
            border-left: none; /* Remove the left border of the first column */
        }


img {width: 100% !important; display: block;}

@media only screen and (min-width: 800px) {
        .left, .right {
            width: 20%; /* 1/6 of the page width */
            border-left: 1px solid #000;
        }

        .left {opacity: 25%; transition: opacity 2s; position: fixed;}
        .left:hover {opacity: 100%}

#enhalt {
    font-family: 'MedievalSharp', sans-serif !important; 
      text-shadow:
    /* Outline */
    -0.25px -0.25px 0 #222222,
    0.25px -0.25px 0 #222222,
    -0.25px 0.25px 0 #222222,
    0.25px 0.25px 0 #222222,  
    -0.5px 0 0 #222222,
    0.5px 0 0 #222222,
    0 0.5px 0 #222222,
    0 -0.5px 0 #222222;
    color: #222222;
    line-height: 1;
}

.middle-l {
            width: 40%; /* 2/6 of the page width */
            border-left: 1px solid #000; min-height: 100%;
            position: absolute;
            left: 19%;
            height: 100vh;
            overflow: scroll;
        }
.middle-r {
            width: 40%; /* 2/6 of the page width */
            border-left: 1px solid #000; min-height: 100%;
            position: absolute;
            left: 59%;
            height: 100vh;
            overflow: scroll; overflow-x: hidden;
        }
.texter {
            width: 70%; /* 2/6 of the page width */ margin-top: 15px;
            border-left: 1px solid #000; min-height: 100%; padding-left: 15px;
        }


H1 {font-family: 'MedievalSharp', sans-serif !important; 
    -webkit-text-stroke: 2.5px #222222;
    color: #222222;
    font-size: 25px !important;
    line-height: 0;}

H2 {font-family: 'MedievalSharp', sans-serif !important; 
      
      -webkit-text-stroke: 10px #222222;
    
    color: #222222;
    font-size: 200px !important;
    line-height: 1; margin:0;
}

H3 {font-family: 'MedievalSharp', sans-serif !important; 
      
      -webkit-text-stroke: 8px #222222;
    
    color: #222222;
    font-size: 100px !important;
    line-height: 1; margin:0;
}

H4 {font-family: 'MedievalSharp', sans-serif !important; 
      
      -webkit-text-stroke: 4px #222222;
    
    color: #222222;
    font-size: 50px !important;
    line-height: 1; margin:0;
}

H5 {font-family: 'MedievalSharp', sans-serif !important; 
      
      -webkit-text-stroke: 2px #222222;
    
    color: #222222;
    font-size: 25px !important;
    line-height: 1; margin:0;
}

#publishes, #archives, #enhalt {
    font-size: 20px !important;
}

#publish>h1 {text-align: center; position: sticky;}

#sandbank {position: fixed; left: 10px; top: 10px; width: 20vw;}

#onefifty {font-size: 150px !important;}
#onetwofive {font-size: 125px !important;}

#texting {width: 60vw; overflow-x: hidden; line-height: 1.5;}

#articles {
font-family: 'alda', serif; font-size: 25px; font-weight: 300; width: 70vw; overflow-x: hidden;
position: absolute; left: calc(20vw + 10px); z-index: 1;;
}

#titlecard {
height: 100vh;
}


#about {opacity: 0; transition: opacity 1s;     font-family: 'alda', serif; height: 0; overflow: hidden; padding-right: 25px;}




#sandbank:hover > #about {
    height: auto; opacity: 100; 
}

#sandbank2 {height: 100vh;}

#sandbank2:hover > #about {
    height: auto; opacity: 100; 
}

#partof {position: fixed; rotate: 90deg; transform-origin: top right; transform: translate(100%, 15px); right: 15px; top: 15px;  z-index: 100000; opacity: 25%; transition: opacity 2s; }
#partof:hover {opacity: 100%}
#partof a {text-decoration: dashed 2px underline;}


}

 @media only screen and (max-width: 800px) {
H1 {font-family: 'MedievalSharp', sans-serif !important; 
        -webkit-text-stroke: 3px #222222;
    color: #222222;
    font-size: 35px !important;
    line-height: 0;
}

        .left {
            width: 100%; /* 1/6 of the page width */
        }

        .left {opacity: 100%}

.middle {
            width: 90%; /* 2/6 of the page width */
            border-left: 1px solid #000; min-height: 100%;
        }

H2 {font-family: 'MedievalSharp', sans-serif !important; 
      
      -webkit-text-stroke: 5px #222222;
    
    color: #222222;
    font-size: 50px !important;
    line-height: 1; margin:0;
}

body {margin-bottom: 100px;}

H3 {font-family: 'MedievalSharp', sans-serif !important; 
      
      -webkit-text-stroke: 5px #222222;
    
    color: #222222;
    font-size: 55px !important;
    line-height: 1; margin:0;
}

H4 {font-family: 'MedievalSharp', sans-serif !important; 
      
      -webkit-text-stroke: 3px #222222;
    
    color: #222222;
    font-size: 25px !important;
    line-height: 1; margin:0;
}

.texter {
            margin-top: 15px; padding-bottom: 150px;
        }


#publishes, #archives {
    font-size: 20px !important;
}

#enhalt {
    font-size: 10px !important;
}

#enhalt {
    font-family: 'MedievalSharp', sans-serif !important; 
      text-shadow:
    /* Outline */
    -0.15px -0.15px 0 #222222,
    0.15px -0.15px 0 #222222,
    -0.15px 0.15px 0 #222222,
    0.15px 0.15px 0 #222222,  
    -0.25px 0 0 #222222,
    0.25px 0 0 #222222,
    0 0.25px 0 #222222,
    0 -0.25px 0 #222222;
    color: #222222;
    line-height: 1;
}



#zandbank {left: 50%; top: 15px; transform: translate(-50%, 0); z-index: 10;}

#partof {display: none;}


#onefifty {font-size: 50px !important;}
#onetwofive {font-size: 41.666px !important;}


#texting {width: 90vw; overflow-x: hidden; line-height: 1.5;}

#articles {
font-family: 'alda', serif; font-size: 20px; font-weight: 300; width: 90vw; overflow-x: hidden;
position: absolute; left: 10px; top: 50px;
}

#titlecard {
height: 80vh;
}
}







td {vertical-align: top; overflow-x: hidden;}

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

#about {opacity: 0; transition: opacity 1s;     font-family: 'alda', serif; height: 0; overflow: hidden; padding-right: 25px;}
#sandbank2 {height: 100vh;}


#publishes, #archives { transition: opacity 1s; font-family: 'alda', serif; height: 0; overflow: hidden;   filter: drop-shadow(0 0 1px #e1e1e1);}

#publishes, #archives{
    font-family: 'MedievalSharp', sans-serif !important; 
      text-shadow:
    /* Outline */
    -0.25px -0.25px 0 #222222,
    0.25px -0.25px 0 #222222,
    -0.25px 0.25px 0 #222222,
    0.25px 0.25px 0 #222222,  
    -0.5px 0 0 #222222,
    0.5px 0 0 #222222,
    0 0.5px 0 #222222,
    0 -0.5px 0 #222222;
    color: #222222;
    line-height: 1;
}

#enhalt, table { table-layout:fixed; display: table; width: 100%}
#enhalt img {width: 100%; margin-top: 3px;}
#enhalt td {padding: 5px}

#zandbank {position: fixed;}






img {width: 78vw;}