/* LiteForum "terminal-amber" theme by confusionunknown
Release Version 1
based on the default_light theme by anna.
parts of this theme use the mono-amber color pallete from https://gogh-co.github.io/Gogh/
*/

@import url('https://api.fonts.coollabs.io/css2?family=DotGothic16&display=swap');
.container[page="settings"] h1:first-child::after{
font-size:0.5em;
content: "\A terminal-amber theme release 1";
white-space: pre;
}
:root {
--background-color: repeating-linear-gradient(transparent, transparent 2px, black 3px, black 3px), radial-gradient(circle, rgba(89,52,0,1) 0%, rgba(43,25,0,1) 100%);
--text-color: #FF9400;
--button-background: #402500;
--button-text-color: #FF9400;
--button-hover-color: #402500;
--link-color: #FF9400;
--link-hover-color: #DD8000;
--navbar-background: #2B1900;
--navbar-text-color: #FF9400;
--dropdown-background: #f8f9fa;
--dropdown-link-color: #333;
--dropdown-link-hover-background: #e2e6ea;
--blockquote-background: repeating-linear-gradient(transparent, transparent 2px, black 3px, black 3px), linear-gradient(180deg, rgba(43,25,0,1) 0%, rgba(66,39,0,1) 50%, rgba(43,25,0,1) 100%);
--blockquote-text-color: #FF9400;
--thread-reply-background: rgba(43,25,0,1);
--thread-reply-border-color: #402500;
}
.reply-delete button {
background-color: #dc3545;
color: white;
border: none;
padding: 8px 15px;
font-size: 14px;
margin-bottom: 15px;
cursor: pointer;
border-radius: 3px;
}

.reply-delete button:hover {
background-color: #c82333;
}


.reply-share a {
background-color: var(--link-color);
color: white;
border: none;
padding: 10px 16px;
font-size: 14px;
cursor: pointer;
border-radius: 3px;
}

.reply-share a:hover {
background-color: var(--link-hover-color);
color: var(--text-color);
}

footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}

.navbar {
display: flex;
align-items: center;
border-width: 2px;
border-style: solid;
border-color: #402500;
}

@media only screen and (max-width: 900px) {
.search-container {
margin-left: auto;
max-width: 50%;
}
.search-container input[type="text"] {
padding: 5%;
margin: 0%;
width: auto;
}
.search-container button {
padding: 10px;
margin: 0 5px;
width: calc(35% - 20px);
min-width: 65px;
}
}




.search-container {
margin-left: auto;
max-width: 50%;
}

.search-container input[type="text"] {
padding: 10px;
margin: 0 5px;
width: 300px;
}


.search-container button {
padding: 10px;
margin: 0 5px;
width: calc(35% - 20px);
min-width: 65px;
}






.search-container form {
display: flex;
align-items: center;
}








.container {
max-width: 50vw;
margin: 1% auto;
}

@media only screen and (max-width: 768px) {
.container {
max-width: 100vw;
}
}



.userimg {
max-width: 100%;
height: auto;
}


.flex-container {
display: flex;
align-items: center;
}

.reply-info {
display: inline-block;
vertical-align: top;
margin-left: 1%;
}

.reply-info h1,
.reply-info h2,
.reply-info h3,
.reply-info h4,
.reply-info h5,
.reply-info h6 {
margin-top: 0;
margin-bottom: 0;
}

.reply-delete {
margin-left: auto;
}

.reply-link {
text-decoration: none;
color: black;
margin-left: 10px;
}

.reply-hr {
border: none;
height: 1px;
background-color: #ccc;
margin: 10px 0;
}

hr {
display: none;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}


body {
font-family: DotGothic16, Arial, sans-serif;
background: var(--background-color);
background-attachment: fixed;
color: var(--text-color);
margin: 0;
padding: 0;
text-shadow: 0px 0px 5px var(--text-color);
}


.btn,
button,
input[type="submit"],
a.btn, .button {
background-color: var(--button-background);
color: var(--button-text-color);
padding: 10px 20px;
text-decoration: none;
border: none;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
margin-right: 10px;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
a.btn:hover {
background-color: var(--button-hover-color);
}

.thread,
.reply {
background-color: var(--thread-reply-background);
border: 1px solid var(--thread-reply-border-color);
padding: 15px;
margin-bottom: 20px;
border-radius: 3px;
}

textarea,
input {
width: calc(100% - 20px);
margin-bottom: 20px;
background-color: var(--thread-reply-background);
color: var(--text-color);
border: 1px solid var(--thread-reply-border-color);
padding: 10px;
border-radius: 3px;
}

textarea[name="custom_css"] {
height:50em;
}

blockquote {
background: var(--blockquote-background);
color: var(--blockquote-text-color);
padding: 10px;
margin: 0;
border-left: 3px solid var(--thread-reply-border-color);
font-style: italic;
margin-bottom: 20px;
box-shadow: inset 35px 0px 16px -36px var(--blockquote-text-color);
}

a {
color: var(--link-color);
text-decoration: none;
}

a:hover {
color: var(--link-hover-color);
}

.navbar {
overflow: hidden;
background-color: var(--navbar-background);
}

.navbar a {
float: left;
font-size: 16px;
color: var(--navbar-text-color);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar a:hover {
background-color: var(--button-hover-color);
}

.navbar a:hover::before {
content: "> ";
}

@media (max-width: 1000px) {
.navbar {
overflow-x: auto;
white-space: nowrap;
}

.navbar a {
float: none;
display: inline-block;
}
}

.success {
position: fixed;
top: 70px;
left: 50%;
transform: translate(-50%,0);
padding: 10px;
background: var(--navbar-background);
border-width: 5px;
border-style: solid;
border-color: var(--thread-reply-border-color);
animation-name: flyout;
animation-duration: 1s;
animation-delay: 5s;
animation-fill-mode: forwards;
}
@keyframes flyout {
0% {
transform: translate(-50%,0px);
}
100% {
transform: translate(-50%,-200px);
}
}