html{
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}

body{
background-image: url(images/bg800bulbs.jpg);
}

a:link{
color: black;
text-decoration: none;
}

a:visited{
color: black;
}

hr{
height: 0.1em;
border-color: lightgray;
border-style: solid;
}

p{
margin-top: 0.5em;
}

.content{
max-width: 80dvw;
margin: auto;
background-color: white;
padding: 1em;
  @media screen and (width < 820px) {
    max-width: 100dvw;
    
  }
}

header{
display: flex;
align-items: center;
justify-content: space-between;
  @media screen and (width < 820px) {
    flex-direction: column;
  }
}


.logo{
display: flex;
align-items: center;
}

.image{
width: 6em;
margin: 1em;
}

nav ul{
display: flex;
list-style: none;
}

nav li a{
text-decoration: none;
margin-right: 2em;
}

a:link a:visited{
color: gray;
}

.banner{
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
width: 100%;
}

.opener{
font-size: larger;
min-height: 15em;
}

.opener h1{
text-align: center;
}

.opener p{
text-align: left;
}

.solutions{
min-height: 21em;
}

.solar{
margin-bottom: 0.5em;
float: right;
  @media screen and (width < 580px){
    width: 100%;}

}

.geo{
margin-bottom: 0.5em;
float: right;
  @media screen and (width < 580px){
  width: 100%;}
}

.turb{
margin-bottom: 0.5em;
float: right;
  @media screen and (width < 580px){
  width: 100%;}
}

.btt{
min-height: 3em;
text-align: center;
display: block;
margin: auto;
margin-top: 0.3em;
margin-bottom: 3em;
}

.button{
text-decoration: none;
color: grey;
border: solid lightgray;
border-radius: 0.5em;
padding: 0.5em;
padding-left: 3em;
padding-right: 3em;
}

.orange{
background-image: linear-gradient(#ffa456, #ff8731);
border-radius: 0.5em;
background-position: center;
text-align: left;
margin: auto;
margin-bottom: 3em;
max-width: 90%;
padding: 1em;
}

.orange p{
column-count: 2;
column-gap: 4em;
padding-top: 1em;
padding-bottom: 5em;
  @media screen and (width < 820px){
  columns: 1;}
}

.test{
min-height: 15em;
}

.test p{
margin-left: 0.5em;
}

.jg{
float: left;
border-left: solid;
border-width: .3em;
border-left-color: #7fffd4;
margin-right: 1em;
}

.rs{
float: left;
border-left: solid;
border-width: .3em;
border-left-color: #7fffd4;
margin-right: 1em;
}

.sp{
float: left;
border-left: solid;
border-width: .3em;
border-left-color: #7fffd4;
margin-right: 1em;
}

.rect{
background-image: linear-gradient(#ffa456, #ff8731);
border-radius: 0.5em;
background-position: center;
text-align: left;
margin: auto;
margin-bottom: 3em;
max-width: 90%;
padding: 1em;
}

.rect hr{
border-style: dotted;
}

.recources{
text-align: left;
column-count: 2;
column-gap: 4em;
margin: auto;
padding: 1em;
  @media screen and (width < 820px){
  columns: 1;}
}

.cardshead{
text-align: center;
line-height: 1;
padding: 1em;
margin: 1em;
}

.preform{
text-align: center;
}

form{
background-image: linear-gradient(#ffa456, #ff8731);
border-radius: 0.5em;
background-position: center;
text-align: center;
margin: auto;
margin-top: 1em;
margin-bottom: 3em;
max-width: 90%;
padding: 1em;
}

input{
width: 50%;
margin-bottom: 0.5em;
padding: 0.5em;
}

input[type=submit]{
width: 20%;
margin: 0.5em;
}
input[type=reset]{
width: 20%;
margin: 0.5em;
}

.cards{
text-align: center;
columns: 3;
gap: 2em;
column-rule: 0.1em solid lightgray;
margin-left: auto;
margin-right: auto;
max-width: 90%;
padding: 1em;
  @media screen and (width < 1080px){
  columns: 1;
}

}
.cards h2{
padding: 1em;
}

.cards ul{
list-style-type: none;
padding: 1em;
}

.connect{
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 90%;
}

.connect h2{
padding-top: 1em;
}

.connect p{
padding-bottom: 1em;
}