/*code may be messy, sorry!! -TD*/
/* Lines 1-450 written by Thomas*/
*{
    
    list-style-type: none;
    margin: 0;
    padding: 0;

}

.main{
    max-width: 100%;
    overflow-y: hidden;
    overflow-x: hidden; /*allows the mobile format to look right*/
  height: auto;
    width: 100%;
    /*    background: linear-gradient(to bottom, white, #7393B3);
*/
    /*background: linear-gradient(to bottom, white, rgb(49, 94, 49));*/

    /*heres the old right color background: linear-gradient(to bottom, white, #4a4279);*/
    
 
    /*previous background: linear-gradient(to bottom, white, rgb(0, 0, 145));*/
    position: relative;
    background-position: center;
    background-size: cover;
}


.navbar{
    /*background: linear-gradient(to top, white, #7393B3);*/
    width: 100%;
    height: auto;
    background-color: white;
    padding-bottom: 20px;
}

.content {
    
    background: linear-gradient(to bottom, white, rgb(243, 219, 83));
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;

    color: royalblue;
    text-shadow: 0 0 3px #ffffff, 0 0 5px #ffffff;

    padding: 40px;
}


/*putting this here so header isnt beside the paragraph content -TD*/
.header-content {
    text-align: center;
    margin-bottom: 20px;
    list-style-type: none;
    
}
.paragraph-content {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    
}

.content h1 {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;

    color: royalblue;
   
}









.SloganBanner {
  
    z-index: 1; /*wow now it finally doesnt go over the submenu*/
background-position-x: -10;
    width: 100%;
    position: relative;
    top: 250px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 460px;
    background-image: url(../Pictures/HomepageBannerImage.jpg);
    background-position: center;
    background-size: cover; 
    font-size: 24px;
    font-family: "Arial", sans-serif;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    opacity: 0.9;
    flex-direction: column;
    border-radius: 25px;
    box-shadow: 0 30px 40px rgba(0,0,0,.1);

    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.englishSlogan {
    position: absolute;
    top: 20px;
    left: 50px;
    font-size: 16px;
}

.VietnameseSlogan {
    position: absolute;
    top: 20px;
    right: 50px;
    
    font-size: 16px;
}




.SloganBanner p {
    position: absolute;
    padding: 20px;
    font-size: 20px; 
    bottom: 10px;
    text-align: center;
}



/*buttons-----------------------------------------------------------*/


.middle{
    /*background: linear-gradient(to bottom, #32CD32, white );*/
    
       /* background: linear-gradient(to bottom, white, #7393B3);*/
    
     
       /*  background-color: rgb(135, 135, 247);*/
     
       background-color:navy; /*  awesome! -TD*/
    
    height: auto;
    }



    .grid-container {
     padding: 20px;
    font-size: 30px;
    text-align: center;
    min-height: 200px;
        
        
        }
        
        
        .grid-container2 {
           
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 300px;
        justify-content: center;
        align-items: center;
        
        }

        
        .grid-itemgreen.white-background {
            background-color: white;
        }
        
        .grid-item {
            padding: 20px;
            font-size: 30px;
            text-align: center;
            min-height: 200px;
        }
        
        .grid-item2 {
            padding: 20px;
            font-size: 30px;
            text-align: center;
            min-height: 200px;
        }
        .grid-item2 h1 {
        color: rgb(255, 255, 255);
        font-family: "Arial", sans-serif;
        font-size: 22px;
        }
        .grid-item2 p {
        font-size: 19px; 
        font-family: "Arial", sans-serif;
        }
        
        
        

        .grid-item2 iframe{
            width: 80%; 
            
            height: 568px; /* change to make even */
            border: 0;
           
        }

.grid-item2 p{
    color: rgb(255, 255, 255);
    font-family: "Arial", sans-serif;
    font-size: 19px;
}

.grid-item2 p2{
    color: rgb(255, 255, 255);
    font-family: "Arial", sans-serif;
    font-size: 19px;
    align-items: left;
    text-align: left;
}


textarea {
        padding: 0 20px;
    min-width: 100px;
    outline:none;
    background-color: #d9e9e9;
    border: 2px solid royalblue;
    resize: none;
    
    height:auto;
    line-height:1.5;
    font-size: large;
  }

  

  
/*buttons-----------------------------------------------------------*/





.button {
    border-radius: 10px;

	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 20px;
	margin: 4px 2px;
	cursor: pointer;
	background-color: rgb(49, 94, 49);
	font-weight: bold;
	letter-spacing: .1px;
	height: 70px;
    width: 80%;
  }
.button:hover {
	background-color: darkgoldenrod;
}


@media only screen and (max-width: 623px) {/*shrink the slogan for phone view -TD*/
    .SloganBanner h2{

        font-size: 15px; 
        margin: 0; 


    }
   
}