@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');
}







/* 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: center;
}



 .bottom_container{
     text-align:center;
     line-height: normal;
     display: block;

     padding-left:30px;
     padding-right:30px;
}



 .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-bottom:20px;
}
 .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{
     border-radius: 20px;

     max-width:1080px;
     -webkit-user-drag: none;
 
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     margin:20px;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}





 .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:block;

     align-content: center;
     align-items: center;
     margin-left: auto;
     margin-right: auto;
}
 .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: 80%;
}
 .try_again{
     padding-top:40px;
     position:relative;
     text-align:center;
     margin-top:50px;
     top:100px;
}
 input[type="radio"] {
     margin: 20px;
     padding:30px;
     border:solid 1px black;
}



.reset_form{

text-align:left;

}




.score{

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;
  display: inline-block;
  text-align: left;


}


#qsubmit {
  height: 30px;
  width: 100px;
  font-size: 10px;
  position: relative;

  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 {

  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:80px;
font-size:15px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
min-width:400px;
}





/* 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 */
    }
}
 .short_description_cat{
     font-family:Montserrat-Regular;
     width:100%;
     text-align:left;
}
 .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;
    /* safari */

    /* other styles for aesthetics */
     width:50%;
     font-size: 1.15rem;

    
     border-radius: 0.25rem;
     color: #000;
     background-color:white;

     font-family: "Montserrat-Regular";
}


 [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 {
     padding-bottom: 20px;
     font-weight: bold;
     margin-top: 60px;
     display: block;
     min-width: 200px;
     margin-left: auto;
     margin-right: auto;
}
/* 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;
    }
}                     

                                                     
img {

  width: 100%;
  max-width: 800px;
  height: auto;


}

  

.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;


}



.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;                                        
}