/* styles.css */
body {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(60deg, transparent 30px, rgba(255, 0, 0, 0.2) 10px,rgba(255, 238, 0, 0.2) 90px),
  repeating-linear-gradient(120deg, transparent 30px, rgba(255, 0, 0, 0.2) 10px,rgba(255, 238, 0, 0.2)90px),
  repeating-linear-gradient(180deg, transparent 30px, rgba(255, 0, 0, 0.2) 10px, rgba(255, 238, 0, 0.2) 90px);
}

#banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  background: linear-gradient(to bottom, #ff9933 0%, #ffff00 100%);
  width: 100%; /* Make the banner span the entire width of the window */
  padding: 10px;
  border-bottom: 1px solid #dee2e6;
}

.banner-text {
  margin-left: 7px; /* Adjust the margin value as per your requirement */
text-shadow: 0px 1px 4px #EFECEC;
color: #eb4511;
}

h1 {
  margin-bottom: 0;
  margin: 0;/* Remove the bottom margin from the h1 */
}

#tagline {
  font-size: 90%; /* Make the font size smaller than the banner */
  margin-left: 7px; /* Adjust the margin value as per your requirement */
  text-align: right; /* Adjust the text alignment */
}

#buttons {
  display: flex;
  gap: 10px;
  justify-content: padding-right;
}

.button-name {
align-items: center;
appearance: none;
background-color: #FCFCFD;
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45,35,66,.2)0 .625rem .9375rem -.1875rem , rgba(45,35,66,.05)0 .25rem .375rem -.125rem , #D6D6E7 0 -3px inset ;
box-sizing: border-box;
color: #36395A;
cursor:pointer ;
display:inline-flex ;
font-family:"JetBrains Mono",monospace ;
height :48px ;
justify-content:center ;
line-height :1 ;
list-style:none ;
overflow:hidden ;
padding-left :16px ;
padding-right :16px ;
position:relative ;
text-align:left ;
text-decoration:none ;
transition :box-shadow .15s , transform .15s ;
user-select:none ;
-webkit-user-select:none ;
touch-action :manipulation ;
white-space :nowrap ;
will-change :box-shadow , transform ;
font-size :18px ;
}

.button-name:focus {
box-shadow:#D6D6E7 0 .0625rem .125rem inset , rgba(45 ,35 ,66 ,.4)0 .0625rem .125rem , rgba(45 ,35 ,66 ,.3)0 .1875rem .375rem -.0625rem , #D6D6E7 0 -3px inset ; 
}

.button-name:hover {
box-shadow:#D6D6E7 .0625rem .125rem inset , rgba(45 ,35 ,66 ,.3)0 .25rem .5rem -.0625rem , rgba(45 ,35 ,66 ,.2)0 .375rem .75rem -.125rem ; 
transform :translateY(-2px) ; 
}

.button-name:active {
box-shadow:#D6D6E7 .125rem .1875rem inset ; 
transform :translateY(-1px) ; 
}

.center {
display:flex ; 
flex-direction :column ; 
align-items:center ; 
justify-content:center ; 
height :75vh ; 
}

.form {
background-color:#fff ; 
display:block ; 
padding :2rem ; 
max-width :350px ; 
border-radius:.5em ; 
box-shadow :rgba(0 ,0 ,0 ,.1)0 .625rem .9375rem -.1875rem , rgba(0 ,0 ,0 ,.05)0 .25rem .375rem -.125rem ; 
}

.form-title {
padding-bottom: 5px;
font-size :1.25em ; 
line-height :1.75em ; 
font-weight :600 ; 
text-align:center ; 
color:#000000 ; 
}

.input-container {
position:relative ; 
padding-top: 4px;
padding-bottom: 7px;
}

.input-container input,.form button {
outline:none ; 
border :1px solid #e5e7eb ; 
}

.input-container input {
background-color:#fff ; 
padding :1em ; 
padding-right :3em ; 
font-size:.875em ; 
line-height :1.25em ;
width:300px;
border-radius:.5em;
box-shadow:rgba(0, 0, 0, 0.05) 0em .0625em .125em;
}

.button {
width:90px ;
height:40px ;
position:relative ;
font-family:"JetBrains Mono",monospace ;
color:#3b82f6 ;
font-weight:600 ;
background-color:#fff ;
border:none ;
overflow:hidden ;
border-radius:5px ;
box-shadow:rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
transition:all ease 100ms;
}

button:hover {
background-color:#cbdcf8 ;
}

button:focus {
background-color:#cbdcf8 ;
}

button::before {
content:'done';
position:absolute ;
color:#3b82f6 ;
left:0 ;
top:-14px ;
right:0 ;
transition:all ease 300ms;
opacity:0% ;
}

button:focus::before {
opacity:100% ;
transform:translatey(26px) ;
}

.submit {
transition:all ease 100ms;
opacity:100% ;
}

button:focus > .submit {
opacity:0% ;
}
/* Add more styles as needed */

.radio-input input {
display: none;
}

.radio-input {
--container_width: 300px;
position: relative;
display: flex;
align-items: center;
border-radius: 10px;
background-color: #fff;
color: #000000;
width: var(--container_width);
overflow: hidden;
border: 1px solid rgba(53,52,52,.226);
}

.radio-input label {
width: 100%;
padding: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
font-weight:600 ;
letter-spacing:-1px ;
font-size:14px ;
}

.selection {
  display:none ;
position:absolute ;
height:100% ;
width:calc(var(--container_width)/3) ;
z-index:0 ;
left:0 ;
top:0 ;
transition:.15s ease ;
}

.radio-input label:has(input:checked) {
  color:#fff ;
}

.radio-input label:has(input:checked) ~ .selection {
  background-color:#0043ed ;
display:inline-block ;
}

.radio-input label:nth-child(1):has(input:checked) ~ .selection {
  transform :translateX(calc(var(--container_width)*0/3)) ;
}

.radio-input label:nth-child(2):has(input:checked) ~ .selection {
  transform :translateX(calc(var(--container_width)*1/3)) ;
}

.radio-input label:nth-child(3):has(input:checked) ~ .selection {
  transform :translateX(calc(var(--container_width)*2/3)) ;
}

/* for the footer part */
.notifications-container {
  width: 98%;
  height: auto;
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: fixed; /* Add this line */
  bottom: 3px; /* Add this line */
}


.flex {
  display: flex;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.alert {
  background-color: rgb(254,252,232);
  border-left-width: 4px;
  border-color: rgb(250,204,21);
  border-radius: .375rem;
  padding: 1rem;
}

.alert-svg {
  height: 1.25rem;
  width: 1.25rem;
  color: rgb(250,204,21);
}

.alert-prompt-wrap {
  margin-left: .75rem;
  color: rgb(202,138,4);
}

.alert-prompt-link {
  font-weight:500;
  color: rgb(141,56,0);
  text-decoration: underline;
}

.alert-prompt-link:hover {
  color: rgb(202,138,4);
}

.pl {
  display: block;
  width: 9.375em;
  height: 9.375em;
}

.pl__arrows,
.pl__ring-rotate,
.pl__ring-stroke,
.pl__tick {
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pl__arrows {
  animation-name: arrows42;
  transform: rotate(45deg);
  transform-origin: 16px 52px;
}

.pl__ring-rotate,
.pl__ring-stroke {
  transform-origin: 80px 80px;
}

.pl__ring-rotate {
  animation-name: ringRotate42;
}

.pl__ring-stroke {
  animation-name: ringStroke42;
  transform: rotate(-45deg);
}

.pl__tick {
  animation-name: tick42;
}

.pl__tick:nth-child(2) {
  animation-delay: -1.75s;
}

.pl__tick:nth-child(3) {
  animation-delay: -1.5s;
}

.pl__tick:nth-child(4) {
  animation-delay: -1.25s;
}

.pl__tick:nth-child(5) {
  animation-delay: -1s;
}

.pl__tick:nth-child(6) {
  animation-delay: -0.75s;
}

.pl__tick:nth-child(7) {
  animation-delay: -0.5s;
}

.pl__tick:nth-child(8) {
  animation-delay: -0.25s;
}

/* Animations */
@keyframes arrows42 {
  from {
    transform: rotate(45deg);
  }

  to {
    transform: rotate(405deg);
  }
}

@keyframes ringRotate42 {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(720deg);
  }
}

@keyframes ringStroke42 {
  from,
	to {
    stroke-dashoffset: 452;
    transform: rotate(-45deg);
  }

  50% {
    stroke-dashoffset: 169.5;
    transform: rotate(-180deg);
  }
}

@keyframes tick42 {
  from,
	3%,
	47%,
	to {
    stroke-dashoffset: -12;
  }

  14%,
	36% {
    stroke-dashoffset: 0;
  }
}

.go-home-button {
  position: fixed; /* Change this from relative to fixed */
  bottom: 3px; /* Add this line */
  right: 4px; /* Add this line */
  width: 4em;
  height: 4em;
  transform: rotateX(30deg);
  border-radius: .2em;
  border: 1px solid #3f3f3f;
  box-shadow: 0 .3em 0 .1em #3f3f3f;
  transition: all 150ms;
}

.go-home-button::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .2em;
  text-align: center;
  color: #3f3f3f;
}

.go-home-button:active {
  transform: rotateX(30deg) translateY(.4em);
  box-shadow: 0 0 0 0 #3f3f3f;
}