/* * {
  outline: 1px solid red;
} */

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

.flex-child {
  min-width: 0; /* Prevents Firefox flex sizing bugs */
}

html{

  scrollbar-color:  bisque#40372c;
  scroll-behavior: smooth;

}

body{
    background-color:  bisque;
    margin: 0px;
    padding: 0px;
}


.hidden{
    opacity: 0;
    transition: all 1s;
    transform: translateX(-100px);
}

.show{
    opacity: 1;
    transform: translateX(0%);
}

.hidden2{
     animation: none;
} 

.show2{
    animation: jitter-anim 1s ease-in-out;
}

.hidden3{
    opacity: 0;
    transition: all 1s;
    transform: translateY(100px);
} 

.show3{
    opacity: 1;
    transform: translateX(0%);
}


.card{
    background-color:  bisque;
    margin: 0px;
    padding: 80px;
}

.card_title{
    display: grid;
    white-space: nowrap;
    
}

.card_title_logo{
    /* background-color:  red; */
    /* background-color:  blue; */
    color:#40372c;
    display: inline-block;
    font-family: 'Fun';
    font-size: 100px;
}
.card_title_donate{
    /* background-color:  blue; */
    /* background-color:  green; */
    color:#40372c;
    text-align: right;
    display: inline-block;
    font-family: 'Pixel';
    width: 300vh;
    font-size: 50px;
    /* color: burlywood; */
}

.card_title_subtitle{
        /* background-color:  blue; */
    /* background-color:  green; */
    color:#40372c;
    text-align: left;
    display: inline-block;
    font-family: 'Fun';
    font-size: 50px;
    /* color: burlywood; */
}


.space{
    /* background-color:  red; */
    display: block;
    height: 30px;
}



.card_header{
    /* background-color:  red; */
    color: burlywood;
    display: block;
    font-family: 'Fun';
    font-size: 50px;
    font-weight: bold;
    white-space: nowrap;
    
}


.card_header_notes{
    /* background-color:  red; */
    /* text-align: right; */
    color: burlywood;
    display: block;
    font-family: 'Fun';
    font-size: 40px;
    white-space: nowrap;
    
}

.card_text{
    /* background-color:  blue; */
    color:#40372c;
    display: block;
    font-family: 'Business';
    font-weight: bold;
    font-size: 25px;
    

}


.card_end{
    /* background-color:  red; */
    color:#40372c;
    display: flex;
    font-family: 'Fun';
    font-size: 40px;
    justify-content: center;
    align-items: center;



}

.end_card{
    background-color:  bredisque;
    margin: 0px;
    padding-top: 30px;
    transition: all 1s;
}

.end_card_header{
    /* background-color:  red; */
    color:#40372c;
    display: flex;
    font-family: 'Fun';
    font-size: 40px;
    justify-content: center;
    align-items: center;
    transition: all 1s;



}
.end_card_text{
    background-color:  bisque;
    color:black;
    display: flex;
    font-family: 'Fun';
    font-size: 30px;
    justify-content: center;
    align-items: center;
    transition: all 1s;
}

.p1{
    /* background-color:  red; */
    background-color:#1b1e23;
    margin: 0px;
    padding: px;
    /* padding-bottom: 5000px; */
  
}

.p1_padding{
    /* background-color:  red; */
    margin: 0px;
    padding: 50px;
   
    /* padding-bottom: 5000px; */
  
}

.p1_title{
    /* background-color:  blue; */
    display: flex;

    white-space: nowrap;
    
}

.p1_title_logo{
    /* background-color: green; */
  
    color:#cec9c2;
    display: inline-block;
    font-family: 'Pixel';
    font-size: 100px;
    padding-right: 0px;
}

.p1_title_img{
    /* background-color: red; */
    width: 120px;
    padding-top: 10px;
}

.p1_title_subtitle{
    /* background-color:  red; */
    color:#cec9c2;
    display: flex;
    font-family: 'Pixel';
    font-size: 30px;
    padding-right: 20px;
}
.p1_text{
    /* background-color:  red; */
    color:#cec9c2;
    display: inline-block;
    font-family: 'Pixel';
    font-size: 50px;
    padding-right: 20px;
    padding-left: 50px;
}

.p1_text_note{
    /* background-color:  red; */
    color:#cec9c2;
    display: inline-block;
    font-family: 'Pixel';
    font-size: 20px;
    padding-right: 20px;
    padding-left: 50px;
}

.Boomby_click{
    font-family: 'fun';
    font-size: 20px;
    color:#80776b;
}


.p1_form1_answers_container{
    display: grid;
    grid-template-rows: auto auto auto;
    margin-bottom: 50px;

}

.p1_form1_answers_container_ND{
    display: none;

}

/* .checkbox_input:checked ~ .p1_form1_answers_container2{
    display: grid;
    grid-template-rows: auto auto auto;
    margin-bottom: 50px;

} */

/* Customize the label (the container) */
.p1_answers_container {
  display: grid;
  grid-template-columns: 40px auto;
  height: 40px;
  /* position: relative;
  padding-left: 40px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 40px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color:antiquewhite;
  font-family: 'Fun';*/
  /* background-color: blue; */

} 

/* Hide the browser's default checkbox */
input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkbox_label {
    margin-top: 10px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: #cec9c2;

}

.checkbox_inside{
    display: none;
    font-size: 20px;
}

/* On mouse-over, add a grey background color */
.checkbox_label:hover{
  background-color: #cec9c2;
  cursor: pointer;
}

/* When the checkbox is checked, add a background */
.checkbox_input:checked + .checkbox_label {
  background-color: #cec9c2;
  background-image: url(img/check1.png);
  background-size: cover;

}

/* Show the checkmark when checked */

.p1_form1_a{
  font-size: 30px;
  text-align: left;
  padding-left: 10px;
  /* -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; */
  color: #cec9c2;
  /* background-color: red; */
  font-family: 'Fun';*/
}

.p1_q{
    /* background-color:  red; */
    color:#cec9c2;
    display: inline-block;
    font-family: 'fun';
    font-size: 30px;
    padding-right: 20px;
}


.custom-submit-btn {
  /* Reset default browser styles */
  /* appearance: none;
  -webkit-appearance: none;
  outline: none;
  border: none; */

  /* Vibrant background and text styling */
  width: 50px;
  height: 50px;
  background-color: #2563eb;
  opacity: 1;
  /* color: #ffffff;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  

  border-radius: 8px;
  cursor: pointer;

  transition: background-color 0.3s ease, transform 0.2s ease;
  

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

.p2{
    /* background-color:  red; */
    background-color:#050505;
    margin: 0px;
    padding-left: 50px;
    padding-top: 200px;
    padding-right: 50x;
    padding-bottom: 200px;
    
    
    /* padding-bottom: 5000px; */
  
}

.p2_bg{
    /* background-color:  red; */
    background-color:#050505;
    padding-top: 200px;
    padding-bottom: 200px;
    /* padding-bottom: 5000px; */
  
}


.p2_title{
    /* background-color: red; */
  
    color:#cec9c2;
    display: flex;
    grid-template-columns: auto auto ;
    font-family: 'Pixel';
}

.p2_title2{
    /* background-color: red; */
  
    color:#cec9c2;
    display: flex;
    grid-template-columns: auto auto ;
    font-family: 'Pixel';
}
   
.p2_title_logo{
    /* background-color: green; */
    color:#cec9c2;
    font-family: 'Pixel';
    font-size: 150px;
    margin-top: 0px;
    padding-right: 50px;
}
.p2_title_text{
    /* background-color: blue; */
    padding-top:50px;
    padding-right: 20px;
    color:#cec9c2;
    font-family: 'Pixel';
    font-size: 60px;
    
}

.p2_text{
    /* background-color:  red; */
    color:#cec9c2;
    display: inline-block;
    font-family: 'Pixel';
    font-size: 40px;
    /* padding-right: 20px; */
    /* padding-left: 50px; */
}

.p2_text_note{
    /* background-color:  red; */
    color:#cec9c2;
    display: inline-block;
    font-family: 'Pixel';
    font-size: 20px;
    padding-right: 20px;
    padding-left: 50px;
}


/* .custom-submit-btn:hover {
  background-color: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}


.custom-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} */

/* Style the checkmark/indicator */
/* .container .checkmark:after {
  left: 10px;
  top: -100px;
  content: "O";
  width: 10px;
  height: 30px;
  border: solid white;
  border-width: 0 6px 6px 0;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); 
}  */

.label{
    color:antiquewhite;
}


@media (max-width: 700px) {
    .card{
        /* background-color:  red; */
        margin: 0px;
        padding: 30px;
    }
    .card_header{
    font-size: 30px;
    
    }
    .card_header_notes{
    font-size: 30px;
    
    }
    body{
    background-color:  bisque;
    margin: 0px;
    padding: 0px;
    }
    .card_text{
    /* background-color:  blue; */
    color:#40372c;
    display: block;
    font-family: 'Business';
    font-weight: bold;
    font-size: 23px;

    }
    .end_card{
    background-color:  bredisque;
    margin: 0px;
    padding-top: 30px;
    }

    .end_card_header{
        /* background-color:  red; */
        color:#40372c;
        display: flex;
        font-family: 'Fun';
        font-size: 20px;
        justify-content: center;
        align-items: center;



    }
    .end_card_text{
        background-color:  bisque;
        color:black;
        display: flex;
        font-family: 'Fun';
        font-size: 20px;
        justify-content: center;
        align-items: center;
    }
    .p1_title_logo{
    /* background-color: green; */
  
    color:#cec9c2;
    display: inline-block;
    font-family: 'Pixel';
    font-size: 50px;
    padding-top: 30px;
    padding-right: 0px;
    }
    
    .p1_text{
    /* background-color:  red; */
    color:#cec9c2;
    display: inline-block;
    font-family: 'Pixel';
    font-size: 30px;
    padding-right: 20px;
    padding-left: 50px;
    }

    .p2_title_logo{
    /* background-color: green; */
    color:#cec9c2;
    font-family: 'Pixel';
    font-size: 80px;
    margin-top: 20px;
    padding-right: 50px;
    }

    .p2_title_text{
        /* background-color: blue; */
        padding-top:50px;
        padding-right: 20px;
        color:#cec9c2;
        font-family: 'Pixel';
        font-size: 40px;
        
    }
    .p2_text{
    /* background-color:  red; */
    color:#cec9c2;
    display: inline-block;
    font-family: 'Pixel';
    font-size: 30px;
    /* padding-right: 20px; */
    /* padding-left: 50px; */
    }

    .p2_text_note{
        /* background-color:  red; */
        color:#cec9c2;
        display: inline-block;
        font-family: 'Pixel';
        font-size: 20px;
        padding-right: 20px;
        padding-left: 50px;
    }

}





@media (prefers-reduced-motion) { 
.hidden{
    transition: none;
}
}

@font-face {
    font-family: 'Pixel';
    src: /*url('fonts/my-custom-font.woff2') format('woff2'),*/
         url('fonts/Jersey10-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Fun';
    src: /*url('fonts/my-custom-font.woff2') format('woff2'),*/
         url('fonts/DarumadropOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Brushy';
    src: /*url('fonts/my-custom-font.woff2') format('woff2'),*/
         url('fonts/Knewave-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Business';
    src: /*url('fonts/my-custom-font.woff2') format('woff2'),*/
         url('fonts/StackSansHeadline-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@keyframes jitter-anim {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform:  rotate(-1deg);
  }
  40% {
    transform:  rotate(1deg);
  }
  60% {
    transform:  rotate(0deg);
  }
  80% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0deg);
  }
  
}