/* CSS reset */

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* Root variables */

:root {
  --red: #ff0000;
  --White: #ffffff;
}

/* General Header styling */

header {
  display: flex;
  background-color: var(--red);
}

header figure {
  max-width: 20%;
}

header figure img {
  padding: 1%;
  width: 100%;
}

/* General Header Nav styling */

header nav {
  align-items: center;
  display: flex;
}

header nav a {
  color: var(--White);
  font-weight: bold;
  text-decoration: none;
}

header nav a:hover {
  color: black;
  transform: scale(1.1);
}

header .desktop a {
  display: none;
}

/* Mobile Hamburgermenu styling */

.mobile {
  margin-left: 67%;
  z-index: 99;
  display: flex;
}

.mobile label {
  z-index: 99;
  width: 40px;
}

.mobile ul {
  list-style-type: none;
}

.close {
  display: none;
  z-index: 98;
}

.checkbox {
  display: none;
}

.mobile ul {
  display: none;
}

.checkbox:checked ~ ul {
  padding-top: 5%;
  display: block;
  left: 0;
  position: absolute;
  z-index: 10;
  top: 6%;
  background-color: var(--red);
  width: 100%;
  text-align: center;
}

.checkbox:checked ~ ul li {
  padding: 10%;
}

.checkbox:checked ~ ul li a {
  text-decoration: none;
  color: white;
  font-size: 2em;
}

.checkbox:checked ~ label .open {
  display: none;
}

.checkbox:checked ~ label .close {
  display: block;
}

/* Global Styling */

main figure img {
  width: 100%;
}

main p {
  padding: 3%;
  margin-bottom: 3%;
}

h2 {
  padding: 3%;
}

h1 {
  font-size: 2em;
  padding: 3%;
}
/* Index specific styling */

.shoes {
  margin: 10%;
  margin-top: 0;
}

.shoes:hover {
  transform: scale(1.1);
}

.shoes:active {
  transform: scale(1.1);
}

.shoes img {
  margin-bottom: 2%;
}

.shoes a {
  font-size: 1.3em;
  color: black;
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
}

/* History Specific Styling */
.history-middle img {
  width: 100%;
}

/* About specific styling */

.aboutmain img {
  width: 100%;
}

/* Contact specific styling */

.contactmain img {
  width: 100%;
}

.contactmain ul {
  padding-left: 8%;
}
/* Footer styling */

footer {
  background-color: var(--red);
  padding: 5%;
}

footer h5,
footer h6,
footer p {
  padding-top: 2%;
}

footer h5 {
  font-size: 1.2em;
  padding-bottom: 2%;
}

footer h6 {
  font-size: 1em;
}

.right {
  justify-content: space-between;
}

.right h5 {
  font-size: 1.4em;
}

.right a img {
  width: 30%;
}

.flexright {
  display: flex;
  justify-content: space-around;
}

.flexright a {
  padding-bottom: 0;
  color: black;
}

/* Desktop styling starts here */

@media screen and (min-width: 820px) {
  /* Desktop header styling */

  .mobile {
    display: none;
  }

  header .desktop a {
    display: flex;
    margin-right: 5%;
    min-width: fit-content;
    font-size: 1.2em;
  }

  header figure img {
    width: 25%;
  }

  header {
    justify-content: space-between;
  }

  header .desktop {
    margin-right: 35%;
  }

  /* Desktop Footer styling */

  footer a:hover {
    transform: scale(1.01);
    color: var(--White);
  }

  footer a img:hover {
    transform: scale(1.1);
  }

  footer {
    display: flex;
    justify-content: space-around;
    padding: 0.1%;
  }

  .right h5 {
    font-size: 1em;
  }

  footer .right img {
    width: 28%;
  }

  .right .flexright {
    margin-top: 2%;
    display: flex;
    flex-direction: column;
    text-align: right;
  }

  /* Global desktop styling */

  main p,
  .grid,
  main h1,
  main h2,
  .history-middle img,
  .aboutmain img {
    padding-left: 15%;
    padding-right: 15%;
  }

  main p {
    font-size: 1.1em;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* index specific desktop styling */

  .grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  .shoes {
    width: 20%;
    margin: 5%;
  }

  /* History Specific Desktop styling */

  .historymain img {
    width: 100%;
  }

  .history-middle {
    display: flex;
  }

  .history-middle img {
    width: 30vw;
    margin: 0;
    margin-top: 2%;
    padding-right: 0;
  }

  .history-middle p {
    padding-left: 0;
  }

  .historymain h2 {
    padding-bottom: 0;
  }

  .historymain p {
    padding-top: 2%;
  }

  /* About specific desktop styling */

  .aboutmain img {
    width: 25vw;
    padding-right: 0;
  }

  .aboutmain .topimage {
    padding: 0;
    width: 100%;
  }

  .aboutmain section {
    display: flex;
  }

  .aboutmain section article {
    display: block;
    padding-right: 15%;
  }

  .aboutmain section article p,
  .aboutmain section article h2 {
    padding-left: 1%;
    margin-left: 0;
  }

  .aboutmain section .opposite {
    padding-left: 15%;
    padding-right: 0;
  }

  .oppositesect {
    margin-top: 2%;
  }

  .aboutmain .oppositesect img {
    padding-left: 0;
    padding-right: 15%;
    width: 30vw;
  }

  .aboutmain .topmargin {
    margin-top: 1%;
  }

  .aboutmain h2 {
    padding-bottom: 0;
  }

  .aboutmain p {
    padding-top: 2%;
  }

  /* Contact specific Desktop styling */

  .contactmain section {
    display: flex;
  }

  .contactmain section img {
    width: 35%;
    padding-left: 15%;
  }

  .contactmain ul {
    padding-left: 16%;
  }

  .contactmain h2 {
    padding-bottom: 0;
  }

  .contactmain p {
    padding-top: 1%;
  }

  .contactmain section article p {
    padding-left: 0;
    padding-right: 15%;
    padding-top: 3%;
  }

  .contactmain section article .-margin p {
    padding-top: 0;
  }

  .contactmain section article .-margin {
    margin-top: 4%;
  }
}