:root{
    --topButtonColour:#aa3324;
    --topShadowColour:#321414;
}

#topOptions{
    position:absolute;
	display:flex;
    top:30px;
    gap:0px;
    --optionsWidth:min(700px,calc(100vw - var(--topBarOffset) * 2 - var(--topBarWidth) - 40px));
	width:var(--optionsWidth);
    font-family:"Georgia", serif;
    left:calc( (var(--topBarOffset) + var(--topBarWidth))/2 + (100vw - var(--topBarOffset))/2 - var(--optionsWidth)/2);
}

@media (max-width:1200px){
    #topOptions{
        top:120px;
        left:calc(220px + 50% - 110px - var(--optionsWidth) / 2);
        --optionsWidth:min(calc(100% - 220px), 700px);
    }
}

#searchButton[open] summary{
    background-image:url('/main imgs/back.svg');
    background-size:auto 50%;
}
#searchButton summary{
    list-style: none;
    height:100%;
    width:100%;
    background-image:url('/main imgs/search.svg');
    background-repeat: no-repeat;
    background-position:center;
    background-size:contain;
    cursor:pointer;
}

#searchBox{
    width:calc(400% - 10px);
    height:30px;
    transform:translate(-100%, -100%);
}

#searchButton{
    width:20%;
    height:30px;
}

#searchButton summary:hover{
    opacity:0.2;
}


.topButtons{
	background-color:var(--topButtonColour);
	--buttonHeight:20px;
	width:calc(100% - 10px);
	text-align:center;
	height:var(--buttonHeight);
	color:white;
	font-size:10px;
	--displayHeight:calc(5 /6 );
	--displayGradientThang:calc(500% /6);
	transition:color 0.2s, box-shadow 0.1s linear, transform 0.1s linear;
	user-select:none;
    cursor:pointer;
    transform:translate(3px);
    box-shadow:-10px 10px var(--topShadowColour);
    z-index:calc(5 + var(--n) * -1);
    user-select:none;
}
.topButtons > p{
	margin:0px;
    font-weight:bold;
    transform:translateY(calc(var(--buttonHeight) /2 - 50%));
}

.topButtonsWrapper:hover .topButtons{
	color:rgba(1,1,1,0);
    box-shadow:0px 0px var(--topShadowColour);
    transform:translate(-2px, 5px);
}

.topButtonsWrapper{
    width:20%;
    height:30px;
}

.topTerror {
    --readingRoom:150px;
    --scrollText:url('abt2.svg');
    --backgroundY:50px;
	width:100%;
	margin:0px;
	height:calc(var(--buttonHeight) /4);
	background-color:var(--topButtonColour);
	color:rgba(1,0,0,1);
	transition:height 0.1s, background-position 0.4s;
    background-image:var(--scrollText);
    background-repeat:repeat-x;
    background-position:var(--readingRoom) var(--backgroundY);
    background-size:calc(95px * 106 / 12) 95px;
}

@keyframes terrorSlide{
    from{background-position:var(--readingRoom) var(--backgroundY);}
    to{background-position:calc( 95px * -106 / 12 + var(--readingRoom)) var(--backgroundY);}
}

.topButtonsWrapper:hover .topTerror {
	height:150px;
	clip-path:none;
    animation: terrorSlide 2s linear infinite;
	transition:height 0.1s;
}


@media (max-device-aspect-ratio:2/3){
    #topOptions{
        display:none;
    }
}