:root {
    --bg-color: #212224;
    --panel-bg: #ffffff2b;
    --accent-soft: #000000ff;
    --accent-deep: #1591ec;
    --text-main: #000000ff;
    --text-dim: #535353ff;
    --border-style: 1px solid #e5e5e5;
}

.evt_frame {
    color: #ffffff00;
    display: flex;
    transition: 0.4s;
}

.div_flex {
    display: flex;
}

.div_flex_s {
    display: flex;
}

.div_hide {
    display: block;
}

.div_half {
    width: 50%;
}

.h2_margin
{
    margin-left: 15px; margin-right: 15px;
}

.evt_height {
    margin-top: 150px;
}

.evt_frame:hover {
    color: #ffffff;
}

@keyframes animate_carret_Animation {
  0%   {color: rgb(255, 255, 255);}
  25%  {color: rgb(255, 255, 255);}
  100% {color: #ffffff00;}
}

.animate_carret {
    font-family: Arial;
    font-weight: 300;
    animation-name: animate_carret_Animation;
    animation-duration: 2s;	
    animation-iteration-count: infinite;
}

.slide_arrow_l {
    transition: 0.1s linear;
    position: absolute;
    z-index: 2; 
    top: 270px;
    height: 90px; 
    width: 55px; 
    cursor: pointer; 
    background-color: #ffffff00; 
    margin-top: auto; 
    margin-bottom: auto; 
    border: none; 
    font-size: 60px;
    color: #ffffff00;
    left: 21vh;
}
.evt_frame:hover ~ .slide_arrow_l {
    color: #ffffff;
}
.slide_arrow_l:hover {
    color: #ffffff;
}


.slide_arrow_r {
    transition: 0.1s linear;
    position: absolute;
    z-index: 2; 
    top: 270px;
    height: 90px; 
    width: 55px; 
    cursor: pointer; 
    background-color: #ffffff00; 
    margin-top: auto; 
    margin-bottom: auto; 
    border: none; 
    font-size: 60px;
    color: #ffffff00;
    right: 21vh;
}
.evt_frame:hover ~ .slide_arrow_r {
    color: #ffffff;
}
.slide_arrow_r:hover {
    color: #ffffff;
}

.news_card {
    width: 100%; 
    border-radius: 15px; 
    text-decoration: none;
    height: 275px;
}

.news_card:hover {
    background-color: #2f3435;
    transition: 0.3s;
    padding: 1px;
}

@keyframes slidein {
  0%   { margin-left: 20px; color: #ffffff00; text-shadow: 4px 6px 15px #00000000;}
  100% { margin-left: 0px; }
}

@keyframes slidein_d {
  0%   {margin-left: 20px; color: #ffffff00; text-shadow: 4px 6px 15px #00000000;}
  50% {margin-left: 0px;}
  100% {margin-left: 0px;}
}

@keyframes slidein_b {
  0%   {margin-left: 20px; opacity: 0;}
  50% {margin-left: 0px;}
  100% {margin-left: 0px;}
}

.evt_title {
    color: #ffffff;
    animation-name: slidein;
    animation-duration: 2s;
    text-shadow: 4px 6px 15px #000000cc;
    font-size: 54px;
    margin-bottom: 0px;
}

.evt_txt {
    color: #fff;
    animation-name: slidein_d;
    animation-duration: 5s;
    text-shadow: 4px 6px 15px #000000cc;
}

.btn_evtpage {
    margin-top: 0px;
    font-family: arial; 
    text-decoration: none;
    display: flex;
    justify-content: center;
    color: #ffffff;
    margin-left: 50px; 
    background: linear-gradient(90deg,rgb(64, 80, 197) 0%, rgb(146, 31, 162) 100%);
    border-radius: 15px; 
    width: 240px; 
    height: 50px;
    margin-bottom: 10px;
    animation-name: slidein_b;
    animation-duration: 5s;
    transition: 0.3s;
}

.div_smargins {
    background-color: #27282d; 
    width: 100%; 
    height: 131px; 
    border-radius: 16px; 
    margin-right: 10px; 
    margin-left: 10px;
}

.btn_evtpage:hover {
    padding-top: 1px;
}

.challenge_frame {
    width: 75%;
}

.div_shadow {
    z-index: 999; 
    height: 70px; 
    width: 96%; 
    position: fixed; 
    background-color: #212224; 
    filter: drop-shadow(0px 0px 13px #00000040); 
    top: 0;
}

.evt_img { 
    width: 100%; 
    height: 100%; 
    background-attachment: fixed;
    background-size: cover;
    animation: slidein_img;
    animation-duration: 70s;
    background-position: center;
}

.div_lb {
   width: 85%; 
   height: 100%; 
   margin-left: auto; 
   margin-right: auto; 
   margin-top: 200px; 
   background-color: #27282d; 
   margin-bottom: 160px; 
   border-radius: 15px;
}

@keyframes slidein_img {
  0%   {background-position: right; opacity: 0.8;}
  1%   {background-position: center right; opacity: 1;}
  100% {background-position: center;}
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: "Arial";
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: cover;
    overflow-x: hidden;
    color: #9e9e9e;
}

.subtitle {
    font-style: italic;
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-top: 10px;
}

.container {
    width: 75%;
    margin: 40px auto;
    background-color: #ffffff38;
    padding: 15px;
    backdrop-filter: blur(12px);
    border: 1px ridge;
    border-color: #e5e5e5;
    border-radius: 15px;
}

.archive-grid {
    display: inline;
}


.card {
    background-color: #2b2f30;
    padding: 5px;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 12px;
    text-decoration: none;
    width: 249px;
    min-width: 259px;
    display: block;
    border-radius: 15px;
    height: 310px;
    margin-right: 2px;
    margin-left: 2px;
    padding: 15px;
}

.card:hover {
    background-color: #2f3435;
    transform: translateY(-5px);
}


.card h3 {
    color: var(--accent-soft);
    margin-top: 0;
    padding-bottom: 0px;
    font-weight: normal;
    border: none;
}

.card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-dim);
}

.ribbon {
    background: var(--accent-deep);
    color: var(--accent-soft);
    display: inline-block;
    padding: 5px 15px;
    font-size: 0.8rem;
    text-transform: uppercase;
    
    border-radius: 15px;
}

footer {
    margin-top: 50px;
    padding: 20px;
    color: var(--text-dim);
    font-size: 0.8rem;
    text-align: center;
    border-top: var(--border-style);
    width: 100%;
}


.div_taskbar_A {
    width: 100%;
    height: 42px;
    background-color: #ffffff00;
    top: 0px;
    padding-top: 10px;
    position: fixed;
    z-index: 1000;
    border-bottom: 1px ridge;
    border-color: #e5e5e500;
    transition: background-color 0.1s ease, padding-top 0.1s ease;
    color: #676767;
}

.div_taskbar_B {
    width: 96%;;
    height: 50px;
    background-color: #27282d;
    top: 0px;
    padding-top: 20px;
    position: fixed;
    z-index: 1000;
    transition: background-color 0.1s ease, padding-top 0.1s ease;
    color: #676767; 
    border-bottom: 2px solid;
    border-color: #212224; 
}

.btn_hotbar_A {
    margin-top: 0px;
    font-family: arial; 
    text-decoration: none;
    display: flex;
    justify-content: center;
    color: #ffffff;
    background-color: #2e3035;
    margin-bottom: 10px;
    border-radius: 15px;
    margin-left: 5px;
    margin-right: 5px;
}

.btn_hotbar_A:hover {
    background-color: #2020206e;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, color 0.1s ease
}

.btn_hotbar_btn {
    margin-top: 0px;
    font-family: arial; 
    text-decoration: none;
    display: flex;
    justify-content: center;
    color: #ffffff;
    margin-left: 5px; 
    background: linear-gradient(90deg,rgb(53, 87, 169) 0%, rgb(0, 158, 190) 100%); 
    border-radius: 15px; 
    min-width: 120px;
    width: 120px;
    margin-bottom: 10px;
}

.btn_lb_search {
    color: #ffffff;
    text-decoration: none;
    font-size: 16.5px;
    text-align: center;
    width: 120px; 
    height: 38px; 
    font-family: Arial; 
    border-radius: 32px; 
    font-weight: bold; 
    line-height: 1.0em; 
    margin-top: 0px; 
    display: flex; 
    margin-left: auto; 
    border: none; 
    background: none; 
    margin-left: 10px; 
    border: 2px ridge; 
    cursor: pointer; 
    border-color: #00abdf; 
    background-color: #006ea487;
}

.btn_lb_opt {
    color: #ffffff;
    text-decoration: none;
    font-size: 16.5px;
    text-align: center;
    width: 120px; 
    height: 38px; 
    font-family: Arial; 
    border-radius: 32px; 
    font-weight: bold; 
    line-height: 1.0em; 
    display: flex; 
    border: none; 
    background: none; 
    border: 2px ridge; 
    cursor: pointer; 
    border-color: #3d3d3d; 
    background-color: #2d2d2d6e;
    margin-top: 2px;
    margin-bottom: 2px;
    text-align: left;
    padding-left: 14px;
}


.btn_lb_search:hover {
    background-color: #006da4b5;
}

.btn_lb_opt:hover {
    background-color: #3838386e;
}

.btn_lb_filter {
    height: 40px; 
    border-radius: 32px; 
    width: 250px; 
    background-color: #2020206e; 
    margin-bottom: 5px;
    padding-left: 15px; 
    color: #fff; 
    border: 2px ridge;
    border-color: #3d3d3d; 
    font-weight: bold; 
    margin-left: auto; 
    cursor: pointer; 
    font-size: 15px; 
    display: flex; 
    line-height: 2.2em;
}

.btn_hotbar_btn:hover {
    background: linear-gradient(90deg,rgb(46, 50, 129) 0%, rgb(0, 124, 149) 100%);
}

.div_dropdown {
    width: 100%;
    height: 220px;
    background-color: #ffffffa1;
    position: fixed;
    z-index: -1000;
    top: -300px;
    border-bottom: 1px double;
    border-color: #b5b5b5;
    display: flex;
    transition: top 0.1s ease;
	backdrop-filter: blur(12px);
}

.img_arrow {
    margin-top: 13px;
    margin-right: 13px;
    transition: rotate 0.1s ease
}

.btn_download {
    color: #ffffff;
    font-family: Arial, sans-serif;
    text-decoration: none;
    font-size: 16.5px;
    background-color: #155feb;
    text-align: center;
    width: 250px;
    height: 100%;
    line-height: 2.7em;
    transition: 0.15s;
    background-image: linear-gradient(15deg, #000000, #000000);
    border-radius: 64px;
}

.btn_download:hover {
    background-image: linear-gradient(15deg, #1b1b1b, #252525);
}

.btn_evt {
    font-family: Arial, sans-serif;
    text-decoration: none;
    font-size: 21px;
    text-align: center;
    width: 250px;
    height: 100%;
    line-height: 2.4em;
    transition: 0.15s;
    border-radius: 9px;
}

.div_newsbox {
    height: 390px; 
    width: 300px; 
    min-width: 300px;
    text-decoration: none;
	margin-left: 9px;
    margin-right: 9px;
    border-radius: 15px;
    background-color: #ffffff;
    filter: drop-shadow(0px 0px 5px #cecece);
    margin-top: 10px;
}

.div_showfunc {
	width: 32%; 
	height: 150px; 
	background-color: #ffffffd9; 
	margin: 10px; 
	filter: drop-shadow(0px 0px 5px #cecece); 
	border-radius: 15px;
}

.div_newsbox_img {
    height: 250px; 
    background-image: url('../images/backdrop1.png'); 
    background-size: cover;
    margin: 10px;
    border-radius: 12px;
}

.h3_textdefault {
	font-family: Arial; 
	margin: 3px 0px 3px 0px; 
	width: 400px;
}

.div_text_a {
    font-family: Arial; 
    font-weight: 100; 
    margin: 4px; 
    color: #2a2a2a;
}

.div_evt_banner {
    width: 96%; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: black; 
    overflow-x: hidden; 
    height: 552px; 
    position: relative;
}

.div_profile_container {
    width: 75%; 
    height: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 50px;
}

.m_menu_dropdown {
    position: fixed; 
    width: 100%; 
    background-color: var(--bg-color); 
    z-index: 999; 
    transition: 0.3s; 
    opacity: 1;
}

@media screen and (min-width: 900px) {
    .m_menu_dropdown { opacity: 0; pointer-events: none }
}

@media screen and (max-width: 1200px) {
    .div_shadow { width: 100%; }
    .div_taskbar_B { width: 100%; }
    .div_evt_banner { width: 100%; }
    .div_flex { display: block; }
    .div_hide { display: none; }
    .div_lb { width: 100%; }
    .div_profile_container { width: 96%; }
}

@media screen and (max-width: 900px) {
    .challenge_frame { width: 95%; }
    .h2_margin { margin: 0px; }
    .evt_height { margin-top: 90px; }
    .slide_arrow_l { left: 10px; }
    .slide_arrow_r { right: 10px; }
    .div_flex_s { display: block; }
    .div_half { width: 100% }
    .div_smargins { margin-left: 0px;}
}