@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');

:root {
    --color: #3880ff;
    --back: #f6f8fc;
    --gray: #d6d6d6;
    --gray2: #bababa;
    --text: #262627;
    --text2: #f6f8fc;
    --switch: #fff;
    --glow-rgb: 245 245 245;

    --light-gold-rgb: 249 181 51;
    --dark-gold-rgb: 215 147 23;

    --blue-rgb: 32 74 147;
    --dark-blue-rgb: 24 54 108;

    --primary-stripe-rgb: 238 238 238;
    --secondary-stripe-rgb: 240 240 240;
}

body {
    background-color: black;
    overflow: hidden;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@keyframes pan {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}

#app {
    height: 100vh;
    overflow: hidden;
    position: relative;
}

#star-container {
    background: radial-gradient(rgb(var(--blue-rgb)), rgb(var(--dark-blue-rgb)));
    height: 100%;
    overflow: auto;
    position: relative;
}

#star-pattern {
    background-image: url("https://assets.codepen.io/1468070/Star+Pattern+3.svg");
    background-size: 10%;
    position: fixed;
    left: 50%;
    top: 0px;
    translate: -50% 0%;
    z-index: 1;
    height: 100%;
    width: 100%;
    min-width: 1200px;
    opacity: 0.02;
    animation: pan 500s linear infinite;
    will-change: background-position;
    overflow-y: auto;
}

#star-gradient-overlay {
    background: radial-gradient(circle, transparent 75%, rgb(var(--dark-blue-rgb)));
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    z-index: 2;
}

#stripe-container {
    position: fixed;
    z-index: 3;
    left: 50%;
    bottom: 0px;
    translate: -50% 0%;
    height: 50px;
    min-height: 20px;
    width: 100%;
    min-width: 2000px;
    background-color: rgb(var(--stripe-primary-rgb));

    clip-path: polygon(
        0% 5%, 1.25% 0%, 2.5% 5%,
        3.75% 0%, 5% 5%, 6.25% 0%,
        7.5% 5%, 8.75% 0%, 10% 5%,
        11.25% 0%, 12.5% 5%, 13.75% 0%,
        15% 5%, 16.25% 0%, 17.5% 5%,
        18.75% 0%, 20% 5%, 21.25% 0%,
        22.5% 5%, 23.75% 0%, 25% 5%,
        26.25% 0%, 27.5% 5%, 28.75% 0%,
        30% 5%, 31.25% 0%, 32.5% 5%,
        33.75% 0%, 35% 5%, 36.25% 0%,
        37.5% 5%, 38.75% 0%, 40% 5%,
        41.25% 0%, 42.5% 5%, 43.75% 0%,
        45% 5%, 46.25% 0%, 47.5% 5%,
        48.75% 0%, 50% 5%, 51.25% 0%,
        52.5% 5%, 53.75% 0%, 55% 5%,
        56.25% 0%, 57.5% 5%, 58.75% 0%,
        60% 5%, 61.25% 0%, 62.5% 5%,
        63.75% 0%, 65% 5%, 66.25% 0%,
        67.5% 5%, 68.75% 0%, 70% 5%,
        71.25% 0%, 72.5% 5%, 73.75% 0%,
        75% 5%, 76.25% 0%, 77.5% 5%,
        78.75% 0%, 80% 5%, 81.25% 0%,
        82.5% 5%, 83.75% 0%, 85% 5%,
        86.25% 0%, 87.5% 5%, 88.75% 0%,
        90% 5%, 91.25% 0%, 92.5% 5%,
        93.75% 0%, 95% 5%, 96.25% 0%,
        97.5% 5%, 98.75% 0%, 100% 5%,
        100% 100%, 0% 100%
    );
}

#stripe-pattern {
    height: 100%;
    width: 100%;
    background-size: 18px 18px;
    background-image: linear-gradient(
        -45deg,
        rgb(var(--primary-stripe-rgb)) 25%,
        rgb(var(--secondary-stripe-rgb)) 25%,
        rgb(var(--secondary-stripe-rgb)) 50%,
        rgb(var(--primary-stripe-rgb)) 50%,
        rgb(var(--primary-stripe-rgb)) 75%,
        rgb(var(--secondary-stripe-rgb)) 75%,
        rgb(var(--secondary-stripe-rgb)) 100%
    );
    box-shadow: inset 0rem 0.5rem 2rem 0.25rem rgb(0 0 0 / 40%);
    animation: pan 360s linear infinite;
}



}

 .red {
     --color: #e01e37;
 }

 .purple {
     --color: #822faf;
 }

 .green {
     --color: #38b000;
 }

 .yellow {
     --color: #ffc300;
 }

 .pink {
     --color: #ffafcc;
 }

 .orange {
     --color: #f77f00;
 }

 ::-webkit-scrollbar {
     width: 8px;
 }

 ::-webkit-scrollbar-track {
     background: transparent;
     display: none;
 }

 ::-webkit-scrollbar-thumb {
     background: var(--gray);
     transition: 0.2s;
     border-radius: 10px;
     z-index: 5;
     opacity: 0.6;
 }

 header {
     background-color: var(--back);
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 105px;
     border: 2px solid black;
     border-radius: 3px;
     display: flex;
     align-items: left;
 }

 body {
     background-color: black;
     /* padding: 20px; */
     /* height: 100%; */
     /* width: 100%; */
     /* box-sizing: border-box; */
     /* overflow: overlay; */
     /* color: var(--text); */
 }

 .title,
 .subtitle,
 .questions,
 .card {
     font-family: 'Open Sans', sans-serif;
     transition: 0.3s filter, 0.3s scale, 0.3s border-color, 0.3s background-color, 0.3s background-image, transform 0.3s, box-shadow 0.3s;
 }

 .questions {
     width: 50%;
     margin: 20px auto 30px;
 }

 code {
     font-family: 'Ubuntu Mono', monospace;
     background: var(--gray);
     border-radius: 4px;
     padding: 3px;
     color: #ab5457;
 }

 :disabled{
     cursor:not-allowed !important;
     filter:saturate(0) brightness(90%) !important;
     border-color:var(--gray2) !important;
     box-shadow: none !important;
 }

 button, input[type="button"], input[type="submit"],input[type="reset"]{
     padding:12px;
     background: var(--color);
     border:2px solid black;
     color:var(--text2);
     margin:4px;
     border-radius:4px;
     box-shadow:2px 2px 0px black;
     cursor:pointer;
     font-weight:800;
 }

 button:hover:not(:disabled), input[type="button"]:hover:not(:disabled), input[type="submit"]:hover:not(:disabled),input[type="reset"]:hover:not(:disabled){
     filter: brightness(90%);
     box-shadow:none;
     transform:translate(2px,2px);
 }

 button:active, input[type="button"]:active, input[type="submit"]:active,input[type="reset"]:active{
     scale:0.98;
     filter: brightness(80%);
 }

 input[type="radio"]{
     appearance: none;
     width:30px;
     height:30px;
     border:2px solid black;
     border-radius:50%;
     cursor: pointer;
     background-color: var(--back);
     box-shadow:2px 2px 0px black;
 }

 input[type="radio"]:hover:not(:disabled){
     filter: brightness(90%);
 }

 input[type="radio"]:checked{
     transform:translate(2px,2px);
     background-color: var(--color);
     box-shadow:none;
     background-image: url("https://moderncss.goodvessel92551.repl.co/tick.svg");
 }

 blockquote,
 textarea{
     border:2px solid black;
     border-radius:3px;
     margin:4px;
     background-color: var(--back);
     padding:5px;
     box-sizing:border-box;
     resize:none;
     color:var(--text);
     box-shadow:2px 2px 0px black;
     width: 600px;
     min-height: 400px;
 }


 input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"],input[type="url"]{
     border:2px solid black;
     color:var(--text);
     height:25px;
     border-radius:4px;
     background: none;
     margin: 4px;
     box-shadow:2px 2px 0px black;
     padding:5px;
 }
 input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="tel"]:active,input[type="url"]:focus,textarea:focus{
     box-shadow:none;
     transform:translate(2px, 2px);
 }

 input[type="text"]:hover:not(:disabled), input[type="search"]:hover:not(:disabled), input[type="email"]:hover:not(:disabled), input[type="number"]:hover:not(:disabled),input[type="url"]:hover:not(:disabled), input[type="password"]:hover:not(:disabled), input[type="tel"]:hover:not(:disabled),textarea:hover:not(:disabled){
     filter: brightness(90%);
 }

 input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus,input[type="url"]:focus, input[type="tel"]:focus,textarea:focus{
     filter: brightness(80%);
     outline: none;
 }

 ::placeholder{
     color:var(--gray);
 }

 input[type="hidden"]{
     display: none;
 }

 input[type="checkbox"]:not(.switch){
     appearance: none;
     width:30px;
     height:30px;
     border-radius:4px;
     border:2px solid black;
     background:var(--back);
     cursor: pointer;
     box-shadow:2px 2px 0px black;
 }

 input[type="checkbox"]:not(.switch):checked{
     background-color: var(--color);
     box-shadow:none;
     transform: translate(2px,2px);
     background-image: url("https://moderncss.goodvessel92551.repl.co/tick.svg");
 }


 .switch{
     appearance: none;
     width:50px;
     background-color: var(--gray);
     border: 2px solid black;
     box-shadow:2px 2px 0px black;
     height: 30px;
     border-radius: 15px;
     cursor: pointer;
 }

 .switch::after{
     content: "";
     width: 22px;
     height:22px;
     background: var(--switch);
     display: block;
     border-radius: 50%;
     transform: translate(3px,2px);
     transition: .3s transform,.3s box-shadow;
     border: 2px solid black;
     box-sizing: border-box;
     box-shadow:1px 1px 0px black;
 }

 .switch:checked::after{
     transform: translate(21px,2px);
     box-shadow: none;
 }

 .switch:checked{
     background-color: var(--color);
     transform: translate(2px,2px);
     box-shadow: none;
 }

 input[type="range"]{
     appearance: none;
     background: var(--gray);
     height:2px;
     border-radius:2px;
     width:200px;
 }

 input[type="range"]::-webkit-slider-thumb{
     appearance: none;
     height:25px;
     width: 25px;
     background-color: var(--color);
     border: 2px solid black;
     box-shadow:2px 2px 0px black;
     border-radius: 50%;
     transition: .3s box-shadow,.3s transform;
 }

 input[type="range"]::-webkit-slider-thumb:active{
     box-shadow: none;
     transform: translate(2px,2px);
 }

 input[type="range"]::-moz-range-thumb{
     appearance: none;
     height:25px;
     width: 25px;
     background-color: var(--color);
     border: 2px solid black;
     box-shadow:2px 2px 0px black;
     border-radius: 50%;
     transition: .3s box-shadow,.3s transform;
 }

 input[type="range"]::-moz-range-thumb:active{
     box-shadow: none;
     transform: translate(2px,2px);
 }

 :link{
     color:var(--text);
     text-decoration: none;
     border-bottom:2px solid black;
 }

 :link:hover:not(:disabled){
     filter: brightness(90%);
     border-color:var(--color);
 }



 :visited{
     color:var(--text);
     text-decoration: none;
     border-bottom:1px solid var(--gray);
 }

 :visited:hover:not(:disabled){
     filter: brightness(90%);
     border-color:#a64dff;
 }

 select{
     appearance: none;
     padding:8px 32px 8px 8px;
     background: #fff;
     box-shadow:1px 1px 0px black;
     border:2px solid black;
     border-radius: 4px;
     color:var(--text);
     background-image: url("https://Moderncss.goodvessel92551.repl.co/down.svg");
     background-repeat: no-repeat;
     background-position: right;
     background-size: 20px 20px;
     cursor: pointer;
 }

 select:hover:not(:disabled){
     filter:brightness(90%);
 }

 select:focus{
     border-radius:4px 4px 0px 0px;
     box-shadow:none;
     transform: translate(2px,2px);
     outline:none;
     filter: brightness(80%);
 }

 .title {
     background: url("/static/rainbow.svg") #0090ff repeat center bottom;
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
     -webkit-text-stroke: 0.1rem rgba(0, 0, 0, 0.1);
     text-shadow: 0.2rem 0.2rem rgba(255, 255, 255, 0.2);
 }

 .subtitle {
     margin-top: 50px;
     margin-left: 10px;
     color: gray;
 }


 h1{
     font-size:50px;
     color:var(--text);
     font-weight:bolder;
     margin-left: 33.5px;
     margin-right: 3px;
 }

 h2{
     font-size:40px;
     color:var(--text);
     font-weight:bold;
     filter: saturate(0.9);
 }

 h3{
     font-size:30px;
     color:var(--text);
     font-weight:bold;
     filter: saturate(0.8);
 }

 h4{
     font-size:20px;
     color:var(--text);
     font-weight:bold;
     filter: saturate(0.7);
 }

 h5{
     font-size:15px;
     color:var(--text);
     font-weight:bold;
     filter: saturate(0.6);
 }

 h6{
     font-size:10px;
     color:var(--text);
     font-weight:bold;
     filter: saturate(0.5);
 }

 input[type="date"],input[type="time"],input[type="week"],input[type="datetime"],input[type="datetime-local"]{
     border:2px solid black;
     color:var(--text);
     height:25px;
     border-radius:4px;
     background: none;
     margin: 4px;
     box-shadow:2px 2px 0px black;
     padding:5px;
 }

 input[type="date"]:hover:not(:disabled),input[type="time"]:hover:not(:disabled),input[type="week"]:hover:not(:disabled),input[type="datetime"]:hover:not(:disabled),input[type="datetime-local"]:hover:not(:disabled){
     filter: brightness(90%);
 }

 input[type="date"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus{
     box-shadow:none;
     transform:translate(2px, 2px);
 }

 input[type="file"]{
     padding:3px;
     border:2px solid black;
     border-radius: 4px;
     margin: 4px;
     box-shadow:1px 1px 0px black;
 }

 input[type="file"]::file-selector-button{
     transition: .4s;
     padding:8px;
     background: var(--color);
     border:2px solid black;
     color:var(--text2);
     font-weight:bold;
     border-radius: 4px;
     cursor: pointer;
     margin:4px;
     margin-right: 10px;
     box-shadow:2px 2px 0px black;
 }

 input[type="file"]::file-selector-button:hover:not(:disabled){
     filter: brightness(90%);
     box-shadow: none;
     transform: translate(2px,2px);
 }

 input[type="file"]::file-selector-button:active{
     filter: brightness(80%);
     scale: 0.99;
 }

 input[type="color"]{
     appearance: none;
     border:none;
     padding:0px;
     cursor:pointer;
     background-color:transparent;
     width:30px;
     height:34px;
     margin:4px;
 }

 input[type="color"]::-moz-color-swatch{
     border-radius: 4px;
     border:2px solid black;
     padding:0px;
     box-shadow:2px 2px 0px black;
 }

 input[type="color"]::-webkit-color-swatch{
     border-radius: 4px;
     border:2px solid black;
     padding:0px;
     box-shadow:2px 2px 0px black;
 }

 .made_with{
     position: fixed;
     right:8px;
     bottom: 8px;
     opacity: 0.8;
     z-index: 99999;
 }

 .made_with:hover:not(:disabled){
     opacity: 1;
 }

 .card img,input[type="input"]{
     width:300px;
     height:300px;
     object-fit:cover;
     border-radius:4px;
     border:2px solid black;
     margin:4px;
     box-shadow: 2px 2px black;
     cursor: pointer;
 }

 .card img:hover:not(:disabled),input[type="input"]:hover:not(:disabled){
     filter:brightness(95%);
     box-shadow: none;
     transform: translate(2px,2px);
 }

 .card{
     width: auto;
     height:auto;
     background-color: var(--back);
     border:2px solid black;
     margin: 4px;
     border-radius:4px;
     box-shadow: 2px 2px black;
 }



 b,strong{
     color:var(--color)
 }

 u{
     text-decoration:none;
     border-bottom:1px solid var(--color);
 }

 s{
     text-decoration: var(--color) line-through;
 }

 nav{
     position: fixed;
     height:40px;
     background-color: var(--back);
     border-bottom:2px solid black;
     padding:0px 8px 0px 8px;
     left:0;
     top:0;
     width:100%;
     z-index:10;
     box-sizing:border-box;
 }

 nav a{
     float: left;
     display: flex;
     align-items: center;
     margin:0px 8px 0px 8px;
     cursor:pointer;
     color:var(--text);
     top: 50%;
     position: relative;
     transform: translate(0, -50%);
     border-bottom:none !important;
 }

 nav a:hover:not(:disabled){
     filter:brightness(120%);
 }

 .nav_right{
     float: right !important;
 }

 footer{
     position: relative;
     height:40px;
     background-color: var(--back);
     border-top:2px solid black;
     bottom:-20px;
     left:-20px;
     width:calc(100% + 40px);
     z-index:10;
     text-align:center;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 #overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: rgba(0, 0, 0, 0.8);
     z-index: 9999;
 }

 #overlay img {
     display: block;
     max-width: calc(100% - 40px);
     max-height: calc(100% - 40px);
     margin: auto;
     padding: 0;
     border: none;
 }

 .highlight pre {
     text-wrap: wrap;
 }

 .card {
     display: flex;
     flex-direction: column;
     align-items: flex-start; /* Adjusted alignment to the left */
     background-color: #f6f8fc;
     padding: 20px;
     border: 2px solid black;
     border-radius: 8px;
     width: 100%; /* Adjust the width as needed */
 }

 .question-no {
     color: lightgray;
     font-size: small;
 }

 .question {
     margin-top: 10px;
     text-align: left;
 }

 .answer {
     margin-top: 20px;
     margin-bottom:20px;
     text-align: left;
 }

 .options {
     margin-top: 10px;
 }

 .answer-option {
     display: flex;
     align-items: center;
     margin-bottom: 5px;
     font-size: 14px;
 }

 .answer-option input {
     transform: scale(0.5);
     margin-right: 5px;
 }

 .submit-btn {
     margin-top: 10px;
     padding: 8px 16px;
     width: 100px;
     border: none;
     box-shadow: none;
 }

 .answer-option input:checked {
     background-color: rgb(28, 27, 27);
     transform: scale(0.5);
 }