@charset "UTF-8";
select,
button {
  color: black;
}

body {
  background-color: rgb(255, 255, 255);
  margin: 0px;
}

.mainBtn {
  background-color: #cbb17c;
  color: black;
  opacity: 0.9;
  font-weight: bold;
  margin-top: 1px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  font-family: "Share Tech Mono", monospace;
  border: none;
  font-size: 20px;
  /* ett sätt att ändra på beteendet när musen är över elementet */
}
.mainBtn:hover {
  cursor: pointer;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("images/headerprofil/sssss.jpg");
}
header .mainBtn {
  margin-bottom: 9px;
  margin-top: 5px;
}
header nav {
  display: flex;
  justify-content: space-between;
  min-width: 350px;
  /* Här specificerar jag att mina anchor taggar ska vara vita för att det inte ska påverka min header senare. */
}
header nav a {
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-decoration: none;
  margin-top: 20px;
  font-size: 13px;
}
header nav .active {
  text-decoration: underline;
}
header h1 {
  font-family: "Rubik Wet Paint", serif;
  font-size: 30px;
}

/* här bestämmer jag possition på bilderna */
.homePic {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  /* här specificerar jag bilderna isäg alltså storlek, höjd, space */
}
.homePic .imgHome {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product {
  margin-bottom: 40px;
  /* flex för att få bilderna på rad, och spacebetween för att få mellanrum mellan bilderna, och wrap för att få överflödiga bilder på ny rad. */
}
.product .largeImg {
  width: 100%;
}
.product .preview {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.product .preview img {
  width: 30%;
  margin-top: 10px;
}
.product .info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product .info select {
  width: 90px;
  border: 1px solid #333333;
  border-radius: 4px;
  margin-bottom: 7px;
}
.product .info h3,
.product .info h4,
.product .info p {
  font-family: "Rokkitt", serif;
  font-weight: 300;
  margin: 0;
}
.product .info h3 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.product .info h4 {
  color: #ff0c0c;
}
.product .info .orginalPrice {
  color: black;
}
.product .info p span {
  color: #ff0c0c;
}
.product .info .mainBtn {
  /* sätter 5px padding på top & bott sen 20 för sidorna på knapparna */
  padding: 5px 20px;
  margin-top: 5px;
  margin-bottom: 10px;
}

footer {
  background-color: #333333;
  display: flex;
  flex-direction: column;
  align-items: center;
}
footer nav {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  min-width: 300px;
}
footer nav a {
  color: #ffffff;
  mix-blend-mode: difference;
  text-decoration: none;
  margin-top: 20px;
  font-size: 13px;
}
footer h2 {
  font-family: "Rubik Wet Paint", serif;
  color: #ffffff;
  mix-blend-mode: difference;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 0px;
}
footer .hiroshi {
  height: 50px;
  opacity: 0.6;
}
footer p {
  color: #ffffff;
  mix-blend-mode: difference;
  font-size: 10px;
}

.mainAboutUs {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mainAboutUs .aboutUs {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: "Rokkitt", serif;
  padding: 7px;
  margin-top: 20px;
}
.mainAboutUs section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mainAboutUs section img {
  height: 200px;
  width: 200px;
  object-fit: cover;
  border: 1px solid gray;
  border-radius: 50%;
}
.mainAboutUs section h1 {
  margin-top: 80px;
  margin-bottom: 50px;
}
.mainAboutUs section h2,
.mainAboutUs section h4,
.mainAboutUs section h5,
.mainAboutUs section p {
  margin: 10px;
}
.mainAboutUs section h5 {
  color: #2661b8;
}
.mainAboutUs .employeesOnly {
  display: flex;
  flex-wrap: wrap;
}
.mainAboutUs .employeesOnly .employee {
  margin-bottom: 20px;
  width: 100%;
}

/* la till margin och flec för att få rubriken i mitten och under varandra. */
.mainRefrences {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Rokkitt", serif;
  margin-left: 7px;
  margin-right: 7px;
}
.mainRefrences .articleContainer {
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  margin-top: 100px;
}
.mainRefrences .articleContainer article {
  width: 100%;
}
.mainRefrences h4 {
  margin-bottom: 0px;
}
.mainRefrences h2 {
  margin-top: 0px;
}
.mainRefrences i {
  margin-bottom: 10px;
}
.mainRefrences h1 {
  margin: 0px;
  margin-bottom: 10px;
}
.mainRefrences article {
  width: 100%;
  margin-bottom: 40px;
}
.mainRefrences p {
  font-size: 15px;
  font-weight: bold;
  margin: 0px;
  margin-bottom: 5px;
}
.mainRefrences span {
  color: rgb(57, 53, 53);
}

.mainContentContactUs {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* här satte jag box-sizing för att inte låta mina element öka storleken 
  med padding utan ge padding på insidan så att den behåller sin sanna storlek, har satt det på både contact us och (products för desktop) */
}
.mainContentContactUs section {
  font-family: "Rokkitt", serif;
  max-width: 700px;
}
.mainContentContactUs section img {
  height: 149px;
  width: 303px;
  margin-top: 30px;
}
.mainContentContactUs section p {
  margin: 0px;
  font-family: "Rokkitt";
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
}
.mainContentContactUs section .contactInfo {
  text-align: left;
}
.mainContentContactUs .contactText {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
}
.mainContentContactUs .contactText article {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mainContentContactUs .contactText article p {
  margin: 0px;
  text-align: left;
}
.mainContentContactUs .contactFrom {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  margin-top: 100px;
}
.mainContentContactUs .contactFrom .formInputWraper {
  display: flex;
  flex-wrap: wrap;
}
.mainContentContactUs .contactFrom .formInputWraper .formInput {
  width: 100%;
  margin-bottom: 10px;
}
.mainContentContactUs .contactFrom .formInputWraper .formInput label {
  display: block;
}
.mainContentContactUs .contactFrom .formInputWraper .formInput input,
.mainContentContactUs .contactFrom .formInputWraper .formInput select {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  border-radius: 0;
}
.mainContentContactUs .contactFrom textarea {
  width: 100%;
  height: 150px;
  box-sizing: border-box;
}
.mainContentContactUs .contactFrom button {
  width: 100%;
  margin-bottom: 60px;
  background-color: white;
  border: 1px solid black;
  height: 40px;
}
.mainContentContactUs .contactFrom button:hover {
  cursor: pointer;
}

.cart {
  text-align: center;
  height: 100vh;
}

/* Här anpassar jag till mobile first  */
@media (min-width: 600px) {
  header h1 {
    font-size: 37px;
  }
  .homePic {
    height: 100vh;
  }
  .homePic .imgHome {
    width: 50%;
  }
  .product {
    width: 50%;
    padding: 10px;
    /* här sätter jag box sizing border box för att kunna använda padding utan att påverka elemenets sanna storlek */
    box-sizing: border-box;
  }
  main {
    display: flex;
    flex-wrap: wrap;
  }
  /* jag sätter max-widht på både min about us
  och employees för att texten samt bilden inte ska gå över 900px */
  .aboutUs {
    max-width: 900px;
  }
  .mainAboutUs .employeesOnly {
    max-width: 900px;
  }
  .mainAboutUs .employeesOnly .employee {
    width: 50%;
  }
  /* minskade storleken på min kontainer och sen satte jag spacebetwwn för mellarum
  och minskade article till 47 % för att den extra 6 procenten ska bli mellanrum  */
  .mainRefrences {
    height: 100vh;
  }
  .mainRefrences .articleContainer {
    max-width: 600px;
    justify-content: space-between;
  }
  .mainRefrences .articleContainer article {
    width: 47%;
  }
  .mainContentContactUs .contactText {
    width: 100%;
    max-width: 700px;
    justify-content: space-between;
  }
  .mainContentContactUs .contactText .textContainer {
    text-align: left;
    margin-top: 40px;
  }
  .mainContentContactUs .contactText article {
    display: block;
    width: 50%;
  }
  .mainContentContactUs .contactFrom .formInputWraper {
    justify-content: space-between;
  }
  .mainContentContactUs .contactFrom .formInputWraper .formInput {
    width: 47%;
  }
}

/*# sourceMappingURL=style.css.map */