/* Fonts */
.manufacturing-consent-regular {
  font-family: "Manufacturing Consent", system-ui;
  font-weight: 400;
  font-style: normal;
}
.unifrakturmaguntia-regular {
  font-family: "UnifrakturMaguntia", cursive;
  font-weight: 400;
  font-style: normal;
}
.unifrakturcook-bold {
  font-family: "UnifrakturCook", cursive;
  font-weight: 700;
  font-style: normal;
}
.astloch-regular {
  font-family: "Astloch", system-ui;
  font-weight: 400;
  font-style: normal;
}
.astloch-bold {
  font-family: "Astloch", system-ui;
  font-weight: 700;
  font-style: normal;
}
.almendra-display-regular {
  font-family: "Almendra Display", serif;
  font-weight: 400;
  font-style: normal;
}
.texturina-<uniquifier> {
  font-family: "Texturina", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.jim-nightshade-regular {
  font-family: "Jim Nightshade", cursive;
  font-weight: 400;
  font-style: normal;
}
.syne-tactile-regular {
  font-family: "Syne Tactile", system-ui;
  font-weight: 400;
  font-style: normal;
}
.almendra-regular {
  font-family: "Almendra", serif;
  font-weight: 400;
  font-style: normal;
}
.almendra-bold {
  font-family: "Almendra", serif;
  font-weight: 700;
  font-style: normal;
}
.almendra-regular-italic {
  font-family: "Almendra", serif;
  font-weight: 400;
  font-style: italic;
}
.almendra-bold-italic {
  font-family: "Almendra", serif;
  font-weight: 700;
  font-style: italic;
}

/* Variables */
:root {
--rot-light: #a29e8d;
--rot-mid: #7a755e;
--rot-deep: #645e43;
--lilac: #9393b8;
--lilac-deep: #4d4363;
--void: #262626;
--void-deep: #0e0e11;
--black: #000000;
    
--cream-light: #f2e3c8;
--cream: #d8c49f;
--cream-deep: #B5A586;
--coffee-light: #8C7F68;
--coffee: #847760;
--coffee-deep: #594C32;
    
}

h1 {font-family: "UnifrakturCook", cursive;}
h2 {font-family: "Syne Tactile", system-ui}
h3 {font-family: "Jim Nightshade", cursive}
p {font-family: "Manufacturing Consent", system-ui}


* {
  cursor: url('https://cdn.cursors-4u.net/previews/world-of-warcraft-wow-hand-armor-0d67e864-32.webp') 32 32, auto !important;
}

body {
    background-color: var(--black);
    background-image: url(img/Background/blackpaper-dithered.jpg);
    font-family: "Almendra", serif;
    font-weight: 400;
    font-size: 1.3em;
    color: var(--rot-light);
    width: 100%;
    
    /* hide horizontal scrollbar */
    overflow-x: hidden;
    }

/* Four Corner Vine Placement */
#topleft {
    width: 45%;
    height: 50%;
    position: absolute; 
    top: 0; 
    left: 0;
    background-image: url(img/Background/vines_topleft.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    z-index: -1;
}
#topright {
    width: 45%;
    height: 50%;
    position: absolute; 
    top: 0px; 
    right: 0px;
    background-image: url(img/Background/vines_topright.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    z-index: -1;
}
#bottomleft {
    width: 45%;
    height: 50%;
    position: absolute; 
    bottom: 0px; 
    left: 0px;
    background-image: url(img/Background/vines_bottomleft.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    z-index: -1;
}
#bottomright {
    width: 45%;
    height: 50%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-image: url(img/Background/vines_bottomright.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    z-index: -1;
}


/* break line */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--rot-deep);
    margin: 1em auto;
    padding: 0;
}

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: url(img/rot/detail3.png);
  padding-right: 5px;
}

a {
    color: var(--lilac)
}

.wrapper {
    margin: auto;
    margin-top: 20px;
    text-align: center;
    width: 90%;
    max-width: 1000px;
    
}

#header {
    background-image: url(img/altar_rot.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    width: 100%;
    height: 225px;
    
}

#navbar {
    margin-top: 10px;
    height: max-content;
    width: 100%;
                
}

#navbar ul {
    display: flex;
    padding: 20px;
    margin: 0;
    list-style-type:none ;
    justify-content: space-evenly;
    
}

#navbar li:before {
  content: none;
  padding-right: 5px;  
}

/* navigation links*/
#navbar li a {
    color: var(--rot-mid);
    font-family: "Syne Tactile", system-ui;
    font-style: normal;        
    text-decoration: none;
}

#navbar li a:hover {
    color: var(--lilac);
    text-decoration: underline;
}

footer {
    text-align: center;
    color: var(--rot-deep);
    font-size: 0.9em;
    letter-spacing: 1.5px;
    margin: 15px;
    height: max-content;
    width: 100%;
    width: 100%;
}

footer a{
    font-style: italic;
    letter-spacing: 1.5px;
}

/* HOME */

.homecontainer {
    display: flex;
    gap: 10px;

}

.homemain {
    text-align: center;
    order: 2;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABQUlEQVR4AezXQW7CQBBE0SQHzS2yyQGyyS24KGgQT0IlWrbBm2mDNCq63FOiPmz4+pjk9f6ge39RxyX6+/N9HudN9FUCg+I4csb7ccyvar/f6KBzfxDi/f2fPh8dz3M/fc8r7UNU86TFTwJL/tqczO1DNJslMYT41SzHnnmt9iGahBDgPzsjmznyUvsQ1VzDtQTsp+b9zM998/xENUWA8jXdqu7Lo/wqb16iVTM+AlXzJd99eblf+fMS1Tib8qvGuV/N7svLvcqfl6iGmt0IXP8Hjfd8e1vV/ZF1f/hV3vxENcumKHi+VfN+5ld5fYgikM35CGyd5eU9eal9iGYzJPiI8KvZvj3zWu1DFAGkKD+JLPnu02o/c/sQ1Uxzmj5CqdV++vIq7Ue0aspPQjnbe1aPRxSpvUnKPS5RBPbWaYheAAAA//8ENpUMAAAABklEQVQDAC2NsGSjzZ+nAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
    margin-bottom: 20px;
    width:  50%;
    display: block;
    justify-items: center
    
    }

.homeimg{
    width: 80%;
    background-image: url(img/photos/dithered_38.gif);
    height:50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.homeside {
    text-align: justify;
    color: var(--rot-light);
    padding: 5px;
    font-family: "Manufacturing Consent", system-ui;
    background-color: var(--void);
    width:  25%;
    height: 700px;

}

.homebox {
    text-align: left;
    background-color: var(--void-deep);
    padding: 10px;
    border: dotted px var(--rot-deep)
}

.homescrollbox {
    text-align: left;
    background-color: var(--void-deep);
    padding: 10px;
    height: 50%;
    overflow: scroll;
    
    /* hide horizontal scrollbar */
    overflow-x: hidden;
}


#homeleft {
    padding-left: 10px;
    order: 1;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAA60lEQVR4AezWQQrDQAgF0LYH7S266QG66S1y0QQXPwRhUFEDioUhdGr+2BcXeT2KfKbR6Ac1oiMaLRCd129Gv5/3fl3RYlJeH1Eo/v7bk5b0z7N+7yOaJWTN7SNKc0kLs2qViKrvI8olSZdWlJQ2p74oJEnvurCvlYiqqyu6EsM+dKOktDl1RVdi2IesViKqrq4oBJjg+S6KfdTdda0vCikuODMKmcVVfPQQ5LKLvLRtsdG0k43B06gRTCwXRTGbmFUxMalAbDTpXHOsulHI4mo+yXmDulHnOe7bp1E3IQsYUQbi/jqibkIWcAAAAP//hyt4FwAAAAZJREFUAwBMYnhV0BTFIAAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
    
}

#homeright {
    padding-right: 10px;
    order: 3;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAyUlEQVR4AezSTQqDMBRF4bYL7S466QI66S660To6IBcOislEuUJ4vJ8E/czjdpKnLzr7R1W0orMFZp/XO2qi79fzv142l/WKpgj55/u7rxe69C1W1GT2Cub+iqZI5shyX7OfeUVThDwFkaVvsaImgyCyROq2r6ImsyVoshU1UcSQzTmrX040P/xwjhiyROp2cEVNBkH6W5LMVRQJi0imsM1X1GSQtL7VK2oy3EniXuGKmiiCRJvLekVTZDSv6Khg7q9oiozmpxFdAAAA//9xdcmiAAAABklEQVQDAE0liFUJwdi9AAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

#homeflag {
    display: flex; 
    justify-content: center; 
    height: 30%;
    margin: 10px;
}

.calendarbox{

}


/*  ABOUT  */
.aboutcontainer {
    display: flex;
    gap: 10px;

}

.aboutmain {
    background-color: var(--coffee-deep);
    color: var(---light);
    text-align: center;
    order: 1;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABO0lEQVR4AezXUYrCQBCE4d09TO5/nlxmZcQPpLBJonmZjsJQdqWnsH598e9nktf3g579RV2X6LIs/+N8iX5KYFAcR854P475U+33Gx10ng9CvHVdf18dz3M/fc8r7UNU86TFTwJb/t6czO1DNJslMYT41SzHnnmv9iGahBDgvzsjmznyUvsQ1VzDvQTsp+b9zM998/xENUWA8jU9qu7Lo/wqb16iVTM+AlXzLd99eblf+fMS1Tib8qvGuV/N7svLvcqfl6iGmj0I3P8Hjfd8e0fV/ZH1fPhV3vxENcumKHh+VPN+5ld5fYgikM35CByd5eU9eal9iGYzJPiI8KvZvj3zXu1DFAGkKD+JbPnu02o/c/sQ1Uxzmj5CqdV++vIq7Ue0aspPQjnbe1evRxSps0nKvS5RBM7WaYjeAAAA///6lq3bAAAABklEQVQDAGsysGTTsCFrAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
    margin-bottom: 20px;
    width:  50%;
    display: block;
    justify-items: center;
    font-size: 0.8em;
    }



.aboutside {
    text-align: justify;
    color: var(--rot-light);
    padding: 5px;
    font-family: "Manufacturing Consent", system-ui;
    background-color: var(--void);
    height: 800px;

}

#aboutleft {
    width:  25%;
    padding-left: 10px;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAA60lEQVR4AezWQQrDQAgF0LYH7S266QG66S1y0QQXPwRhUFEDioUhdGr+2BcXeT2KfKbR6Ac1oiMaLRCd129Gv5/3fl3RYlJeH1Eo/v7bk5b0z7N+7yOaJWTN7SNKc0kLs2qViKrvI8olSZdWlJQ2p74oJEnvurCvlYiqqyu6EsM+dKOktDl1RVdi2IesViKqrq4oBJjg+S6KfdTdda0vCikuODMKmcVVfPQQ5LKLvLRtsdG0k43B06gRTCwXRTGbmFUxMalAbDTpXHOsulHI4mo+yXmDulHnOe7bp1E3IQsYUQbi/jqibkIWcAAAAP//hyt4FwAAAAZJREFUAwBMYnhV0BTFIAAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
    display: block;
    justify-items: center;
    text-align: center;
}

.linkbox{
    background-color: var(--void-deep);
    width: 80%;
    padding-top: 15px;
    padding-bottom: 15px;
    display: grid;
    justify-items: center;
    text-align: center;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABQUlEQVR4AezXQW7CQBBE0SQHzS2yyQGyyS24KGgQT0IlWrbBm2mDNCq63FOiPmz4+pjk9f6ge39RxyX6+/N9HudN9FUCg+I4csb7ccyvar/f6KBzfxDi/f2fPh8dz3M/fc8r7UNU86TFTwJL/tqczO1DNJslMYT41SzHnnmt9iGahBDgPzsjmznyUvsQ1VzDtQTsp+b9zM998/xENUWA8jXdqu7Lo/wqb16iVTM+AlXzJd99eblf+fMS1Tib8qvGuV/N7svLvcqfl6iGmt0IXP8Hjfd8e1vV/ZF1f/hV3vxENcumKHi+VfN+5ld5fYgikM35CGyd5eU9eal9iGYzJPiI8KvZvj3zWu1DFAGkKD+JLPnu02o/c/sQ1Uxzmj5CqdV++vIq7Ue0aspPQjnbe1aPRxSpvUnKPS5RBPbWaYheAAAA//8ENpUMAAAABklEQVQDAC2NsGSjzZ+nAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

#aboutright {
    width:  25%;
    padding-right: 10px;
    order: 2;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAyUlEQVR4AezSTQqDMBRF4bYL7S466QI66S660To6IBcOislEuUJ4vJ8E/czjdpKnLzr7R1W0orMFZp/XO2qi79fzv142l/WKpgj55/u7rxe69C1W1GT2Cub+iqZI5shyX7OfeUVThDwFkaVvsaImgyCyROq2r6ImsyVoshU1UcSQzTmrX040P/xwjhiyROp2cEVNBkH6W5LMVRQJi0imsM1X1GSQtL7VK2oy3EniXuGKmiiCRJvLekVTZDSv6Khg7q9oiozmpxFdAAAA//9xdcmiAAAABklEQVQDAE0liFUJwdi9AAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

.aboutbox{
    display: flex;
    background-color: var(--void-deep)
    
}

.aboutimg{
    background-image: url(img/frames/teaframe.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 275px;
}

.abouttext{
    padding: 0px 20px 20px 20px;
}

/* DRESS UP DOLL */

.dressupframeborder{
    width: 90%;
    height: 600px;
            border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABQUlEQVR4AezXQW7CQBBE0SQHzS2yyQGyyS24KGgQT0IlWrbBm2mDNCq63FOiPmz4+pjk9f6ge39RxyX6+/N9HudN9FUCg+I4csb7ccyvar/f6KBzfxDi/f2fPh8dz3M/fc8r7UNU86TFTwJL/tqczO1DNJslMYT41SzHnnmt9iGahBDgPzsjmznyUvsQ1VzDtQTsp+b9zM998/xENUWA8jXdqu7Lo/wqb16iVTM+AlXzJd99eblf+fMS1Tib8qvGuV/N7svLvcqfl6iGmt0IXP8Hjfd8e1vV/ZF1f/hV3vxENcumKHi+VfN+5ld5fYgikM35CGyd5eU9eal9iGYzJPiI8KvZvj3zWu1DFAGkKD+JLPnu02o/c/sQ1Uxzmj5CqdV++vIq7Ue0aspPQjnbe1aPRxSpvUnKPS5RBPbWaYheAAAA//8ENpUMAAAABklEQVQDAC2NsGSjzZ+nAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}


/* SANCTUARY */

.sanctuary{
    text-align: center;
    background-color: var(--void-deep);
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABQUlEQVR4AezXQW7CQBBE0SQHzS2yyQGyyS24KGgQT0IlWrbBm2mDNCq63FOiPmz4+pjk9f6ge39RxyX6+/N9HudN9FUCg+I4csb7ccyvar/f6KBzfxDi/f2fPh8dz3M/fc8r7UNU86TFTwJL/tqczO1DNJslMYT41SzHnnmt9iGahBDgPzsjmznyUvsQ1VzDtQTsp+b9zM998/xENUWA8jXdqu7Lo/wqb16iVTM+AlXzJd99eblf+fMS1Tib8qvGuV/N7svLvcqfl6iGmt0IXP8Hjfd8e1vV/ZF1f/hV3vxENcumKHi+VfN+5ld5fYgikM35CGyd5eU9eal9iGYzJPiI8KvZvj3zWu1DFAGkKD+JLPnu02o/c/sQ1Uxzmj5CqdV++vIq7Ue0aspPQjnbe1aPRxSpvUnKPS5RBPbWaYheAAAA//8ENpUMAAAABklEQVQDAC2NsGSjzZ+nAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
    margin-bottom: 20px;
    width:  100%;
    height: 800px;
    display: block;
    justify-items: center;

}

.sanctuaryframe{
    width: 100%;
    height: 100%;
    border: none;
}

.sanctuaryframeborder{
    width: 800px;
    height: 550px;
        border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABQUlEQVR4AezXQW7CQBBE0SQHzS2yyQGyyS24KGgQT0IlWrbBm2mDNCq63FOiPmz4+pjk9f6ge39RxyX6+/N9HudN9FUCg+I4csb7ccyvar/f6KBzfxDi/f2fPh8dz3M/fc8r7UNU86TFTwJL/tqczO1DNJslMYT41SzHnnmt9iGahBDgPzsjmznyUvsQ1VzDtQTsp+b9zM998/xENUWA8jXdqu7Lo/wqb16iVTM+AlXzJd99eblf+fMS1Tib8qvGuV/N7svLvcqfl6iGmt0IXP8Hjfd8e1vV/ZF1f/hV3vxENcumKHi+VfN+5ld5fYgikM35CGyd5eU9eal9iGYzJPiI8KvZvj3zWu1DFAGkKD+JLPnu02o/c/sQ1Uxzmj5CqdV++vIq7Ue0aspPQjnbe1aPRxSpvUnKPS5RBPbWaYheAAAA//8ENpUMAAAABklEQVQDAC2NsGSjzZ+nAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

.mobilemessage{
    display: none;
    text-align: center;
    background-color: var(--void-deep);
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABQUlEQVR4AezXQW7CQBBE0SQHzS2yyQGyyS24KGgQT0IlWrbBm2mDNCq63FOiPmz4+pjk9f6ge39RxyX6+/N9HudN9FUCg+I4csb7ccyvar/f6KBzfxDi/f2fPh8dz3M/fc8r7UNU86TFTwJL/tqczO1DNJslMYT41SzHnnmt9iGahBDgPzsjmznyUvsQ1VzDtQTsp+b9zM998/xENUWA8jXdqu7Lo/wqb16iVTM+AlXzJd99eblf+fMS1Tib8qvGuV/N7svLvcqfl6iGmt0IXP8Hjfd8e1vV/ZF1f/hV3vxENcumKHi+VfN+5ld5fYgikM35CGyd5eU9eal9iGYzJPiI8KvZvj3zWu1DFAGkKD+JLPnu02o/c/sQ1Uxzmj5CqdV++vIq7Ue0aspPQjnbe1aPRxSpvUnKPS5RBPbWaYheAAAA//8ENpUMAAAABklEQVQDAC2NsGSjzZ+nAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
    margin-bottom: 20px;
    width:  90%;
    justify-items: center
}


/* LIBRARY */

.librarycontainer {
    text-align: left;
}

.library-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 30px;
}

.filter-btn {
    font-family: "UnifrakturCook", cursive;
    background-color: var(--void);
    color: var(--rot-light);
    border: 1px solid var(--coffee-deep);
    padding: 6px 14px;
    cursor: pointer;
    text-transform: lowercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
    transition: 0.3s ease;
}

.filter-btn:hover {
    color: var(--lilac);
    border-color: var(--lilac);
}

.filter-btn.active {
    background-color: var(--lilac-deep);
    color: var(--rot-light);
    border-color: var(--lilac);
}

.library-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.library-item {
    background-color: var(--void);
    
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAA60lEQVR4AezWQQrDQAgF0LYH7S266QG66S1y0QQXPwRhUFEDioUhdGr+2BcXeT2KfKbR6Ac1oiMaLRCd129Gv5/3fl3RYlJeH1Eo/v7bk5b0z7N+7yOaJWTN7SNKc0kLs2qViKrvI8olSZdWlJQ2p74oJEnvurCvlYiqqyu6EsM+dKOktDl1RVdi2IesViKqrq4oBJjg+S6KfdTdda0vCikuODMKmcVVfPQQ5LKLvLRtsdG0k43B06gRTCwXRTGbmFUxMalAbDTpXHOsulHI4mo+yXmDulHnOe7bp1E3IQsYUQbi/jqibkIWcAAAAP//hyt4FwAAAAZJREFUAwBMYnhV0BTFIAAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;

    padding-left: 10px;
}

.library-title {
    font-family: "Manufacturing Consent", system-ui;
    font-size: 1.1em;
    color: var(--rot-light);
    text-decoration: none;
}

.library-title:hover {
    color: var(--lilac);
    text-decoration: underline;
}

.library-tags {
    margin-top: 8px;
}

.library-tag {
    font-family: "Syne Tactile", system-ui;
    font-size: 0.7em;
    color: var(--rot-mid);
    margin-right: 12px;
}

.library-empty {
    font-family: "Manufacturing Consent", system-ui;
    color: var(--rot-mid);
    text-align: center;
}


/* DEVOTIONS */

.devotioncontainer {
    display: flex;
    gap: 10px;

}

.calendarbox{display: inherit;}

#devotionleft {
    order: 1;
    text-align: left;
    color: var(--rot-light);
    padding: 10px;
    font-family: "Manufacturing Consent", system-ui;
    background-color: var(--void);
    width:  25%;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAA60lEQVR4AezWQQrDQAgF0LYH7S266QG66S1y0QQXPwRhUFEDioUhdGr+2BcXeT2KfKbR6Ac1oiMaLRCd129Gv5/3fl3RYlJeH1Eo/v7bk5b0z7N+7yOaJWTN7SNKc0kLs2qViKrvI8olSZdWlJQ2p74oJEnvurCvlYiqqyu6EsM+dKOktDl1RVdi2IesViKqrq4oBJjg+S6KfdTdda0vCikuODMKmcVVfPQQ5LKLvLRtsdG0k43B06gRTCwXRTGbmFUxMalAbDTpXHOsulHI4mo+yXmDulHnOe7bp1E3IQsYUQbi/jqibkIWcAAAAP//hyt4FwAAAAZJREFUAwBMYnhV0BTFIAAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

    #devotionleft h2{
        font-family: "Manufacturing Consent",system-ui;
        font-style: normal;
        font-size: 1.8em;
        letter-spacing: 2px;
        text-align: center;
    }
    #devotionleft h3{
        font-size: 1.5em
    }
    #devotionleft p{
        font-family: "Syne Tactile", system-ui; 
        font-style: italic; 
        color: var(--rot-mid);
    }

.devotionmain {
    text-align: center;
    order: 2;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABQUlEQVR4AezXQW7CQBBE0SRXyz2yyrGyyj04G2gQT0IlWrbBm2mDNCq63FOiPmz4+pjk9f6ge39RxyX6+/N9HudN9FUCg+I4csb7ccyvar/f6KBzfxDi/f2fPh8dz3M/fc8r7UNU86TFTwJL/tqczO1DNJslMYT41SzHnnmt9iGahBDgPzsjmznyUvsQ1VzDtQTsp+b9zM998/xENUWA8jXdqu7Lo/wqb16iVTM+AlXzJd99eblf+fMS1Tib8qvGuV/N7svLvcqfl6iGmt0IXP8Hjfd8e1vV/ZF1f/hV3vxENcumKHi+VfN+5ld5fYgikM35CGyd5eU9eal9iGYzJPiI8KvZvj3zWu1DFAGkKD+JLPnu02o/c/sQ1Uxzmj5CqdV++vIq7Ue0aspPQjnbe1aPRxSpvUnKPS5RBPbWaYheAAAA//+FZ23HAAAABklEQVQDAMAJsGRh5LUeAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
    margin-bottom: 20px;
    width:  75%;
    display: block;
    justify-items: center
    
    }

.devotions{
    display: block;
    justify-items: center;
    width: 100%;
    height: 600px;
    overflow: scroll;
    /* hide horizontal scrollbar */
    overflow-x: hidden;
}

.devotionentry{
    padding-left: 10px;
    padding-right: 10px;
    width: 90%;
    margin: 15px;
}

.devotionentry h3{
    margin: 5px;
    font-size: 1.5em;
}

.devotionentry p{
    font-family: 'Texturina';
    font-weight: 100; 
    font-style: italic; 
    font-size: 0.8em; 
    letter-spacing: 1px
    
}

#devotionodd {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    text-align: left;
    background-color: var(--void);
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAA60lEQVR4AezWQQrDQAgF0LYH7S266QG66S1y0QQXPwRhUFEDioUhdGr+2BcXeT2KfKbR6Ac1oiMaLRCd129Gv5/3fl3RYlJeH1Eo/v7bk5b0z7N+7yOaJWTN7SNKc0kLs2qViKrvI8olSZdWlJQ2p74oJEnvurCvlYiqqyu6EsM+dKOktDl1RVdi2IesViKqrq4oBJjg+S6KfdTdda0vCikuODMKmcVVfPQQ5LKLvLRtsdG0k43B06gRTCwXRTGbmFUxMalAbDTpXHOsulHI4mo+yXmDulHnOe7bp1E3IQsYUQbi/jqibkIWcAAAAP//hyt4FwAAAAZJREFUAwBMYnhV0BTFIAAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

#devotioneven {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 15px;
    text-align: right;
    background-color: var(--void-deep);
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAy0lEQVR4AezSQQqDQAyF4bZX6z266rFceQ/PpmTxgzx4BJzZKE8IQzKZQT/zed3kyYvO/lERjehsgdn3ZUad6P/33c/h+rQeURXRfFm3dwW6uq95RFVkNI9oJ8hs1pxWdP0RdUKlV8E+suRujaiTQbBUz0HdnYuok0HRCbp6RJ0oYshqn6s/TlQ//HKOGLKs1N3FEXUyCLLfSdIXUSTciqQKu/6IOpmr9Yh2cswms9r1R9QJIcjq+rQeURUZzSM6KqjnI6oio/ltRA8AAAD//zpPLkwAAAAGSURBVAMAO354VTPABxEAAAAASUVORK5CYII=") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

.devotion-text {
    flex: 1;
    min-width: 0;
    
}

.devotionimg {
    display: flex;
    width: 180px;
    max-width: 35%;
    height: 100%;
    margin: 0;
}



/* CREATIONS */

.creations{
    display: flex;
    gap: 1em;
    
}
.creations a{
    font-family: "Manufacturing Consent", system-ui;
    font-style: italic;
    text-transform: none;
    
}

.creationsside{
    order: 1;
    text-align: left;
    color: var(--rot-light);
    padding: 10px;
    font-family: "Manufacturing Consent", system-ui;
    background-color: var(--void);
    width:  30%;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAA60lEQVR4AezWQQrDQAgF0LYH7S266QG66S1y0QQXPwRhUFEDioUhdGr+2BcXeT2KfKbR6Ac1oiMaLRCd129Gv5/3fl3RYlJeH1Eo/v7bk5b0z7N+7yOaJWTN7SNKc0kLs2qViKrvI8olSZdWlJQ2p74oJEnvurCvlYiqqyu6EsM+dKOktDl1RVdi2IesViKqrq4oBJjg+S6KfdTdda0vCikuODMKmcVVfPQQ5LKLvLRtsdG0k43B06gRTCwXRTGbmFUxMalAbDTpXHOsulHI4mo+yXmDulHnOe7bp1E3IQsYUQbi/jqibkIWcAAAAP//hyt4FwAAAAZJREFUAwBMYnhV0BTFIAAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

.creationlinks{
    display: grid;
    justify-items: center;
    gap: 1em;
}

.creationsmain{
    order: 2;
    width: 70%;
}

.creationsinfo {
    text-align: center;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABQUlEQVR4AezXQW7CQBBE0SQHzS2yyQGyyS24KGgQT0IlWrbBm2mDNCq63FOiPmz4+pjk9f6ge39RxyX6+/N9HudN9FUCg+I4csb7ccyvar/f6KBzfxDi/f2fPh8dz3M/fc8r7UNU86TFTwJL/tqczO1DNJslMYT41SzHnnmt9iGahBDgPzsjmznyUvsQ1VzDtQTsp+b9zM998/xENUWA8jXdqu7Lo/wqb16iVTM+AlXzJd99eblf+fMS1Tib8qvGuV/N7svLvcqfl6iGmt0IXP8Hjfd8e1vV/ZF1f/hV3vxENcumKHi+VfN+5ld5fYgikM35CGyd5eU9eal9iGYzJPiI8KvZvj3zWu1DFAGkKD+JLPnu02o/c/sQ1Uxzmj5CqdV++vIq7Ue0aspPQjnbe1aPRxSpvUnKPS5RBPbWaYheAAAA//8ENpUMAAAABklEQVQDAC2NsGSjzZ+nAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
    margin-bottom: 20px;
}

.creationscontainer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px;
    gap: 1em;
}

.creationsiframe {
	border: none;
    height: 800px;
	width: 100%;
}

.mask1 {
  -webkit-mask-image: url(img/scraps/blacksquare.png);
  mask-image: url(img/scraps/blacksquare.png);
  mask-repeat: no-repeat;
mask-size: contain;
}

/* Slideshow container */
.slideshow-container {
   max-width: 90%;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.3s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
    background-color: var(--lilac-deep)
}

/* Position the "next button" to the right */
.next {
  right: -10;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: -10;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: var(--void);
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.4s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


/* MUSEUM */

.museuminfo {
    text-align: center;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABQUlEQVR4AezXQW7CQBBE0SQHzS2yyQGyyS24KGgQT0IlWrbBm2mDNCq63FOiPmz4+pjk9f6ge39RxyX6+/N9HudN9FUCg+I4csb7ccyvar/f6KBzfxDi/f2fPh8dz3M/fc8r7UNU86TFTwJL/tqczO1DNJslMYT41SzHnnmt9iGahBDgPzsjmznyUvsQ1VzDtQTsp+b9zM998/xENUWA8jXdqu7Lo/wqb16iVTM+AlXzJd99eblf+fMS1Tib8qvGuV/N7svLvcqfl6iGmt0IXP8Hjfd8e1vV/ZF1f/hV3vxENcumKHi+VfN+5ld5fYgikM35CGyd5eU9eal9iGYzJPiI8KvZvj3zWu1DFAGkKD+JLPnu02o/c/sQ1Uxzmj5CqdV++vIq7Ue0aspPQjnbe1aPRxSpvUnKPS5RBPbWaYheAAAA//8ENpUMAAAABklEQVQDAC2NsGSjzZ+nAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
    margin-bottom: 20px;
}

.museumcontainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    margin-bottom: 20px;
    gap: 1em;
}

.museumbox {
    color: var(--rot-light);
    font-family: "Syne Tactile", system-ui;
    padding: 10px;
    display: block;
    justify-items: center;
}

.museumitem {
    font-family: "Manufacturing Consent", system-ui;
    font-style: italic;
    text-align: left;
    width: 90%;
    background-color: var(--void);
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAA60lEQVR4AezWQQrDQAgF0LYH7S266QG66S1y0QQXPwRhUFEDioUhdGr+2BcXeT2KfKbR6Ac1oiMaLRCd129Gv5/3fl3RYlJeH1Eo/v7bk5b0z7N+7yOaJWTN7SNKc0kLs2qViKrvI8olSZdWlJQ2p74oJEnvurCvlYiqqyu6EsM+dKOktDl1RVdi2IesViKqrq4oBJjg+S6KfdTdda0vCikuODMKmcVVfPQQ5LKLvLRtsdG0k43B06gRTCwXRTGbmFUxMalAbDTpXHOsulHI4mo+yXmDulHnOe7bp1E3IQsYUQbi/jqibkIWcAAAAP//hyt4FwAAAAZJREFUAwBMYnhV0BTFIAAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
    padding:0;
    margin-top: 10px;
}


/* JOURNAL */

.journal{
    border-bottom: 1px solid var(--rot-deep);
    display: flex;
    height: 700px;
        overflow: scroll;
    /* hide horizontal scrollbar */
    overflow-x: hidden;
    gap:10px;
    
}

.journalcontainer{
    display: block;
    justify-items: center;
    width: 50%;
    height: 750px;

}

.journalentry{
    padding-left: 10px;
    padding-right: 10px;
    width: 90%;
    margin: 15px;
    
    text-align: left;
    background-color: var(--void);
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAA60lEQVR4AezWQQrDQAgF0LYH7S266QG66S1y0QQXPwRhUFEDioUhdGr+2BcXeT2KfKbR6Ac1oiMaLRCd129Gv5/3fl3RYlJeH1Eo/v7bk5b0z7N+7yOaJWTN7SNKc0kLs2qViKrvI8olSZdWlJQ2p74oJEnvurCvlYiqqyu6EsM+dKOktDl1RVdi2IesViKqrq4oBJjg+S6KfdTdda0vCikuODMKmcVVfPQQ5LKLvLRtsdG0k43B06gRTCwXRTGbmFUxMalAbDTpXHOsulHI4mo+yXmDulHnOe7bp1E3IQsYUQbi/jqibkIWcAAAAP//hyt4FwAAAAZJREFUAwBMYnhV0BTFIAAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

.journalentry h2{
    margin: 5px;
}


/* scrollbar !!*/

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border: solid 1px var(--rot-deep);
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--rot-deep); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--lilac); 
}

::-webkit-scrollbar-corner{
    background-color: var(--rot-deep);
}


/* MEDIA QUERY ZONE */

@media only screen and (max-width: 800px) {
                #header {
                    height: 100px;
                }

                #navbar {
                    height: max-content;
                }
                
                .homecontainer {
                    display: flex;
                    flex-wrap: wrap;

                }
    
                .homemain {
                    order: 1;
                    width: 90%;
                    height: max-content;
                    font-size: 0.8em;
                }
    
                .homeimg{
                    width: 250px;
                    height: 300px;
                }
    
                #homeleft {
                    display: none;
                    
                }
    
                #homeright {
                    order: 2;
                    width: 90%;
                }
    
                .aboutcontainer {
                    display: flex;
                    flex-wrap: wrap;

                }
    
                .aboutmain {
                    order: 1;
                    width: 90%;
                    height: max-content;
                    font-size: 0.8em;
                }
    
                #aboutleft{
                    order: 3;
                      width: 90%;   
                }
                  #aboutright{
                    order: 2;
                      width: 90%;
                }
                .aboutbox{
                    flex-wrap: wrap;
                }
    

    
                .sanctuary {
                    display: none;
                }
    
                .mobilemessage{
                    display: block;
                    width: 90%;
                    }
                
                .library-list {
                grid-template-columns: 1fr;
                }

                .devotioncontainer {
                display: flex;
                flex-wrap: wrap;

                }
                #devotionleft {
                    order: 1;
                    width: 90%;
                }
    
                .devotionmain {
                    order 2;
                    width: 90%;
                }
                
                .devotions{
                overflow: visible;
                    height: max-content;
                }
    
                #devotionodd, #devotioneven {
                flex-direction: column;
                text-align: left;
                }


                .creations{
                    display: flex;
                    flex-wrap: wrap;
                    }
    
                .creationsside{
                    order: 1;
                    width: 90%;
                }
                .creationsmain{
                    order: 2;
                    width: 90%;
                }
                
                #dressupdoll{
                    display: ;
                }

                .slideshow-container{
                    height: 250px;
                }
    
                .museumcontainer{
                grid-template-columns: 1fr 1fr;
                }
    
                .calendarbox{display: none;}
    
    
                .journalcontainer{
                    overflow: visible;
                    height: max-content;
                }            
    
                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */

                #navbar ul {
                    flex-wrap: wrap;
                }
            }