:root{
    --color1:#222;
    --color2:#fafafa;
}

html{scroll-behavior: smooth;}
html, body, ul{ margin:0px; padding: 0px;}

*{
    box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, p{margin:0px; padding: 0px;}
p{ font-weight: 400; font-size: 1em;}

.size1{font-size: 1em;}
.size2{font-size: 1.1em;}
.size3{font-size: 1.2em;}
.size4{font-size: 1.3em;}
.size5{font-size: 1.4em;}

h1{font-size: 1.6em; margin-bottom: 10px; }
.tcenter{ text-align: center;}

.dark{
    background:url(../images/black.png) repeat var(--color1);
    color: var(--color2)
}

.light{
    background:url(../images/white.png) repeat var(--color2);
    color: var(--color1)
}

.dark footer{ background:url(../images/black.png) repeat var(--color1); border-top:2px solid #111; }
.dark footer nav a.active{ background: var(--color2); }
.light footer{ background:url(../images/white.png) repeat var(--color2);  border-top:2px solid #fff; }
.light footer nav a.active{ background: var(--color1); }
.dark .mode{ background: url(../images/mode-d.svg) no-repeat center;}
.light .mode{ background: url(../images/mode-l.svg) no-repeat center;}



body {
    font-family: "Lato", sans-serif;
    margin: 0;
    padding: 0;
    padding-bottom: 150px;
  }

  .mode{width:24px; height:13px; display: block; position:absolute; top:30px; right: 10px; cursor:pointer;}
  section{width:84%; max-width: 1280px; margin: 0 auto; padding:80px 0;   }
  article{width:100%; padding:20px 0;  display: flex; align-items: center; justify-content: center;  }

 section#home{max-width:800px; }
  .a1 img{width:130px; margin: 30px; border-radius: 50%; border: 10px solid var(--color1);}
  .light .a1 img{border-color: var(--color2);}

  .links{ padding:10px 0; justify-content: center; flex-wrap: wrap;}
  .links a{ font-size:1em; padding:10px 15px; border: 1px solid var(--color1); color:var(--color1); text-decoration: none; border-radius: 10px; display: inline-block; margin:5px;}
  .dark .links a{border: 1px solid var(--color2); color:var(--color2); }
  .links a:hover{ background: var(--color1); color:var(--color2);}
  .dark .links a:hover{background: var(--color2); color:var(--color1); }

  .a2{ flex-direction: column; }
  .a3{ flex-direction: column; text-align: center; }
  .a3 a{color:#fff; text-decoration: underline;}
  .light .a3 a{ color:#000;}

  header{display: flex; margin: 20px 0; flex-flow: column wrap; justify-content: center; align-items: center;}
  header .logo{width:150px; display:none;}
  header .logo img{width:100%; }

  footer{width:90%; padding: 15px 0; display: flex;  justify-content: center; align-items: center; position:fixed; z-index: 5; bottom:0px; left:5%; }
  footer nav{height:50px; border-radius:13px;  display: flex;}
  footer nav a{width:40px; height: 40px; display: block; padding: 5px; margin: 5px;}
  footer nav a img{width:100%;}
  footer nav a.active{ background: var(--color2); border:1px solid var(--color1); border-radius: 13px;}



.works{
    width:100%;
}
.works li{
    width:100%; 
}

.slide{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.slide .mobile{
    width:80%;
    display: block;
    height: auto;
    max-width: 360px;
    border:8px solid #000;
    border-radius: 40px;
    overflow: hidden;
}

.slide .web{
    width:80%;
    display: block;
    height: auto;
    max-width: 800px;
    border:8px solid #000;
    border-radius: 40px;
    overflow: hidden;
}



.slide img{
    width:100%;
    height: auto;
}









@media (max-width: 1366px) {
    
    
}

@media (max-width: 640px) {
    header .logo {
        width: 150px;
      }

     .a1 {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 10px 0;
    }
    .a1 img{ margin: 10px; }
    .links{
        padding: 10px 0;
    }
}

@media (max-width: 480px) {
    section{ padding:40px 0;  }
    .a1 img{width:100px;}
    .links{
        flex-direction: column;
        align-items: center;
    }
}