@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Lexend:wght@100..900&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lexend:wght@100..900&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Handjet:wght@100..900&family=Iceberg&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lexend:wght@100..900&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
    padding: 0;
    margin: 0;  
    display: flex;
    background-image: url(https://obscurenetwork.hu/kozpont/assets/background.png);
    background-size: cover;
    overflow: hidden;
    background-color:#2d1831
}

html.login, html.register {
    justify-content: center;
}

body.login, body.register {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: rgb(51, 51, 51);
    background: bottom;
}

.flex {
    display: flex;
}

input {
    font-family: 'Lexend', sans-serif;
}

.form-user {
    width: 20rem;
    background-color:rgb(90, 57, 124);
    padding: 1rem;
    display: grid;
}

.form-user input {
    padding: 0.25rem;
    margin-bottom: 1rem;
    color: white;
}

.form-user input[type="submit"] {
    background-color: rgb(75, 46, 104);
    color: rgb(202, 244, 255);
    padding: 0.5rem;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 1rem;
}
.form-user input[type="submit"]:hover {
    text-shadow: 0px 0px 13px rgb(29, 182, 187);
}
.form-user input[type="checkbox"] {
    margin: 0rem 0.5rem;
    background: rgb(59, 50, 68);
}

.border {
    border-style: solid;
    border-color:rgb(60, 35, 85);
    border-width: 3px;
    border-radius: 10px;
}
.border.color1 {
    background-color: rgb(90, 57, 124);
}

.border.color2 {
    background-color: rgb(75, 46, 104);
}

.number-fancy {
    font-family: Handjet;
    font-size: 28px;
}

h1, h1 a {
    font-family: Quantico;
    color: rgb(139, 204, 247);
    
}
h2, h2 a {
    font-family: Raleway;
    color: rgb(139, 204, 247);
    margin: 0;
}
h3, h3 a {
    font-family: Raleway;
    color: rgb(139, 204, 247);
    margin: 0;
}
h4, h4 a {
    font-family: Raleway;
    color: rgb(139, 204, 247);
    margin: 0;
}
h5, h5 a {
    font-family: Raleway;
    color: rgb(139, 204, 247);
    margin: 0;
    padding: 0;
}

.neon {
    color: rgb(202, 244, 255);
    text-shadow: 0px 0px 13px rgb(29, 182, 187);
    margin: 1rem;
}

a {
    color: rgb(202, 244, 255);
    text-decoration: none;
}

.alert {
    display: flex;
    justify-content: center;
    font-family: 'Quantico';
    padding: 8px;
    border: solid;
    border-radius: 8px;
}
.alert.alert-error {
    color:rgb(155, 50, 32);
    background-color: rgb(85 33 33);
} 
.alert.alert-error h4 {
    color:rgb(155, 50, 32);
}
.alert.alert-success {
    color: rgb(122, 214, 130);
    background-color: rgb(50 121 57);
}
.alert.alert-success h4 {
    color: rgb(122, 214, 130);
}

.navbar {
    display: flex;
    background-color: rgb(90, 57, 124);
    padding: 0.5vh;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 10vw;
    height: 99vh;
    align-items: center;
    transition: width 0.2s ease 0s;
}

.navbar:hover {
    width: 15vw;
}

.navbar-element {
    padding: 0.25vh 1rem;
    margin: 0.5vh;
    border-radius: 5px;
    background-color: rgb(75, 46, 104);
    color: rgb(202, 244, 255);
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: -webkit-fill-available;
    height: 2rem;
}

.nav-line {
    height: 2px;
    background-color: #4b2e68;
    width: 100%;
    margin: 6px 0;
}

.neon-anim {
    outline: 0px solid #ffffff00;
    transition: outline 0.1s ease 0s;
}

.neon-anim:hover {
    outline: 3px solid #caf4ff;
}

img.icon {
    width: 2rem;
    height: 2rem;
}

.navbar-element img.icon {
    width: 1.5rem;
    height: 1.5rem;
    color: rgb(185, 230, 241);
}

.navbar-bottom {
    bottom: 0;
    display: flex;
    position: absolute;
    align-items: center;
    background-color: rgb(44, 44, 44);
    margin: 0 !important;
    margin-bottom: 0.2vh !important;
    border-radius: 0;
    height: 4rem;
}

.navbar-bottom h3 a {
    color: rgb(193, 156, 228);
    padding: 0.5rem;
}

.container {
    width: 88.5vw;
    padding: 0vw 1vw;
    background-color: rgb(48 53 55);
    opacity: 0.3;
    margin: 2vh 0;
    animation: background-opacity 1s ease 0s 1 normal both;
    transition: width 0.2s ease 0s;
    animation-play-state: paused;
    overflow-y: scroll;
    max-height: 98vh;
}

.container:hover {
    animation: background-opacity-reverse 0.1s ease 0s 1 reverse both;
    animation-play-state: running;
    width: 89vw;
}

.container:not(:hover) {
    animation: background-opacity 0.05s ease 0s 1 reverse both;
    animation-play-state: running;
}

.container.background {
    opacity: 0.2;
    background-blend-mode: darken;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.container.background.coin {
    background-image: url(https://obscurenetwork.hu/kozpont/icons/ocoin.png);
}

@keyframes background-opacity {
    0% {
        opacity: 0.7;
    }
    100% {
        opacity: 0.92;
    }
}

@keyframes background-opacity-reverse {
    0% {
        opacity: 0.92;
    }
    100% {
        opacity: 0.7;
    }
}

.card.large {
    min-width: 30vw; 
    justify-items: center;
    background-color: rgb(52, 48, 53);
}

.card.small {
    width: 15vw; 
    min-height: 20vw;
    justify-items: center;
}

.card.small img {
    width: 7.5vw; 
    height: 7.5vw; 
}

.card.big {
    width: 35vw; 
}

.card {
    width: 20vw;
    background-color: rgb(90, 57, 124);
    text-align: center;
    margin: 2rem;
    padding: 1rem;
    min-height: 24vw;
    display: block;
}

.card img {
    width: 15vw;
    height: 15vw;
}

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

.border2 {
    border-style: solid;
    border-radius: 10px;
    border-color: none;
    border-width: 0px;
}

.upper-part {
    display: flex;
    justify-content: space-between;
}

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

.display-aligned h2 {
    padding: 0;
    margin: 0;
}

.filter-blue {
    filter: invert(19%) sepia(22%) saturate(2602%) hue-rotate(176deg) brightness(101%) contrast(94%);
}

.filter-icon-blue {
    filter: invert(77%) sepia(21%) saturate(1041%) hue-rotate(175deg) brightness(99%) contrast(96%);
}

table, th, td {
    border: 1px solid rgb(202, 244, 255);
    border-collapse: collapse;
    color: rgb(202, 244, 255);
    font-family: 'Lexend', sans-serif;
}

table {
    margin-bottom: 2rem;
}

td {
    padding: 0.5rem;
    max-width: 55vw;
}

.def-margin {
    margin: 1rem;
}

.button {
    padding: 0.5rem;
    margin: 0.5rem;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 1rem;
    color: rgb(44, 44, 44);   
    transition: background-color 0.1s ease 0s;
    border: none;
    font-family: 'Lexend', sans-serif;
}

.button.green {
    background-color: rgb(122, 214, 130);
}

.button.blue {
    background-color: rgb(121, 148, 206);
    color: azure;
}

.button.red {
    background-color: rgb(155, 50, 32);
    color: azure;
}

.button:hover {
    background-color: rgb(203, 129, 218);
}

html.authbuy {
    justify-content: center;
    background: center;
}

body.authbuy {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-blend-mode: exclusion;
}

.card.wide {
    min-height: min-content;
    max-height: 15vh;
    padding: 1rem;
    min-width: 36vw;
    max-width: 40vw;
    margin: 0.5rem;
}

.card.wide h1 {
    margin: 0;
    font-family: Handjet;
    font-weight: 600;
}

.card.wide h2 {
    margin-bottom: 0.5rem;
    font-family: Handjet;
    font-weight: 600;
}

.ocback {
    background-position: center;
    background-size: contain;
    background-repeat: repeat-y;
    background-position: left;
    background-blend-mode: hue;
    background-repeat: no-repeat;
}

.ocback.vadoc {
    background-color: #557e97bd;
    background-image: url(https://obscurenetwork.hu/kozpont/assets/vadoc.webp);
}
.ocback.druida {
    background-color: #2a8b33c2;
    color: #53a071;
    background-image: url(https://obscurenetwork.hu/kozpont/assets/druida.webp);
}
.ocback.fomagus {
    background-color: #833385a1;
    background-image: url(https://obscurenetwork.hu/kozpont/assets/fomagus.webp);
}
.ocback.baro {
    background-color: #930b0ba6;
    background-image: url(https://obscurenetwork.hu/kozpont/assets/baro.webp);
}
.ocback.vadoc h1, .ocback.vadoc h2, .ocback.vadoc th {
    color: #80f3fc;
    border-color: #80f3fc;
}
.ocback.druida h1, .ocback.druida h2, .ocback.druida th {
    color: #2bff00;
    border-color:#2bff00;
}
.ocback.fomagus h1, .ocback.fomagus h2, .ocback.fomagus th {
    color: #ff5bff;
    border-color:#ff5bff;
}
.ocback.baro h1, .ocback.baro h2, .ocback.baro th {
    color: #ff8484;
    border-color:#ff8484;
}

body.authbuy.vadoc {
    background-color: #557e9730;
}
body.authbuy.druida {
    background-color: #2a8b3359;
}
body.authbuy.fomagus {
    background-color: #83338563;
}
body.authbuy.baro {
    background-color: #65000096;
}

.ocback table {
    width: -webkit-fill-available;
}

.ocback th {
    padding: 0.5rem;
}

body.rangok .ocback {
    background-position: right;
    padding: 1rem;
}

form.profile-settings {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: center;
    max-width: 35vw;
    padding: 1rem;
    background-color: #322449;
    margin-bottom: 2rem;
}

input[type="submit"] {
    cursor: pointer;
    color: white;
}

form.profile-settings input[type="number"],
form.profile-settings input[type="password"],
form.profile-settings input[type="email"],
form.profile-settings input[type="text"] {
    padding: 0.25rem;
    margin: 0.25rem;
    max-width: 30vw;
    color: white;
}

form.profile-settings input[type="submit"] {
    padding: 0.5rem;
    margin: 0.5rem;
    margin-left: auto;
    min-width: 10vw;
}

.news {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;   
}

.news .post {
    padding: 1rem 3rem;
    background-color: #4f9ac9;
    width: -webkit-fill-available;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0;
    transition: box-shadow 0.1s ease-in-out;
    transition: background-color 0.1s ease-in-out
}

.news .post:hover {
    box-shadow: 0px 0px 0px 3px rgb(202, 244, 255);
    background-color: rgb(90, 57, 124);   

}



.news .post h1 {
    margin: 1rem 0;
}

.news .post img {
    max-width: 15rem;
    max-height: 10rem;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #6e357e #4f2c58;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 32px;
  }

  *::-webkit-scrollbar-track {
    background: #4f2c58;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #6e357e;
    border-radius: 16px;
    border: 6px solid #4f9ac9;
  }

@media only screen and (max-width: 1440px) {
    .navbar {
        min-width: 10vw;
    }

    .navbar h2 {
        font-size: larger;
    }

    .card {
        margin: 1.5rem;
    }
}

@media only screen and (max-width: 1200px) {
    .navbar-element {
        padding: 5px;
    }

    .card {
        margin: 1rem;
    }

    h2 {
        font-size: large;
    }
}

@media only screen and (max-width: 1024px) {
    .navbar {
        min-width: 5vw;
        width: 5vw;
    } 

    .navbar-element h3,
    .navbar h2 {
        visibility: hidden;
    }
    
    .navbar:hover .navbar-element h3,
    .navbar:hover h2 {
        visibility: visible;
    }

    .navbar:hover .navbar-bottom {
        width: 14vw;
    }

    .navbar-element:hover {
        visibility: visible;
    }

    .navbar-element {
        padding: 2.5px;
    }

    .navbar-bottom {
        width: 5vw;
    }

    .container {
        width: 94vw;
    }

    .container:hover {
        width: 95vw;
    }

    h2 {
        font-size: larger;
    }

    .card.small {
        width: 23.5vw;
    }

    .card.small img {
        height: 10vw;
        width: 10vw;
    }
    
    .card.wide {
        min-width: 39vw;
    }
}

@media only screen and (max-width: 768px) {

    .navbar {
        min-width: 5vw;
    }

    .navbar-element {
        margin: 2px;
        padding: 2px;
    }

    .navbar h2 {
        font-size: medium;
    }

    .navbar h3 {
        font-size: medium;
    }

    .container {
        width: 94vw;
    }

    .card.small {
        margin: 0.5rem;
        min-height: 25vh;
    }

    .card {
        margin: 2rem;
        height: 27.5vh;
        width: 30vw;
    }

    td {
        text-align: center;
    }

    .card.big {
        width: 33vw; 
        margin: 1rem;
    }

    .card.wide {
        min-width: 85vw;
        margin: 0.5rem;
    }
}

@media only screen and (max-width: 425px) {

    .navbar {
        min-width: 7.5vw;
    }

    .navbar-element {
        padding: 1px;
        min-width: 7.25vw;
        min-height: 7.25vw;
    }

    .navbar-element img.icon {
        width: 5vw;
        height: 5vw;
        padding: 2.5px;
    }

    .navbar:hover {
        min-width: 35vw;
    }

    .card.small {
        width: 32.5vw;
        height: 40vh;
    }

    .navbar:hover .navbar-bottom {
        width: 35vw;
    }

    .card.small img {
        height: 30vw;
        width: 30vw;
    }

    .card {
        margin: 0.5rem;
    }

    .card h5 {
        font-size:x-small;
    }

    .card h3 {
        font-size: medium;
    }

    .card img {
        width: 30vw;
        height: 30vw;
    }

    table, tbody, tr, th, td {
        max-width: 25vw;
        font-size: small;
        min-width: 16.5vw;
    }

    td {
        padding: 0.25rem;
        height: 3rem;
    }

    .card.large {
        min-width: 80vw;
        min-height: 60vh;
    }

    .container {
        overflow-x: hidden;
    }

    .card.big {
        width: 70vw; 
    }

    .card.wide {
        min-width: 77vw;
        margin: 0.5rem;
        height: 10vh;
    }
}

@media only screen and (max-width: 375px) {

    .navbar {
        min-width: 8.5vw;
    }

    .card.small {
        width: 30vw;
    }

    table, tbody, tr, th, td {
        max-width: 20vw;
        font-size: small;
        min-width: 18.5vw;
    }
    .button {
        margin: 0;
    }
}

@media only screen and (max-width: 320px) {

    .navbar {
        min-width: 9vw;
    }

    .card.small {
        width: 30vw;
        padding: 0.75rem
    }

    .container {
        width: 90vw;
    }
    .container:hover {
        width: 90vw;
    }

    h1 {
        font-size: 1.5rem;
    }

    .card h5 {
        font-size: 8px;
    }

    table, tbody, tr, th, td {
        max-width: 19vw;
        font-size: smaller;
    }

    
}