@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');



@font-face {
    font-family: corrupted_file;
    src: url(/static/corrupted_file.ttf);
  }

@font-face {
    font-family: pixeland;
    src: url(/static/Pixeland.ttf);
  }

:root{
    font-size: 14pt;
    
}
* {
    box-sizing: border-box;
  }

html{
    height: 100vh;
    width: 100%;
}

body {

    position: relative;
    background-color: #8e44ad;
    color: #414141;
    font-family: 'Roboto', sans-serif;
    height: 99%; 
}
body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Colors:
    1. Pink:    #ff416c
    2. Orange:  #ff4b2b
    3. Yellow:  #f39c12
    4. Cyan:    #21d4fd
    5. Purple:  #b721ff
    6. Blue:    #0b3d91
    7. Violet:  #8e44ad
*/
    /* background: linear-gradient(to bottom, #ff416c, #ff4b2b, #f39c12, #21d4fd, #b721ff, #0b3d91, #8e44ad); */

    z-index: -1;
    animation: background_gradient 60s ease-in-out infinite;
    opacity: .40;
}

@keyframes background_gradient {
    0%, 100% {background: #ff416c;}
    10% {background: #ff4b2b;}
    20% {background: #f39c12;}
    30% {background: #21d4fd;}
    40% {background: #b721ff;}
    50% {background: #0b3d91;}
    60% {background: #8e44ad;}
    70% {background: #1abc9c;}
    80% {background: #f1c40f;}
    90% {background: #e74c3c;}
}

@keyframes textcolor {
    0%, 100% {text-shadow: 0 0 10px rgba(243, 156, 18, .5);}
    10% {text-shadow: 2px 2px 10px rgba(26, 188, 156, .5);}
    20% {text-shadow: 4px 4px 10px rgba(142, 68, 173, .5);}
    30% {text-shadow: 6px 6px 10px rgba(231, 76, 60, .5);}
    40% {text-shadow: 8px 8px 10px rgba(211, 255, 14, 0.836);}
    50% {text-shadow: 6px 6px 10px rgba(26, 188, 156, .5);}
    60% {text-shadow: 4px 4px 10px rgba(52, 152, 219, .5);}
    70% {text-shadow: 2px 2px 10px rgba(11, 61, 145, .5);}
    80% {text-shadow: 0 0 10px rgba(183, 33, 255, .5);}
    90% {text-shadow: -2px -2px 10px rgba(33, 212, 253, .5);}
}


.container {
    display: flex;
    flex-direction: column;
    position: relative;
    /* z-index: 2; */
    animation: textcolor 60s ease infinite;
    padding: 1rem;

}

table {
    width: 100%;
    border-collapse: collapse;
    height: auto;
    font-size: large;
}

table td {
    padding: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.5); /* Soften the border color */
    font-size: larger;
}

table thead {
    vertical-align: bottom;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5); /* Soften the border color */
    font-size: larger;
    font-weight: bold;
}

h1 {
    text-align: center;
    padding: 0px;
    font-size:7em;
    text-shadow: 0 0 10px rgba(183, 33, 255);
      
    /* font-family: 'Libre Barcode 39 Text'; */
    font-family: corrupted_file;
    /* font-family: pixeland; */
    font-style: normal;
    /* font-weight:400; */
    font-display: block;
}

code {
    color:rgba(183, 33, 255);
}
h2 {

    font-family: 'Orbitron', sans-serif;
}
.footer {
    padding: 1em;
}



.chall {
    height: fit-content;
    display: flex;
    flex-direction: row;
    padding: 1rem 1rem 2rem;
    background: #f8f3e8;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}


.card {

    /* height: 90%; */
    background-color: rgba(255, 255, 255, 0.2);
    padding: .5rem;
    border-radius: 1rem;
    margin: 1rem;
}

.card-solved {

    /* height: 90%; */
    background-color: rgba(0, 255, 153, 0.4);
    padding: .5rem;
    border-radius: 1rem;
    margin: 1rem;
}

.card-body {
    flex: 1 1 auto;
    /* padding: 1rem; */
}


a {
    color: #21d4fd;
    text-decoration: none;
    transition: color 0.3s ease;
    /* animation: textcolor 10s ease-in-out infinite; */
}

a:hover {
    color:  #f39c12;;
    
    
}

a:visited {
    /* color: #b721ff; */
}

a:active {
    color: #e74c3c;
}


table.sortable thead {
    background-color:#84f7f1;
    color:#414141;
    font-weight: bold;
    cursor: default;
}
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort)::after { 
    content: "\25B4\25BE" 
}


.spoiler {
    color: black; 
    background-color: black; 
  }

.challenge_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 0px;
}


.header_links {
    display: flex;
    
}
.public_stuff {
    flex: 1;
    text-align: right;
}
.private_stuff {
    
}


.teams_and_players{
    display: flex;
    column-gap: 10px;
    /* height: 100%;     */
    /* height: 30vh; */
}
.top_teams{
    flex: 1;
    height: 100%;
}

.mvps{
    flex: 1;
    padding: 10px;
    height: 100%;
    
}

.video-responsive { 
    /* display: inline; */
    flex:auto;
    position: relative;  
    /* padding-bottom: 66%;  */
    height: 40vh; 
    /* overflow:hidden;  */
    /* height: 100% */
  } 

.video-responsive iframe  {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%;
    height: 100%;
    
}
  
._marquee { 
    text-align: center;
    padding: 20px;
    /* padding-bottom: -150px; */
    font-size: 100pt;
    text-shadow: 0 0 10px rgba(183, 33, 255);
      
    /* font-family: 'Libre Barcode 39 Text'; */
    font-family: pixeland;
    font-style: normal;
    font-weight:500;
    font-display: block;
}

.header {
    font-family: pixeland;
    font-style: normal;
    /* font-weight:300; */
    font-display: block;
}

.blink {
    animation: blinker 1.5s linear infinite;
    color: red;
    font-family: sans-serif;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}


.flag_submission * {
    @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

    font-size: 22pt;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    font-family: "Space Mono", monospace;
    
}


@import url("https://fonts.googleapis.com/css?family=Barlow|Tomorrow:400,700&display=swap");

:root {
  --yellow-color: #fcee09; 
  --red-color: #ff003c;
  --black-color: #050a0e;
  --blue-color: #00f0ff;
}

button {
  font-family: pixeland;
  font-size: xx-large;
}

#toast.htmx-settling {
    opacity: 100;
  }
  
  #toast {
    background: #E1F0DA;
    opacity: 0;
    transition: opacity 3s ease-out;
  }