/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on January 23, 2018 */
/*

   FONT FAMILY GROUPS
   Docs: http://tachyons.io/docs/typography/font-family/

*/
.sans-serif {
  font-family: -apple-system, BlinkMacSystemFont,
               'avenir next', avenir,
               'helvetica neue', helvetica,
               ubuntu,
               roboto, noto,
               'segoe ui', arial,
               sans-serif;
}

.serif {
  font-family: georgia,
               times,
               serif;
}

.system-sans-serif {
  font-family: sans-serif;
}

.system-serif {
  font-family: serif;
}


/* Monospaced Typefaces (for code) */

/* From http://cssfontstack.com */
code, .code {
  font-family: Consolas,
               monaco,
               monospace;
}

.courier {
  font-family: 'Courier Next',
               courier,
               monospace;
}


/* Sans-Serif Typefaces */

.helvetica {
  font-family: 'helvetica neue', helvetica,
               sans-serif;
}

.avenir {
  font-family: 'avenir next', avenir,
               sans-serif;
}


/* Serif Typefaces */

.athelas {
  font-family: athelas,
               georgia,
               serif;
}

.georgia {
  font-family: georgia,
               serif;
}

.times {
  font-family: times,
               serif;
}

.bodoni {
  font-family: "Bodoni MT",
                serif;
}

.calisto {
  font-family: "Calisto MT",
                serif;
}

.garamond {
  font-family: garamond,
               serif;
}

.baskerville {
  font-family: baskerville,
               serif;
}




/*   FOR MAIN TITLE */
@font-face {
    font-family: 'katona_iultralight';
    src: url('../fonts/katona_i-webfont.woff2') format('woff2'),
         url('../fonts/katona_i-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'katona_iiultralight';
    src: url('../fonts/katona_ii-webfont.woff2') format('woff2'),
         url('../fonts/katona_ii-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'katona_iiiultralight';
    src: url('../fonts/katona_iii-webfont.woff2') format('woff2'),
         url('../fonts/katona_iii-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face
{
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 200;
  src: url("http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGEzfSP8PFPIaW8d4wHl9LSw.woff") format("woff");
}

@font-face
{
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  src: url("http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/ODelI1aHBYDBqgeIAH2zlDLXPPWpYIJRcQ99gLLWTOQ.woff") format("woff");
}

@font-face
{
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  src: url("http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGNF2eBBnhZOFf_rblGEjGiI.woff") format("woff");
}


@font-face
{
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  src:  url("http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGBgDywzySrQSFSEUM6OqW_g.woff") format("woff");
}

/* nav */
.sticky{
  position: fixed;
  top:0;
  z-index: 50;
  text-decoration: none;
  background-color: white;
  color: #000000;
  -webkit-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  -webkit-box-shadow: -12px 12px 24px -7px rgba(186,186,186,0.43);
  -moz-box-shadow: -12px 12px 24px -7px rgba(186,186,186,0.43);
  box-shadow: -12px 12px 24px -7px rgba(186,186,186,0.43);

}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {

  overflow-x: hidden;
  tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  background: white;
  width: 100%;
  margin:auto;
  font-family: 'Source Sans Pro', sans-serif;
}
nav{
  color: #000000;
  position:relative;
  z-index: 500;
}

footer{
  background-color: rgba(255, 157, 156, 1);
}


button{
  background-color: white;
}
h1 {
  font-size: 46px;
  font-family: 'Source Sans Pro', sans-serif;
}

h2 {
  text-align: center;
}
.shortintro p{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 100;
  width: 450px;
  margin: 0 auto;
}

.avatar .long-bg{
  position: relative;
  z-index: 20;
}

a {
  text-decoration: none;
}

a:hover {
  transition: all 0.4s;
}

.clearfix{
  clear: both;
}

.main-title{
  background: white;
  height: 650px;
}
#container{
  background-color: white;
  width: 100%;
}
#paticles-js{
  height: 500px;
  background: red;
}

.name {
  opacity: 0;
  font-family: 'katona_iiiultralight';
  letter-spacing: 6px;
}


.name1{
  font-size: 5em;

}
.name2{
  font-size: 3em;
  font-weight: 100;
}

.shortintro {
  opacity: 0;
}

.avatar {
  opacity: 0;
}

/*background*/
.main {
  background-image: url('../img/dotted.png');
  background-repeat: repeat;
  color:#40414a;
  text-align: center;
  padding-top: 5em;
  padding-bottom: 30px;
  /* background-color:white; */
  font-family: 'Montserrat', sans-serif;
  width: 100%;
}

.url {
  margin-top: 0.5rem;
}
.portfolio-items img {
  max-width: 100%;
  display: block;
}


.portfolio-items {
  display: grid;

  /* width: 100%; */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 0.5rem;
  overflow: auto;
  /* padding: 0 50px; */

}
.portfolio-items .item {
  width: 100%;
  padding: 1rem;
}


/*MEDIA QUERY*/




@media screen and (max-width: 35.5em){
  body{
    width: 115%;
    margin: 0;
  }
  nav{
    width: 100%;
  }

}



/* ≥ 568px*/
@media screen and (min-width: 35.5em){
  html,body,#container,.main{
    width: 100%;
  }



}

/* ≥ 768px*/
@media screen and (min-width: 48em){
  html{
    width: 100%;
  }


}

/* ≥ 1024px*/
@media screen and (min-width: 64em){
  .main{

    margin: auto;
  }

}