/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
      UNIVERSAL
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
body {
  background-color: #6CF; }
a{
  all: unset;
  cursor: pointer;
}
span {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.2rem 0 0.4rem;
  background-color: #FFF;
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
      HEADER
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
#header {
  background-image: url("../img/pattern/header.svg");
  background-color: #FFF;
  border-bottom: 0.4rem #000 solid; }

#h-2, #h-1, #h-3 {
  background-color: #FFF; }

#header a {
  color: #000; }

#header span {
  color: #000;
  background-color: #FFF; }

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
      MAIN ELEMENTS
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
.box{
  box-shadow: -0.6em 0.6em;
  margin: 0.6em 0.6em 1.2em 1.2em;
  height: calc(100% - 2em);
  border: 0.1em #FFF solid; 
}
.paragraph {
  line-height: 1.6em;
  letter-spacing: 0.1em;
  font-size: 0.9em; }

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
      CAROUSEL IMAGES
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
#m-2 .box {
  position: relative;
  overflow: hidden;
  min-height: 50vh; 
  background-color: #fff; }

.slide {
  position: absolute;
  display: block;
  inset: 0;                 /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
@media (max-width: 60em) {
  #m-2 .box {
    min-height: 50vh; 
  }
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
      PROJECTS MENU
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
#m-1-1 .box {
  background-size: 10em;
  background-color: #8FA; }

#m-1-1 h2 {
  border-bottom: 0.1em #FFF solid;
  padding: 1em 1.6em;
  font-size: 1.6em;
  background: #fff;
  color: #000; }

#m-1-1 nav {
  display: flex;
  flex-wrap: wrap;
  padding: 1.6em 0; }

#m-1-1 nav a {
  padding: 1em 1.6em;
  font-size: 1.2em;
  color: #000; }

#m-1-1 nav a:hover {
  color: #000;
  background: #FFF; }

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
      UNSPECIFIED BOXES
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
#m-1-2 .box {
  background-image: url("../img/pattern/pattern2.svg");
  background-size: 8rem; }

#m-1-3 .box {
  background-image: url("../img/animated/water.gif");
  background-size: 6rem; }

#m-3-1 .box {
  background-image: url("../img/pattern/pattern3.svg");
  background-size: 4rem;
  position: relative; }

.description {
  display: none; }

#m-3-2 .box {
  background-image: url("../img/animated/design.gif");
  background-size: 6rem; }

#m-3-3 .box {
  background-size: 7.5rem;
  aspect-ratio: 3/2; }
#m-3-3 .box img{
  width:100%;
  display: block;
}

@media (max-width: 1240px) {
  #summary, #page {
    min-height: initial; 
  }
  #logo {
    height: initial; } 
}
@media (min-width: 1240px) {
  #m-3-1 .box {
    min-height: 13em; 
  }
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
      FOOTER
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
#f-1 .box {
  background-image: url("../img/pattern/pattern5.svg");
  background-size: 4rem; }
#f-2 .box {
  background-image: url("../img/pattern/pattern1.svg");
  background-size: 6rem; }
#f-3 .box {
  background-image: url("../img/pattern/pattern7.svg");
  background-size: 8rem; }

#f-4-1 .box {
  background-image: url("../img/pattern/pattern8.svg");
  background-size: 6rem; }

#f-4-2 .box {
  background-image: url("../img/pattern/pattern9.svg");
  background-size: 4rem; }

#f-1 .box, #f-2 .box, #f-3 .box, #f-4-1 .box, #f-4-2 .box {
  background-color: #FFF; }

#f-4 {
  font-size: 0.9em; }

#social-title {
  border-bottom: solid 0.1rem;
  color: #000;
  background-color: #FFF;
  border-color: #000; }

#social-title-hover {
  background-color: #8FA;
  color: #000; }

#footer .footer-link:hover{
      color: #fff;
    }
#footer .footer-link{
  color:#000;
  background-color: #8FA;
}

#note {
  color: #000; }

#footer-fill {
  background-image: url("../img/pattern/header.svg");
  background-size: 5em;
  background-color: #fff;
  border-top: 0.5em #FFF solid; }

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
      CONTACT FORM
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
#contact-background {
  background-color: #6CF; }

#contact-box {
  background-color: #FFF; }

#contact header {
  background-color: #000;
  color: #6CF; }

#contact-x:after {
  border-left: solid 0.1em #FFF; }
#contact-x:before {
  border-left: solid 0.1em #FFF; }

#contact article {
  caret-color: #6CF; }

#contact input {
  border-color: #000; }

#contact-form-txt {
  border-color: #000; }

#contact button {
  color: #000;
  background-color: #6CF;
  border-color: #000; }

#contact button:hover {
  color: #6CF;
  background-color: #FFF;
  border-color: #6CF; }

@media (max-width: 640px) {
  #contact-background {
    background-color: #FFF; } }



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
      RESPONSIVE DESIGN
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

@media (max-width: 80em) {
  #container {
    display: flex;
    flex-flow: column; 
  }
  #header { flex: 0 1 auto; }
  main { flex: 0 1 auto; }
  #footer { flex: 0 1 auto; }
  #footer-fill { flex: 1 1 auto; } 
}
@media (max-width: 40em) {
  #m-1, #m-1-1, #m-1-2, #m-1-3, #m-2, #m-3, #m-3-1 { width: 100%; }
  #m-3-2, #m-3-3 { width: 50%; }
  #m-1-2 { order: 1; }
  #m-1-3 { order: 2; }
  #m-1-1 { order: 3; } 
}
@media (min-width: 40em) and (max-width: 60em) {
  #m-1, #m-2, #m-3, #m-1-1, #m-3-1 { width: 100%; }
  #m-1-2, #m-1-3, #m-3-2, #m-3-3 { width: 50%; }
  #m-1-2 { order: 1; }
  #m-1-3 { order: 2; }
  #m-1-1 { order: 3; } 
}
@media (min-width: 60em) and (max-width: 80em) {
  #m-1-1, #m-1-2, #m-1-3, #m-3 { width: 100%; } 
  #m-1, #m-3-1, #m-3-2, #m-3-3 { width: 33.33%; }
  #m-2 { width: 66.66%; }
}
@media (min-width: 80em) {
  #m-1-1, #m-1-2, #m-1-3, #m-3-1, #m-3-2, #m-3-3 { width: 100%; }
  #m-1, #m-3 { width: 25%; }
  #h-2, #m-2 { width: 50%; }
  #m-1-1 { flex: 0 1 auto;}
  #m-1-2 { flex: 0 1 auto;}
  #m-1-3 { flex: 1 1 auto;}
  #m-3-1 { flex: 0 1 auto;}
  #m-3-2 { flex: 1 1 auto;}
  #m-3-3 { flex: 0 1 auto;} 
  #m-1, #m-3 {
    display: flex;
    flex-flow: column; }
}
#m-1, #m-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; }