/* source-sans-pro-300 - latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/source-sans-pro-v14-latin-300.eot");
  /* IE9 Compat Modes */
  src: local(""),
    url("fonts/source-sans-pro-v14-latin-300.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
    url("fonts/source-sans-pro-v14-latin-300.woff2") format("woff2"),
    /* Super Modern Browsers */
    url("fonts/source-sans-pro-v14-latin-300.woff") format("woff"),
    /* Modern Browsers */
    url("fonts/source-sans-pro-v14-latin-300.ttf") format("truetype"),
    /* Safari, Android, iOS */
    url("fonts/source-sans-pro-v14-latin-300.svg#SourceSansPro") format("svg");
  /* Legacy iOS */
}

body {
  scrollbar-width: none;
  overflow-x: hidden !important;


}

::-webkit-scrollbar {
  display: none;
}

.main-color {
  color: #771138;
}

.main-color-background {
  background-color: #771138;
}

.hamburger-background {
  background-color: #7711388a;
}

.second-color-background {
  background-color: rgba(207, 128, 0, 0.93);
}

.dark-color-background {
  background-color: rgba(113, 113, 113, 0.45);
}

.secondary-color {
  color: white;
}

.main-font {
  font-family: "Impact LT W01 Regular";
}

h1 {
  letter-spacing: 0;
  font-size: 4rem;
}

/*header*/
#intro-h1 {
  font-size: 1.5rem;

}

h1 .main-color {
  font-family: "Impact LT W01 Regular";
}

/*navigation*/
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

a,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
  text-transform: none;
}

.outer-menu a {
  color: white;
  text-decoration: none;
}

.outer-menu {
  position: fixed;
  top: 10vh;
  left: 0;
  z-index: 1;
  display: none;
}

.outer-menu .checkbox-toggle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 60px;
  height: 60px;
  opacity: 0;
}

.outer-menu .checkbox-toggle:checked+.hamburger>div {
  transform: rotate(135deg);
}

.outer-menu .checkbox-toggle:checked+.hamburger>div:before,
.outer-menu .checkbox-toggle:checked+.hamburger>div:after {
  top: 0;
  transform: rotate(90deg);
}

.outer-menu .checkbox-toggle:checked+.hamburger>div:after {
  opacity: 0;
}

.outer-menu .checkbox-toggle:checked~.menu {
  pointer-events: auto;
  visibility: visible;
}

.outer-menu .checkbox-toggle:checked~.menu>div {
  transform: scale(1);
  transition-duration: 0.75s;
}

.outer-menu .checkbox-toggle:checked~.menu>div>div {
  opacity: 1;
  transition: opacity 0.4s ease 0.4s;
}

.outer-menu .checkbox-toggle:hover+.hamburger {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.outer-menu .checkbox-toggle:checked:hover+.hamburger>div {
  transform: rotate(225deg);
}

.outer-menu .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  padding: 0.5em 1em;
  border-radius: 0 0.12em 0.12em 0;
  cursor: pointer;
  transition: box-shadow 0.4s ease;
  box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08),
    0 1px 3px 1px rgba(66, 66, 66, 0.16);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#home-first-sections,
#portfolio {
  min-height: 100vh;
}

.home-first-sections {
  grid-area: first-section;
  height: 100vh;
  display: flex;
  align-items: center;
  height: 0vh;
  /*  animation-name: minify;
animation-duration: 4s;
animation-iteration-count: 1;
opacity: 0;*/
}

/*.home-first-sections:target{
animation-direction: reverse;
animation-name: minify;
animation-duration: 3s;
animation-iteration-count: 1;
height: 100vh;
opacity: 1;
}*/
@media screen and (min-width: 760px) {
  #intro-h1 {
    font-size: 5rem;

  }

  #home-first-sections {
    align-items: center !important;
    min-height: 70vh;

  }

}

@media screen and (min-width: 1024px) {
  #intro-h1 {
    font-size: 8rem;

  }

  #home-first-sections {
    align-items: center !important;
  }


}