@import "./normalize.css";
@import "./root.css";

#slider {
  margin: 0 auto;
  width: 800px;
  max-width: 100%;
  text-align: center;
}

#slider input[type="radio"] {
  display: none;
}

#slider label {
  cursor: pointer;
  text-decoration: none;
}

#slides {
  padding: 10px;
  border: 3px solid #ccc;
  background: #fff;
  position: relative;
  z-index: 1;
}

#overflow {
  width: 100%;
  overflow: hidden;
}

#slides .inner {
  transition: margin-left 800ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 400%;
  line-height: 0;
  height: 300px;
}

#slide1:checked ~ #slides .inner {
  margin-left: 0;
}

#slide2:checked ~ #slides .inner {
  margin-left: -100%;
}

#slide3:checked ~ #slides .inner {
  margin-left: -200%;
}

#slide4:checked ~ #slides .inner {
  margin-left: -300%;
}

#slides .slide {
  width: 25%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #fff;
}

#slides .slide1 {
  background: #00171f;
}

#slides .slide2 {
  background: #003459;
}

#slides .slide3 {
  background: #007ea7;
}

#slides .slide4 {
  background: #00a8e8;
}

#controls {
  margin: -180px 0 0;
  width: 100%;
  height: 50px;
  z-index: 3;
  position: relative;
}

#controls label {
  transition: opacity 0.2s ease-out;
  display: none;
  width: 50px;
  height: 50px;
  opacity: 0.4;
}

#bullets label {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #ccc;
  margin: 0 10px;
}

#controls label:hover {
  opacity: 1;
}

#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(1) {
  background: url("https://assets.dryicons.com/uploads/icon/svg/12281/c24c99ff-1bcc-48ac-9eaf-5880bfa2d7c7.svg");
  background-repeat: no-repeat;
  float: right;
  margin: 0 -50px 0 0;
  display: block;
}

#slide1:checked ~ #controls label:nth-last-child(1),
#slide2:checked ~ #controls label:nth-last-child(4),
#slide3:checked ~ #controls label:nth-last-child(3),
#slide4:checked ~ #controls label:nth-last-child(2) {
  background: url("https://assets.dryicons.com/uploads/icon/svg/12276/9ddbaa0d-f4c6-470a-b98d-ba08b5277806.svg");
  background-repeat: no-repeat;
  float: left;
  margin: 0 0 0 -50px;
  display: block;
}

#bullets {
  margin: 150px 0 0;
  text-align: center;
}

#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4) {
  background: #444;
}

@media screen and (max-width: 900px) {
  #slide1:checked ~ #controls label:nth-child(2),
  #slide2:checked ~ #controls label:nth-child(3),
  #slide3:checked ~ #controls label:nth-child(4),
  #slide4:checked ~ #controls label:nth-child(1),
  #slide1:checked ~ #controls label:nth-last-child(2),
  #slide2:checked ~ #controls label:nth-last-child(3),
  #slide3:checked ~ #controls label:nth-last-child(4),
  #slide4:checked ~ #controls label:nth-last-child(1) {
    margin: 0;
  }

  #slides {
    max-width: calc(100% - 140px);
    margin: 0 auto;
  }
}

.menu {
  font-family: Roboto, sans-serif;
}

#menu-toggle {
  position: absolute;
  opacity: 0;
}

/* Click on content co close menu */
#menu-toggle:checked {
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  z-index: 1;
}

label[for="menu-toggle"] > span::before {
  content: "";
  top: -8px;
}

label[for="menu-toggle"] > span::after {
  content: "";
  top: 8px;
}

label[for="menu-toggle"] {
  display: flex;
  align-items: center;
  position: fixed;
  top: var(--menu-button-indent);
  left: var(--menu-button-indent);
  width: var(--menu-button-size);
  height: var(--menu-button-size);
  cursor: pointer;
  z-index: 3;
}

label[for="menu-toggle"] > span,
label[for="menu-toggle"] > span::before,
label[for="menu-toggle"] > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: var(--menu-primary-color);
  transition-duration: 0.25s;
}

#menu-toggle:checked ~ label[for="menu-toggle"] > span {
  transform: rotate(45deg);
}

#menu-toggle:checked ~ label[for="menu-toggle"] > span::before {
  top: 0;
  background-color: var(--background-color);
}

#menu-toggle:checked ~ label[for="menu-toggle"] > span::after {
  top: 0;
  background-color: var(--background-color);
  transform: rotate(90deg);
}

.menu nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: var(--menu-width);
  height: 100%;
  margin: 0;
  padding: 80px 0;
  background-color: var(--menu-primary-color);
  box-shadow: 1px 0 6px var(--menu-shadow-color);
  transition-duration: 0.25s;
  z-index: 5;
}

#menu-toggle:checked ~ nav {
  visibility: visible;
  left: 0;
}

.menu nav a {
  padding: 12px 24px;
  color: var(--background-color);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: 0.1s;
}

.menu nav a:hover {
  background-color: var(--menu-checked-color);
}