@charset "utf-8";

html {
    margin: 0;
    padding: 0;
    background-color: rgb(3, 86, 2);
    height: auto;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5em;
    color: rgb(0, 0, 0);
    margin: 0;
    height: auto;
}

header {
    background: rgb(0, 48, 48);
    color: white;
    padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    width: 100%;
    margin: 0;
}

header h1 {
    margin-left: 30px;
    color:rgb(56, 189, 248)
}

h2 {
    text-align: center;
    text-decoration: underline;
    font-weight: bold;
}

main {
text-align:center;
padding:60px 20px;
color:white;
background: url("starhead.jpg");
background-repeat: no-repeat;
background-size: cover;
}

p {
    text-align: center;
}

main h1, main p {
    display: flex;
    justify-content: center;
    align-items: center;
}

main a:hover {
    background-color: rgb(56, 189, 248);
}

nav ul {
list-style: none;
display: flex;
gap: 25px;
padding-right: 50px;
}

nav a {
display: block;
text-decoration: none;
color: white;
}

nav a:hover {
color: rgb(56, 189, 248);
}

a#navicon {
    display: none;
}
.product-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 100px;
  padding: 20px;

}

.product-gallery .img {
  flex: 1 1 300px; 
  max-width: 400px;
  box-sizing: border-box; 
}

.product-gallery .img img {
  width: 100%;
  max-height: 400px;
  height: auto;
  display: block; 
  border: ridge 5px black;
  border-radius: 10px;
}

div p, div h3 {
    border: double 3px black;
    border-radius: 10px;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    background-color: white;
}

div a:hover {
    color: aqua;
}

section {
    padding: 40px 60px;
}

section p {
    text-align: center;
}

.products-info {
  display: flex;
  flex-flow: wrap;
  gap: 0px;
  padding: 20px;
}

.laser, .three-d{
     flex: 1;  
}

.info {
    text-align: center;
}

.info img {
  width: 75%;
  height: 750px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
  border: ridge 5px black;
}

.info h3 {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

.info p {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  line-height: 1.5;
  color: gray;
  margin-top: auto; 
}

.info a {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  text-align: center;
}

footer {
    background: black;
    color: white;
    text-align: center;
    margin: auto auto;
    padding: 20px;
    clear: both;
    width: auto;
}

form {
    width: 100%;
}
fieldset {
    width: 90%;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

fieldset a:hover {
    color: aqua;
}
input, select {
    display: block;
    position: relative;
    left: 15%;
    margin-top: 3px;
    padding: 5px;
    height: auto;
    width: 80%;
    border: solid black 1px;
    border-radius: 5px;
    background-color: gray;
}
label {
    display: block;
    position: absolute;
    font-weight: bold;
    width: 20%;
    padding: 5px;
}

input[type="submit"], input[type="reset"] {
        display: block;
        float: left;
        left: 0px;
        text-align: center;
        width: 40%;
        padding: 10px;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 10px;
        background-color: grey;
    }

input[type="submit"]:hover, input[type="reset"]:hover {
    background-color: aqua;
}

input:hover, select:hover, textarea:hover {
    background-color: aqua;
}

textarea {
        display: block;
        position:relative;
        padding: 10px;
        margin-left: 15%;
        width: 80%;
        background-color: gray;
}

input#name:focus:invalid,
input#address:focus:invalid,
input#city:focus:invalid,
input#state:focus:invalid,
input#zip:focus:invalid,
input#phone:focus:invalid,
input#email:focus:invalid,
input#bdate:focus:invalid {
    background-color: rgb(255, 100, 100);
}

table {
    width: 50%;
    border: solid 2px black;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

th, td {
    border: 1px solid black;
    height: 25px;
}

thead {
    background-color: black;
    color: white;
    font-weight: bold;
}

tbody {
    background-color: rgb(239, 239, 239);
}

tfoot {
    background-color:  black;
    color: white;
    text-align: center;
}
@media only screen and (max-width: 1200px){  
   
    input, select {
    display: block;
    position: inherit;
    padding: 5px;
    height: 25px;
    width: 75%;
}
label {
    display: block;
    position: inherit;
    font-weight: bold;
    width: 75%;
    height: 25px;
    margin-bottom: 3px;
}
input[type="submit"], input[type="reset"] {
        float: none;
        width: 90%;
        margin: 10px;
        font-size: 1.2em;
        height: fit-content;
    }
input[type="text"], input[type="email"], input[type="date"] {
    height: 20px
}
select {
    height: 35px;
}
textarea {
    margin-left: 0;
}

.product-gallery .img img {
  width: 100%;
  max-height: 500px;
}
.laser {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.three-d {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.info {
  width: 98%;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}

.info img {
  width: 98%;
  height: 400px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
}

.info img:hover {
    width: 100%;
    height: 100%;
}

.info h3 {
  margin: 0 0 8px 0;
  width: 98%;
}

.info p {
  margin: 0;
  width: 98%;
  line-height: 1.5;
  color: gray;
  margin-top: auto; 
}

.info a {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  text-align: center;
}
table {
    width: 90%;
}

}



@media only screen and (max-width: 700px) {
    body {
        width: 100%;
        margin: 0;
    }
    nav li{
        float: none;
        font-size: x-large;
        width: 100%;
        background-color: black;
    }
    nav a{
        border: solid 1px  grey;
        margin: 0;
    }
    a#navicon {
        display: block;
        margin-right: 10px;
    }
    nav ul {
        display: none;
        width: 100%;
    }
     a#navicon:hover+ul, nav ul:hover {
        display:block;
        margin: 0;
    }

form {
    width: 100%;
    font-size: large;
}
fieldset {
    width: 98%;
    padding: 0px;
    margin: 0px;
}
input, select {
    display: block;
    position: inherit;
    padding: 5px;
    height: 25px;
    width: 75%;
}
label {
    display: block;
    position: inherit;
    font-weight: bold;
    width: 75%;
    height: 25px;
    margin-bottom: 3px;
}
input[type="submit"], input[type="reset"] {
        float: none;
        width: 90%;
        margin: 10px;
        font-size: 1.2em;
        height: fit-content;
    }
input[type="text"], input[type="email"], input[type="date"] {
    height: 20px
}
select {
    height: 35px;
}
textarea {
    margin-left: 0;
}

.products-info {
    display: flex;
    flex-flow: column;
}

.info {
  width: 98%;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}

.info img {
  width: 98%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
}

.info img:hover {
    width: 100%;
    height: 100%;
}

.info h3 {
  margin: 0 0 8px 0;
  width: 98%;
}

.info p {
  margin: 0;
  width: 98%;
  line-height: 1.5;
  color: gray;
  margin-top: auto; 
}

.info a {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  text-align: center;
}

table {
    width: 100%;
}

}
@media only screen and (min-width: 701px) {

}