@font-face {
     font-family: 'Montserrat';
     src: url('fonts//Montserrat-Regular.ttf');
     src: url('fonts//Montserrat-Bold.ttf');
     src: url('fonts/Montserrat-ExtraBold.ttf');
      src: url('fonts/Montserrat-Italic.ttf');

}     
 @font-face {
     font-family: 'minomu-font';
     src: url('fonts/static/MinomuThin.otf');
     src: url('fonts/static/MinomuMedium.otf');
}


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



/* Hide menu on small screens */
@media (max-width: 768px) {
    .menu-list {
        display: none;
    }
}



.feedback{

background-color:pink;

border-radius:20px;
margin-top:50px;
padding-right:20px;
padding-left:20px;
display: inline-block;
  text-align: center;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}




.home_image img{
max-width:800px;
height:auto;
width:90%;
display:inline-block;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


.intro p{
font-family:Montserrat-Regular;
max-width:800px;
height:auto;
width:100%;

}


/* Optional: Ensure visibility on larger screens */
/* This might be redundant depending on your other CSS */
.menu-list {
    display: block;
}



/* Menu Styles */
.responsive-menu {
     background: rgb(10,0,36);
background: linear-gradient(0deg, rgba(10,0,36,0.8617646887856705) 0%, 
rgba(0,45,119,1) 30%, rgba(0,67,255,0.4976190305223652) 100%); 
    padding: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}










.responsive-menu .menu-icon {
    display: none;
    cursor: pointer;
     padding:10px;
     color:white;
}

.responsive-menu .menu-icon span {
    display: block;
    height: 3px;
    background: white;
    margin: 5px 0;
}

.responsive-menu .menu-list {
    list-style: none;
}

.responsive-menu .menu-list li {
    display: inline-block;
}

.responsive-menu .menu-list li a {
    color: white;
    text-decoration: none;
    padding: 10px;
 line-height: 25px;
}


/* Responsive */
@media (max-width: 768px) {
    .responsive-menu .menu-list {
        display: none;
        flex-direction: column;
      
    }



    
    .responsive-menu .menu-icon {
        display: block;
    }

    .responsive-menu .menu-list li {
        display: block;
    }
}




@media (min-width: 768px) {
    .responsive-menu .menu-list {
       text-align:center;
    }
}







/* Responsive */
@media (max-width: 768px) {
    .responsive-menu .menu-list {
        display: none;
        flex-direction: column;
        text-align:left;
    }


    .responsive-menu .menu-icon {
        display: block;
    }

    .responsive-menu .menu-list li {
        display: block;
    }
}









 .fade-in-image {
     animation: fadeIn 3s;
}
 @keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @-moz-keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @-webkit-keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @-o-keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}

 .fade-in-text {
     animation: fadeIn 3s;
}
 @keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @-moz-keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @-webkit-keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @-o-keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}

 .container{
   align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: inline;
  text-align: left;
}




#full_list .container {
    text-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    display: block;


}







#home .container{

    text-align: center;

    top: 10px;
    position: relative;
}



.footer{
    margin-top:20px;
    text-align: center;

}



 .bottom_container{
     text-align:center;
     line-height: normal;
     display:block;
    
     padding-left:30px;
     padding-right:30px;
}



#head_color .bottom_continer,
#cat .bottom_container {
  text-align: center;
  line-height: normal;
  font-size: 20px;

display:block;
}




.short_description
{

text-align:left;

}


#cat .short_description {
    padding-left: 100px;
    display: inline-block;
    padding-right: 100px;
  }




 .spacer3{
     padding-top:20px;
}
 .spacer1{
     padding-top:20px;
}
 .spacer5{
     padding-top:50px;
}
 .spacer7 {
     width:800px;
     display: inline-block;
     margin-top:100px;
     border-top:3px black dotted;
     margin-bottom:100px;
}
 .header_img{
     width:100%;
     position:absolute;
     left:0px;
     top:0px;
     z-index:-1;
}
 .title {
     font-family: "Montserrat-ExtraBold";
     color:#000;
     text-align:center;
     font-weight:bold;
     text-transform: uppercase;
     position:relative;
     margin-top:40px;
     margin-bottom: 40px;

}
 .full_list .title{
     font-family: "Montserrat-Bold";
     color:#000;
     text-align:center;
     font-weight:bold;
     font-size: 30px;
     text-transform: uppercase;
}
 .title2 {
     font-family: "Montserrat-ExtraBold";
     text-align:center;
     font-weight:bold;
     font-size:15px;
 
}
 .title3{
     font-family: "Montserrat-ExtraBold";
     text-align:center;
     font-weight:bold;
     font-size:15px;
   
}
 .fas {
     padding-right:10px;
}
 .fa {
     padding-right:10px;
}
 .first-color {
     background: #fafafa;
}
 .second-color {
     background: #c7eeff;
}
 .third-color {
     background: #0077c0;
}
 .fourth-color {
     background: #1d242b;
}
 .submit{
     padding-bottom:30px;
}
/* unvisited link */
 a:link {
     text-decoration:none;
     color:#0077c0;
}
 a:visited {
     text-decoration:none;
     color:#0077c0;
}
/* mouse over link */
 a:hover {
     color:#1d242b ;
}
/* selected link */
 a:active {
     color:#c7eeff;
}
 h1,h3,h2 {
     color: #1d242b;
     font-weight:bold;
     text-transform: uppercase;
}
 h4{
     text-decoration:none;
     text-align:center;
     font-family: "Montserrat-ExtraBold";
     font-size: min(max(13px, 3vw), 20px);
     padding:20px;
     border-radius:20px;
     word-spacing: 5px;
     background-color:white;
     border:1px solid #1d242b;
     margin-left:20px;
}
 .male_image{
     padding-top:50px;
}
 #cat .shortdescription , .head_color .shortdescription , .body_color .shortdescription, .full_list .shortdescription {
     text-align:left;
     display:inline-table;
     text-align:center;
     padding-bottom:40px;
}
 .long_description, .description {
     display:inline-table;
     text-align: center;
     padding-bottom:40px;
}
 .description2 {
     color: #1d242b;
     margin-left:20px;
     text-align:center;
     text-indent: 50px;
}
 .spacer{
     height:80px;
     margin-top:50px;
}
 img{

     -webkit-user-drag: none;
 
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;

 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}



#cat .image{

max-width:800px;
height:auto;
border-radius:20px;
margin-top:20px;
display:inline;
}


#full_list img{

    max-width:800px;
    height:auto;
    border-radius:20px;
    margin-top:20px;

}


#full_list
.short_description {
  text-align: left;

  min-width: 500px;

  max-width: 80%;
  display: inline-block;
  padding-top: 20px;
}


#full_list .name {

font-size:30px;
font-family: "Montserrat-ExtraBold";

}






 .input{
     margin: auto;
     padding:20px;
     position:relative;
}
 .input_form{
     background-color:#E8E8E8;
     min-width:400px;
     padding:30px;
     border-radius:10px;
}
 .input2{
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     align-content: center;
     align-items: center;
     margin: auto;
     width: 50%;
 
     position:relative;
     left:10%;
     background: #c7eeff;
}
 .image_container{
     margin-left: auto;
     margin-right: auto;
     display:block;
     text-align:center;
     width:100%;
}
 .form2{
     display:block;
     justify-content: center;
     align-content: center;
     align-items: center;
     width: 80%;
     min-width: 300px;
    
     position: relative;
     background: #c7eeff;
     margin-left: auto;
     margin-right: auto;
}

 .bottom_content {


     display: inline-block;
     align-content: center;
     align-items: center;
     margin-left: 200px;
     margin-right: 200px;
     text-align: center;
     min-width: 400px;
     font-size: 17px;

}

 .form1{
     display:block;
     justify-content: center;
     align-content: center;
     align-items: center;
     background: #c7eeff;
     border-radius:10px;
     border:solid 2px #1d242b;
     padding-bottom:100px;
     justify-content: center;
     align-self: center;
     margin-bottom:50px;
     margin-left: auto;
     margin-right: auto;
}
 .outer , .upper {
     margin-bottom:10px;
     padding-bottom:80px;
     display: block;
     text-align:center;
     flex-flow: row wrap;
     justify-content: center;
     align-content: center;
     align-items: center;
}
 .intro{
  
     font-family: "Montserrat-Regular";
     margin-left: auto;
     margin-right: auto;
     width: 66%;
     position:relative;
     text-align: left;
     top:20px;
   
}
 .try_again{
     padding-top:40px;
     position:relative;
     text-align:center;
     margin-top:50px;
    
}
 input[type="radio"] {
     margin: 20px;
     padding:30px;
     border:solid 1px black;
}



.reset_form{

text-align:left;

}




.score{

    background: linear-gradient(0deg, rgba(10,0,36,0.8617646887856705) 0%, rgba(0,45,119,1) 30%, rgba(0,67,255,0.4976190305223652) 100%);
    border-radius: 20px;
    margin-top: 50px;
    padding-right: 20px;
    padding-left: 20px;
    display: block;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    text-align: center;
    padding: 15px;
    color: white;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    min-width: 400px;
}


#qsubmit {
  height: 30px;
  width: 100px;
  font-size: 10px;
  position: relative;
top:50px;
  background: linear-gradient(0deg, rgba(10,0,36,0.8617646887856705) 0%, rgba(0,45,119,1) 30%, rgba(0,67,255,0.4976190305223652) 100%);
  color: white;
border-radius:10px;
right:20%;

}

#qsubmit:hover{
background: linear-gradient(0deg, rgba(10,0,36,0.8617646887856705) 50%, rgba(0,45,119,1) 100%, rgba(0,67,255,0.4976190305223652) 100%);

}




#qsubmit2 {
  height: 60px;
  width: 200px;
  font-size: 20px;
  position: relative;
  top: 30px;
background: linear-gradient(0deg, rgba(10,0,36,0.8617646887856705) 0%, rgba(0,45,119,1) 30%, rgba(0,67,255,0.4976190305223652) 100%);
  color: white;
border-radius:10px;


} 


 #qsubmit2:hover {
background: linear-gradient(0deg, rgba(10,0,36,0.8617646887856705) 50%, rgba(0,45,119,1) 100%, rgba(0,67,255,0.4976190305223652) 100%);
  color: white;}


.inner_quiz_container {
    position: relative;
    top: 20px;
  display: inline-block;
  text-align: left;
background: linear-gradient(0deg, rgba(10,0,36,0.8617646887856705) 50%, rgba(0,45,119,1) 100%, rgba(0,67,255,0.4976190305223652) 100%);
color:white;
border:solid 1px black;
border-radius:20px;
padding:40px;
font-size:20px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}





/* Add responsiveness - on screens less than 500px, make the navigation links appear on top of each other, instead of next to each other */
 @media screen and (max-width: 500px) {
     .navbar a {
         float: none;
         display: flex;
         width: 100%;
         text-align: left;
        /* If you want the text to be left-aligned on small screens */
    }
}




 .custom-select {
     min-width: 350px;
     background-color: #fafafa;
     text-decoration: none;
     text-align: center;
     font-family: "Montserrat";
    
     padding: 20px;
     border-radius: 20px;
     word-spacing: 5px;

     border: 1px solid #1d242b;
     margin-left: 20px;
}
 select {
    appearance: none;
  width: 200px;
  font-size: 1.15rem;
  border-radius: 0.25rem;
  color: #fff;
  background-color: white;
  font-family: "Montserrat-Regular";
  height: 40px;
  text-align: center;
  background: linear-gradient(0deg, rgba(10,0,36,0.8617646887856705) 0%, rgba(0,45,119,1) 30%, rgba(0,67,255,0.4976190305223652) 100%);
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


 [type="checkbox"], [type="radio"] {
     height:20px;
     width:20px;
}




 .iframe_container {
     text-align:center;
     position:relative;
}
 .iframe {
     position:relative;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     width:900px;
     height:600px;
}
 .drop1 {
     padding-bottom:20px;
     font-weight:bold;
     margin-top:20px;
     display:block;
     width:100%;
     text-align:center;
}
 .select1 {
     margin-top:20px;
     text-align:center;
     display: block;
     margin: 0 auto;
}
 .outer2 {
     display: block;
     margin: 0 auto;
}
 .submit1 {
 
     font-weight: bold;
     margin-top: 60px;
     display: block;
     min-width: 200px;
     margin-left: auto;
     margin-right: auto;
     appearance: none;
     width: 200px;
     font-size: 1.15rem;
     border-radius: 0.25rem;
     color: #fff;
     background-color: white;
     font-family: "Montserrat-Regular";
     height: 40px;
     text-align: center;
     background: linear-gradient(0deg, rgba(10,0,36,0.8617646887856705) 0%, rgba(0,45,119,1) 30%, rgba(0,67,255,0.4976190305223652) 100%);
     border-radius: 10px;
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}
/* Add a black background color to the top navigation */
/* Style the links inside the navigation bar */

 
/* Larger Screen Styling */
@media (min-width: 768px) {
    .hamburger {
        display: none;
    }

    .navigation {
        display: block;
    }

    .navigation ul li {
        display: inline;
    }
}                     

                                                     


  

.image_container {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
    vertical-align: middle;
}


.quiz_container {
    line-height: normal;
    text-align: center;
    font-size: 25px;
    padding-bottom: 100px;
    display:block;
    font-family:Montserrat-Regular;   
 
}

.reset_quiz {
    font-size: 30px;
    font-family: OpenSans;
    display: block;
    text-align: center;
    padding-bottom: 50px;
}

.answers_content {
  
  position: relative;
text-align:center;
}



.inner_content{
   line-height: normal;
  display: inline-block;
   line-heigh:60px;
    text-align:left;
}








#myButton {
    background-color: #0077c0;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    margin-right: 2px;
    margin-left: 2px;
    cursor: pointer;
    border-radius: 8px;
    display: grid;
    margin-left: auto;
    margin-right: auto;
}

#myButton2 {
    background-color: #0077c0;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    margin-right: 2px;
    margin-left: 2px;
    cursor: pointer;
    border-radius: 8px;
    display: grid;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    top:30px;
                                                     
}

.inner_content: {
    display: inline-block;
    text-align: left;
}

                                                     
   .feeedback_content
{
                                                     
 line-height: 1.6;                                        
}