body {
    margin:0;
  }

  @keyframes gradient {
      0% {background-position: 0%}
      100% {background-position: 100%}
  }


html {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(45deg,rgba(241, 124, 88, .5), rgba(233, 69, 132, .5), rgba(36, 170, 219, .5) , rgba(39, 219, 177, .5),rgba(255, 220, 24, .5), rgba(255, 55, 6, .5));
    background-size: 600% 100%;
    animation: gradient 16s linear infinite;
    animation-direction: alternate;
    background-color: #000000;
    color: #fff !important;
    font-family: 'SF Mono', 'Menlo', 'Droid Sans Mono', monospace !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    -moz-user-select: none !important;
    cursor: default !important;
}
.container {
    position: fixed !important;
    text-align: center !important;
    top: 50% !important;
    left: 50% !important;
    width: auto !important;
    right: -50% !important;
    transform: translate(-50%,-50%) !important;
    -webkit-transform: translate(-50%,-50%) !important;
    -moz-transform: translate(-50%,-50%) !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}
.intro {
    font-size: 45pt;
    width: 100%;
}
.intro.name {
    animation: gradientText 16s linear infinite;
    animation-direction: alternate;
    color: #eda72e;
}
.intro.cursor {
    font-weight: 200;
    display: none;
    position: relative;
    top: -6px;
}
.links {
    margin-top: 50px;
    font-size: 18pt;
    color: #ffffff;
    font-weight: 600;
}
.links > a {
    display: inline-block;
    margin: 0 5px;
    padding: 5px;
    cursor: pointer;
    color: #eda72e;
}
.links > a:hover {
    color: #c2851c;
}

.btn {
    display: block;
    margin-top: 20px;
    color: #fff;
    text-decoration: none;
    font-size: 18pt;
    padding: 10px;
}
.btn.small {
    font-size: 15pt;
    display: inline-block;
}

.btn:hover {
    color: #cecece;
}


@media(max-width: 1000px) {
    .intro {
        font-size: 40pt;
    }
    .links {
        font-size: 17pt;
    }
    .btn {
        font-size: 17pt;
    }
}
@media(max-width: 900px) {
    .intro {
        font-size: 35pt;
    }
}
@media(max-width: 800px) {
    .intro {
        font-size: 30pt;
    }
    .links {
        font-size: 16pt;
    }
    .btn {
        font-size: 16pt;
    }
}
@media(max-width: 500px) {
    .links {
        font-size: 15pt;
    }
}
@media(max-width: 340px) {
    .links {
        font-size: 14pt;
    }
    .btn {
        font-size: 15pt;
    }
}

.cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
.projects {
    width: 100vw;
    margin-left: -20px;
    margin-top: 40px;
}
.projects > a {
    display: block;
    width: 100vw;
    background-size: cover;
    background-position: center;
    color: #fff;
    border: none;
    text-decoration: none;
}
.projects > a > div {
    text-align: center;
    padding: 70px 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    transition: 200ms ease-out backdrop-filter, 200ms ease-out background, 200ms ease-out font-size;
    -webkit-transition: 200ms ease-out -webkit-backdrop-filter, 200ms ease-out background, 200ms ease-out backdrop-filter, 200ms ease-out font-size;
}
.projects > a:hover > div {
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(4px) saturate(1.5);
    backdrop-filter: blur(4px) saturate(1.5);
    font-size: 18px;
}