@charset "utf-8";

/*
  Contact Page CSS
      Author: Ana Botto
      Date: 11/14/2023

      Filename:   ab_styles_new.css

*/


/* HTML and Body styles */

html {
   font-family: 'BC Alphapipe RB';
   background-image: linear-gradient(white,rgb(235,217,199));
  }

body {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      margin-right: 0%;
	  line-height: 1.2em;
	margin: 0;
     }

/* form styles */

        form {
            border: 1px solid #ccc;
            padding: 20px;
            width: 300px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            margin-top: 40px;
			margin-bottom: 20px;
        }

        fieldset {
            border: none;
            margin: 0;
            padding: 0;
			float:none;
			text-align: center;
			font-family: "bc-alphapipe", sans-serif;
			font-size: .8em;
        }

        .formRow {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
			flex-direction: row;
			align-items: center;
        }

        .formRow > div {
            flex: 1;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }
  

        input,
        textarea {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }

        textarea {
            resize: vertical;
			
        }

		legend {
		  font-size: 5vw;
		  color: black;
		  flex: 0 0 100%;
		  font-family: "bc-alphapipe", sans-serif;
		  font-weight: 200;
		  font-style: italic;
		  text-align: center;
		  border-radius: 50px;
		  margin-bottom: 20px;
		  padding: 15px;
		  width: 80%;
		  text-decoration: underline wavy #C4D4D4 4px;
		}

       #emailBox, #nameBox {
			font-family: "bc-alphapipe", sans-serif;
		}

		
		#message, #submit {
			border: none;
			float: none;
			text-align: center;
			font-family: "bc-alphapipe", sans-serif;

		}

 		#currentDateInput {
			border: none;
			background-color: transparent;
			font-family: "bc-alphapipe", sans-serif;
			text-align: center;
    	}

/* Submit Button Styles */

		button {
			background: transparent;
			border: none;
			display: block;
			margin: 5px auto;
			cursor: pointer;
			border-radius:20px;
		}
/* Header styles */

.footertext {margin-left: 3%;}
	#resume {
	color: rgb(198,104,101); 
	font-family: "bc-alphapipe",sans-serif;
	font-weight: 300;
	font-size:2vw;
	padding: 0 0 0 35px;
	text-align: center;
	display: block;
	text-indent:-40px;
}
	
	.bottomnav {
		margin: 0px 0px 0px 35px;
	}



 /* MEDIA QUERIES*/

 /* Media Query for Mobile */
@media only screen and (max-width: 600px) {
			.footertext {margin-left: 7%;}
			/* bottom nav */
			.bottomnav ul li:last-of-type {background-size:40px;}
			.bottomnav ul li:first-of-type {background-size:40px;}
			.bottomnav ul li:nth-of-type(2) {background-size:40px;}
          /* form */
			form {
                width: 100%;
				margin-left: -5%
            }

            .formRow {
                flex-direction: column;
            }
	
			.optGroup {
				flex-direction: row;
			}
	
			legend {
                font-size: 20px; 
            }
	
			 #currentDateInput {
				border: none;
				background-color: transparent;
			 	font-family: "bc-alphapipe", sans-serif;
			 	text-align: center;
   			 }
	
			/* top nav */
			a#navicon {
      			display: block;
  			 }
   
   			nav.top_nav ul {
      			display: none;
  			 }
   
   
   			a#navicon:hover+ul, nav.top_nav ul:hover {
			  	display: block;
			   	position:absolute;
			   	right:7px;
   			}
	
	
	.submenu {
				position: relative;
    			left: -100%;
			}
			
			.submenu li {
				white-space: nowrap;
			}
	
	.submenu li a {
		font-size: 1em;
	}

			.mainmenu {
				background-color: rgb(235,217,199);
				border-radius: 10px;
				font-size: 1em;
				padding: 5px 5px 5px 5px;
			}
	
	.mainmenu li a {
		font-size: 1em;
		line-height: 2;
	}
			
	
			/* header */
			header > img {
				width:65%
			}
	
			.mainmenu{
				background-color: rgb(235,217,199);
				border-radius: 10px;
			}
	.footertext {margin-left: 5%;}
	#resume {
	color: rgb(198,104,101); 
	font-family: "bc-alphapipe",sans-serif;
	font-weight: 300;
	font-size:2vw;
	padding: 0 0 0 35px;
	text-align: center;
	display: block;
	text-indent:-40px;
}
	
	.bottomnav {
		margin: 0px 0px 0px 35px;
	}
	#resume h8 {
		font-size: 3vw;
	}
}

  /* Media Query for Wider Screens */
 @media only screen and (min-width: 601px) {
            
			/* form */
			form {
                width: 600px;
            }
			/* top nav */
			a#navicon {
      			display: none;
   			}
			
}
  /* Media Query for XL Screens */
@media only screen and (min-width: 1400px)	{
	legend {
		font-size: 5em;
	}
}