/*
========================
======================== RESET
========================
*/

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

@media (max-width: 768px) {
  html {
    font-size: 50%;
  }
}

body,
button,
input,
select,
textarea {
  font-family: 'KoHo', sans-serif;
  font-size: 1.6rem;
}

body {
  color: #373b5b;
  transition: 0.4s;
}

button {
  cursor: pointer;
  border: none;
  outline: none;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.border {
  border: 1px solid red;
}

/*
========================
======================== IFRAME
========================
*/

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
========================
======================== CONTAINER
========================
*/

.container {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1170px) {
  .container {
    margin-left: 20px;
    margin-right: 20px;
  }
}