style.css

*
{
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size:medium;
  background-color: rgb(240, 228, 205);
}


header
{
  text-align: center;
}
header img
{
  width:15vw;
}
header a
{
  font-size: 4vw;
  margin:2vw;
  color:rgb(117, 44, 44);
  background-color:unset;
  text-decoration:none;
}
header a:hover
{
  color:white;
}
/*  för tablet  */
@media only screen and (min-width: 800px)
{
  header img
  {
    width:13vw;
  }
  header a
  {
    font-size:3vw;
  }
}
/*  för desktop  */
@media only screen and (min-width: 1024px) and (orientation: landscape)
{
  header img
  {
    width:10vw;
  }
  header a
  {
    font-size:2vw;
  }
}


#section-welcome
{
  margin-top:5vw;
}
.welcome
{
  display:flex;
  flex-direction:column;
  align-items:center;
}
/*  för tablet  */
@media only screen and (min-width: 800px)
{
  .welcome
  {
    flex-direction:row;
  }
}
/*  för desktop  */
@media only screen and (min-width: 1024px) and (orientation: landscape)
{
  .welcome
  {
    flex-direction:row;
  }
}
.welcome img
{
  max-width:50vw;
}
.welcome div
{
  text-align: center;
  margin: 1vw;
}


#section-about
{
  margin-top:5vw;
  align-items:center;
  text-align: center;
  margin: 10vw;
}
#section-about h1
{
  font-size:larger;
}


#section-products h1
{
  color:rgb(117, 44, 44);
  font-family:tangerine;
  font-size:8vw;
  text-shadow: 1vw 1vw 1vw #888;
  text-align:center;
}
.grid-container
{
  display:grid;
  grid-template-columns: 80vw;
  justify-content:space-evenly;
}
/*  för tablet  */
@media only screen and (min-width: 800px)
{
  .grid-container
  {
    grid-template-columns: 40vw 40vw;
  }
}
/*  för desktop  */
@media only screen and (min-width: 1024px) and (orientation: landscape)
{
  .grid-container
  {
    grid-template-columns: 20vw 20vw 20vw 20vw;
  }
}


.product-item
{
  background-color:floralwhite;
  border-style:solid;
  border-color:rgb(220, 200, 190);
  border-radius:1vw;
  border-width:0.2vw;
  padding:0.5vw;
  margin:1vw;
  height:auto;
  text-align:center;
}
.product-item button
{
  background-color:floralwhite;
  border-color:rgb(150, 150, 150);
  border-radius:0.5vw;
  border-width:0.2vw;
  width:10vw;
}
.product-item button:hover
{
  background-color:rgb(235, 240, 255);
}
.product-item img
{
  width:100%;
  height:fit-content;
  border-radius:0.5vw;
}


.contact-form
{
  text-align:center;
  padding-bottom: 2vw;
}
.contact-form input
{
  width:70vw;
  margin: 1vw;
  background-color: white;
}
/*  för tablet  */
@media only screen and (min-width: 800px)
{
  .contact-form input
  {
    width:60vw;
    margin:0.7vw;
  }
}
/*  för desktop  */
@media only screen and (min-width: 1024px) and (orientation: landscape)
{
  .contact-form input
  {
    width:50vw;
    margin:0.5vw;
  }
}
.contact-form textarea
{
  width:70vw;
  margin: 1vw;
  background-color: white;
  resize:none;
}
/*  för tablet  */
@media only screen and (min-width: 800px)
{
  .contact-form textarea
  {
    width:60vw;
    margin:0.7vw;
  }
}
/*  för desktop  */
@media only screen and (min-width: 1024px) and (orientation: landscape)
{
  .contact-form textarea
  {
    width:50vw;
    margin:0.5vw;
  }
}
input#sub
{
  width:fit-content;
  background-color:floralwhite;
  border-color:rgb(150, 150, 150);
  border-radius:0.5vw;
  border-width:0.2vw;
}


footer
{
  background-color: rgb(220, 208, 185);
  text-align: center;
  padding: 5vw;
}
footer img
{
  background-color:unset;
  width:10vw;
}
footer a
{
  background-color:unset;
  margin:5vw;
}
/*  för tablet  */
@media only screen and (min-width: 800px)
{
  footer
  {
    padding:4.5vw;
  }
  footer img
  {
    width:6vw;
  }
  footer a
  {
    margin:3vw;
  }
}
/*  för desktop  */
@media only screen and (min-width: 1024px) and (orientation: landscape)
{
  footer
  {
    padding:4vw;
  }
  footer img
  {
    width:4vw;
  }
  footer a
  {
    margin:2vw;
  }
}


.footer-text
{
  color:rgb(72, 113, 188);
  padding:unset;
  background-color: unset;
}

.footer-text a
{
  color:unset;
  text-decoration:unset;
  margin:unset;
}

.footer-text a:hover
{
  color:white;
  text-decoration:unset;
}