AssignmentStyle.css

html {zoom: 125%;}
.main-Pix {
    align-items: center;
    display: inline-block;
}
.main-Pix, .toPix, .storeImages{
    object-fit: contain;
}
.main-Pix img, .toPix img{    
    border-radius: 15px;
}              
.test {
    text-align: center;
}
ul {
    list-style-type: square;
    text-align: left;
}
#contactUs {
    text-align: left;
    font-size: 22px;
}
table, tr, th, td, caption{
    border: 1px solid black;
    font-family: 'Courier New', Courier, monospace;
    border-collapse: collapse;
    padding: 0.5rem;
}
/*------------------------------*/
html,body{
    margin: 0;
    padding: 0;
    width: 100%;
}
body {
    font-family:'Times New Roman', Times, serif;
    text-align: center;
    background-image: url('astroTurf.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    /*zoom: 95%;  */  
}
header{
    width: 100%;
    margin: 0;
    padding: 0;
    position: sticky;
    z-index: 2;
}
.counterheader{
    height: -180vh;
}
.logo{
    position: fixed;
    float: left;
    margin: 16px 36px;
    color: white;
    font-weight: bold;
    font-size: 24px;
    margin-right: 2px;
}
.logo a{
    padding: 30px;
    margin: 16px 36px;
    color: white;
    font-weight: bold;
}
footer a img{
    border-radius: 15px;
    margin: 15px 0;
}
.logo a img{
    position: left;
    float: left;
    width: 300px;
    border-radius: 40px;
    border: 1px solid black;
}
nav{
    position: fixed;
    width: 100%;   
}
nav ul{
    list-style: none;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    color: white;
    padding: 21px;
    font-weight: 700;
    text-align: right;
    margin: 0;
    transition: 0.8s;    
}
nav ul li{
    display: inline-block;
    padding: 30px;
}
nav ul li a{
    text-decoration: none;
    color: aliceblue;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    font-size: 17px;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 5px;
}
nav ul li a:active{
    color: white;
}
nav ul li a .active{
    color: white;
}
nav ul li:hover ul li{
    display: block;
}
nav.black ul{
    background: rgba(0, 0, 0, 0.9);
    transition: 1s;
}
nav.black ul a{
    text-decoration: none;
    color: aliceblue;
    background: rgba(0, 0, 0, 1);
    font-size: 17px;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 5px;
}
nav.black ul a:hover{
    background: aliceblue;
    color: black;
    border-radius: 20px;
}
.intro{
    z-index: -1;
    display: inline-block;
    position: fixed;
    top: 325px;
    margin-left: 15%;
    left: 0;
    color: aliceblue;
    font-size: 45px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.span1{
    padding-left: 45%;
}
.span2{    
    padding-left: 80%;
}
table, tr, th, td, caption{
    border: 1px solid black;
    font-family: 'Courier New', Courier, monospace;
    border-collapse: collapse;
    padding: 0.5rem;
}
.btt {
    text-align: right;
    font-size: 16px;    
}
.btt a{
    border: 1px solid white;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    transition: 0.3s;
}
.btt a:hover{
    border-radius: 10px;
    border: 1px solid black;    
    background-color: #04AA6D;
    transition: 0.2s;
}
.btt a:visited{
    color: black;
    text-decoration: dotted;
}
.main, .rental, .training, .store, .about, .contact{
    border-radius: 40px;
    background-color: aliceblue;
    font-size: 25px;
    margin-left: 15px;
    margin-right: 15px;
    padding-top: 20px;
}
.store fieldset{
    padding-right: 0;
}
fieldset{
    border-radius: 39px;
}
.space{
    margin-bottom: 125px;
}
.main-body p {
    text-align: left;
    font-size: 30px;
}
.main-body p span{
    font-size: 24px;
    font-weight: bold;    
}
.main-body ul{
    list-style-type: disc;
    text-align: left;   
}
.main-body ul li a{
    text-decoration: underline;
    color: inherit;
    text-align: left;
}
.main-body ul li a:hover{
    color: #04AA6D;
}
.rental legend, .training legend, .store legend, .about legend, .contact legend{
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 30px;
    font-family: sans-serif;
}
.Para{
    text-align: left;
    font-size: 24px;
    padding-bottom: 10px;
}
.rental ul{
    text-align: left;
    list-style-type: disc;
    font-size: 22px;
}
.rental ul li{
    padding: 3px;
}
.tableNimg {
    display: inline;
}
.rental table, tr, th, td, caption{
    border: 1px solid black;
    font-family: 'Courier New', Courier, monospace;
    border-collapse: collapse;
    padding: 0.5rem;
}
#rental-table-main-head, #training-table-main-head{
    font-size: 25px;
    font-weight: 300;
    color: white;
    background-color:#04AA6D;
}
#rental-table-main-labels, #training-table-main-labels{
    font-size: 20px;
}
.rental thead tr{
    font-size: 16px;
}
.training thead tr{
    font-size: 20px;
}
.rental tbody, .rental tfoot{
    font-size: 15px;
}
.training tbody, .training tfoot{
    font-size: 20px;
}
.rental tr:nth-child(even), .training tr:nth-child(even){
    background-color: #ddd;
}      
.rental tr:hover, .training tr:hover {
    color:#04AA6D;
    font-weight: bolder;
    background-color: white;
    transition: 0.2s;
    cursor: default;
}
/*--------------------------*/
#rental-form-para, #training-form-para, #contactUsPara{
    font-size:23px;
    text-align: left;
}
.rental h2, .training h2, .contact h2{
    padding-left: 15px;
    font-size: 30px;
}
.rental form h3, .training form h3, .contact form h3{
    color: #04AA6D;
    padding-left: 30px;
    font-size: 30px;
    margin-bottom: -5px;
}
.top-pad{
    padding-top: 15px;
}
.first-set-form-edit img{
    float: right;
}
.second-set-form-edit{
    text-align: left;
    padding-top: -50px;
}
.second-set-form-edit input{
    border: 2px solid black;
    border-radius: 40px;
    width: 24%;
    height: 30px;
    padding: 10px 0 10px 20px;
    margin-bottom: 15px;
    font-size: 20px;
    background-color: #b5fae1;
}
.second-set-form-edit span{
    padding-left: 2%;    
}
.second-set-form-edit input:hover{
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
/*----------------   
fieldset{
    border: none;
}*/
.form-radio-buttons{
    margin-top: -60px;
}
.set-1, .set-2, .set-3, .set-4, .set-5, .set-6{
    font-size: 25px;
    color: black;
    text-align: left;
}
.set-1 span{
    padding-left: 85px;
}
.set-2 span{
    padding-left: 62px;
}
.set-3 span{
    padding-left: 102px;
}
.set-1 :not(span):hover, .set-1 span:hover, .set-2 :not(span):hover, .set-2 span:hover,.set-3 :not(span):hover, .set-3 span:hover{
    color:#04AA6D;
    cursor: pointer;
}
.youngstars, .middle-kickers, .academy ,.adults, .standard, .gold, .platinum{
    padding-right: 25px;
    display: inline;
}
.youngstars:hover, .middle-kickers:hover, .academy:hover, .adults:hover, .standard:hover, .gold:hover, .platinum:hover{
    color:#04AA6D;
    cursor: pointer;
}
.rent, .train, .shop, .tour, .other{
    padding-right: 25px;
    display: inline;
}
.rent:hover, .train:hover, .shop:hover, .tour:hover, .other:hover{
    color:#04AA6D;
    cursor: pointer;
}
.training textarea, .contact textarea {
    margin-top: 20px;
    border-radius: 30px;
    padding: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 17px;
    color: grey;
    width: 800px;
    height: 200px;
}
/*-----------------------*/
.form-date-buttons{
    color: black;
}
.form-date-buttons input[type="date"]{
    background-color:#04AA6D;
    padding: 15px;
    color: white;
    font-size: 18px;
    border: 1px solid black;
    outline: none;
    border-radius: 30px;
    margin-right: 20px;
}
::-webkit-calendar-picker-indicator{
    padding: 5px;
    border: 1px solid black;
}
.form-date-buttons input[type="date"]:hover{
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    background-color:white;
    padding: 15px;
    color: black;
    border: 1px solid white;
    cursor: pointer;
}
/*-----------------------*/
.select{
    padding: 8px 12px;
    color: #333333;
    background-color: aliceblue;
    border: 2px solid black;
    cursor: pointer;
    border-radius: 20px;
    font-size: 17px;
    margin-left: 5px;
    margin-right: 25px;
}
.select:focus,
.select:hover{
    outline: none;
    border: 2px solid #04AA6D;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

}
.select option{
    background: aliceblue;
    color: #04AA6D;
}
/*------------------*/
.button_div {
    margin-top: 15px;
}
.contact_button_div{
    margin-top: 15px;
    margin-left: 750px;
}
.btn{
    margin-left: 15px;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    background: aliceblue;
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
    color: #04AA6D;
    border-radius: 23px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.btn:hover, .btn:focus, .btn:active{
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
/*----------------*/
.storeDiv{
    margin-left: 140px;
    margin-right: 140px;
}
.storeImages{
    display: grid;
    grid-template-rows: repeat(3, 44.3vh);
    grid-template-columns: repeat(3, 27vw);
    transition: all .2s cubic-bezier(0.5, 0.8, 0.5, 0.2);    
}
.storeImages p{
    display: none;
}
.storeImages img{
    width: 450px;
    height: 350px;
    object-fit: cover;
    border-radius: 5px;
    left: 0;
    right: 0;
    transition: all .15s cubic-bezier(0.5, 0.2, 0.2, 0.5);
    position: relative;
    box-shadow: 0 0 0 #000;
}
.storeImages:hover img{
    opacity: 0.5;
}
.storeImages img:hover{
    width: 600px;
    height: 500px;
    opacity: 1;
    z-index: 1;
    box-shadow: 1em 1em 1em #004;
    transition: all .3s cubic-bezier(0.5, 0.2, 0.2, 0.5);
    border-radius: 5px;
}
.noNeed{
    display: none;
}