/* LiteForum "ocean" theme by confusionunknown
Release Version 1
based on the default_light theme.
*/
@import url('https://api.fonts.coollabs.io/css2?family=Roboto&display=swap');
@import url('https://api.fonts.coollabs.io/icon?family=Material+Icons');
:root {
--background-color: #f9f9f9;
--backdrop-filter: blur(2px);
--text-color: #fff;
--button-background: #000000;
--button-text-color: #fff;
--button-hover-color: #1e1e1e;
--link-color: #05DBF2;
--link-hover-color: #05F2DB;
--navbar-background: rgba(0.2,0.2,0.2,0.5);
--navbar-text-color: #ffffff;
--dropdown-background: #f8f9fa;
--dropdown-link-color: #333;
--dropdown-link-hover-background: #e2e6ea;
--blockquote-background: rgba(40,40,40,0.8);
--blockquote-text-color: #fff;
--thread-reply-background: rgba(2,2,2,0.5);
--thread-reply-border-color: rgba(80,80,80,1);
}
.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 .flex-container img {
border-radius: 50%;
box-shadow: 0px 0px 5px 0px #333333;
}

.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;
backdrop-filter: blur(2px);
box-shadow: 0px 0px 5px 0px #333333;
padding: 3px;
margin: 10px;
border-radius: 50px;
}

@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;
margin-right: 20px
}






.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: Roboto, Arial, sans-serif;
background-size: 100% 100%;
background-attachment: fixed;
background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
background-image: radial-gradient(49% 81% at 45% 47%, #05DBF2 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #05F2DB 1%, #FF000000 99%),radial-gradient(142% 91% at 83% 7%, #05DBF2 1%, #FF000000 99%),radial-gradient(142% 91% at -6% 74%, #03588C 1%, #FF000000 99%),radial-gradient(142% 91% at 111% 84%, #025373 0%, #03588C 100%);
color: var(--text-color);
margin: 0;
padding: 0;
}


.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;
border-radius: 5px;
}

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

.thread,
.reply {
background-color: var(--thread-reply-background);
border: 1px solid var(--thread-reply-border-color);
padding: 15px;
margin-bottom: 20px;
border-radius: 10px;
backdrop-filter: blur(5px);
box-shadow: 0px 0px 5px 0px #333333;
animation-name: slidein;
animation-duration: 1s;
animation-fill-mode: forwards;
}

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;
}

blockquote {
background-color: var(--blockquote-background);
color: var(--blockquote-text-color);
padding: 10px;
margin: 0;
border-left: 5px solid #05DBF2;
font-style: italic;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: inset 35px 0px 16px -36px #05DBF2;
}

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

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

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

}

.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);
}

@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);
background-color: rgba(2,2,2,0.5);
padding: 10px;
border-radius: 50px;border: 1px solid var(--thread-reply-border-color);
box-shadow: 0px 0px 5px 0px #333333;
z-index: 2;
backdrop-filter: blur(2px);

animation-name: flyout;
animation-duration: 1s;
animation-delay: 5s;
animation-fill-mode: forwards;
}
.success::before{
font-family: 'Material Icons';
content: "\e5ca";
margin-right: 7px;
}
@keyframes flyout {
0% {
transform: translate(-50%,0px);
}
100% {
transform: translate(-50%,-200px);
}
}

@keyframes flyin {
0% {
transform: translateY(-10px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}

@keyframes slidein {
0% {
transform: translateX(-10px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}