@import url("https://fonts.googleapis.com/css?family=Bungee|Permanent+Marker&display=swap");
/* =============================================================================
COLORS
============================================================================= */
/* =============================================================================
HELPERS
============================================================================= */
.contact nav a.headmaster .icon, .contact nav a.work .icon, .contact nav a.icloud .icon, .contact nav a.s-email .icon, .contact nav a.google .icon, .contact nav a.keybase .icon, .contact nav a.github .icon, .contact nav a.gitlab .icon, .contact nav a.rubygems .icon, .contact nav a.bitbucket .icon, .contact nav a.medium .icon, .contact nav a.dribbble .icon, .contact nav a.behance .icon, .contact nav a.telegram .icon, .contact nav a.linkedin .icon, .contact nav a.angellist .icon, .contact nav a.facebook .icon, .contact nav a.twitter .icon { text-align: center; font-size: 2rem; }

.nolink, .nolink:hover, .nolink:focus, .nolink:active, .nolink:visited { color: inherit !important; text-decoration: inherit !important; cursor: inherit !important; outline: none !important; }

/* =============================================================================
MIXINS
============================================================================= */
/* =============================================================================
Base
============================================================================= */
*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; }

body { background: #44475a; font-family: 'Bungee', cursive; }

.gpg { color: #ff79c6; }

/* =============================================================================
CONTACT BOX
============================================================================= */
.contact-area { width: 100%; height: 100vh; position: absolute; }

.contact { position: relative; max-width: 500px; padding: 40px 20px; overflow: hidden; margin: 0 auto; z-index: 1; }
@media (min-width: 1024px) { .contact { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }
.contact main { float: left; width: 100%; position: relative; }
.contact main section { border-radius: 5px; float: left; width: 100%; background-color: #282a36; }
.contact main section .content { float: left; width: 100%; padding: 20px 30px 50px 30px; position: relative; text-align: center; }
@media (min-width: 414px) { .contact main section .content { text-align: left; } }
.contact main section .content img { display: inline-block; width: 140px; border-radius: 50%; }
@media (min-width: 414px) { .contact main section .content img { float: left; width: 30%; margin-right: 10%; } }
.contact main section .content aside { float: left; width: 100%; color: #f8f8f2; margin-top: 10px; }
@media (min-width: 414px) { .contact main section .content aside { width: 60%; } }
.contact main section .content aside h1 { font-family: 'Permanent Marker', cursive; font-weight: 100; font-size: 22px; margin-bottom: 10px; }
.contact main section .content aside p { font-size: 14px; letter-spacing: .5px; line-height: 160%; }
.contact main .top-title { float: left; width: 100%; background-color: #6272a4; max-height: 0px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; overflow: hidden; -webkit-transition: all 0.55s; -moz-transition: all 0.55s; -o-transition: all 0.55s; transition: all 0.55s; }
.contact main .top-title.active { max-height: 100px; -webkit-transition: all 1.3s; -moz-transition: all 1.3s; -o-transition: all 1.3s; transition: all 1.3s; }
.contact main .top-title.active p { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition-delay: .2s; }
.contact main .top-title p { padding: 15px 30px; color: #f8f8f2; font-size: 16px; display: inline-block; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); }
.contact main button { position: absolute; bottom: 0; right: 50%; background-color: #86E2D5; color: #6272a4; border: 0; width: 200px; height: 48px; text-align: center; border-radius: 30px; font-size: 16px; letter-spacing: .5px; text-transform: uppercase; margin-bottom: -24px; margin-right: -100px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; transition-delay: .1s; outline: none; overflow: hidden; z-index: 10; font-family: inherit; font-weight: 200; -webkit-box-shadow: 1px 1px 4px 4px rgba(95, 111, 155, 0.46); box-shadow: 1px 1px 4px 4px rgba(95, 111, 155, 0.46); }
.contact main button span { opacity: 1; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; transition-delay: .4s; display: block; width: 200px; float: left; padding: 15px 0px; }
.contact main button svg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; }
.contact main button svg path { fill: #6272a4; }
.contact main button.active { margin-right: 0; right: 20px; width: 65px; height: 65px; margin-bottom: -32.5px; text-indent: 100%; white-space: nowrap; overflow: hidden; border-radius: 65px; -webkit-box-shadow: 1px 1px 4px 4px rgba(95, 111, 155, 0.46); box-shadow: 1px 1px 4px 4px rgba(95, 111, 155, 0.46); }
.contact main button.active span { opacity: 0; transition-delay: 0s; width: 200px; }
.contact main button.active svg { opacity: 1; transition-delay: .5s; }
.contact nav { float: left; width: 100%; overflow-x: hidden; overflow-y: scroll; max-height: 0px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; overflow: auto; -ms-overflow-style: none; /* IE 11 */ scrollbar-width: none; /* Firefox 64 */ filter: drop-shadow(0 0 0.3rem #bd93f9); }
.contact nav::-webkit-scrollbar { width: 0 !important; }
.contact nav.active { max-height: 600px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
.contact nav.active a { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s; transition: all 0.7s; }
.contact nav.active a:nth-of-type(1) { transition-delay: 0.2s; }
.contact nav.active a:nth-of-type(2) { transition-delay: 0.4s; }
.contact nav.active a:nth-of-type(3) { transition-delay: 0.6s; }
.contact nav.active a:nth-of-type(4) { transition-delay: 0.8s; }
.contact nav.active a:nth-of-type(5) { transition-delay: 1s; }
.contact nav.active a:nth-of-type(6) { transition-delay: 1.2s; }
.contact nav.active a:nth-of-type(7) { transition-delay: 1.4s; }
.contact nav.active a:nth-of-type(8) { transition-delay: 1.6s; }
.contact nav.active a:nth-of-type(9) { transition-delay: 1.8s; }
.contact nav.active a:nth-of-type(10) { transition-delay: 2s; }
.contact nav.active a:nth-of-type(11) { transition-delay: 2.2s; }
.contact nav.active a:nth-of-type(12) { transition-delay: 2.4s; }
.contact nav.active a:nth-of-type(13) { transition-delay: 2.6s; }
.contact nav.active a:nth-of-type(14) { transition-delay: 2.8s; }
.contact nav.active a:nth-of-type(15) { transition-delay: 3s; }
.contact nav.active a:nth-of-type(16) { transition-delay: 3.2s; }
.contact nav.active a:nth-of-type(17) { transition-delay: 3.4s; }
.contact nav.active a:nth-of-type(18) { transition-delay: 3.6s; }
.contact nav.active a:nth-of-type(19) { transition-delay: 3.8s; }
.contact nav.active a:nth-of-type(20) { transition-delay: 4s; }
.contact nav.active a:nth-of-type(21) { transition-delay: 4.2s; }
.contact nav.active a:nth-of-type(22) { transition-delay: 4.4s; }
.contact nav.active a:nth-of-type(23) { transition-delay: 4.6s; }
.contact nav.active a:nth-of-type(24) { transition-delay: 4.8s; }
.contact nav .scroll { text-align: center; margin-top: .5rem; margin-bottom: -.5rem; filter: drop-shadow(0 0 0.1rem #282a36); color: #f8f8f2; opacity: 0.65; }
.contact nav a { float: left; width: 100%; margin-top: 18px; background-color: #f8f8f2; padding: 18px 20px; border-radius: 5px; text-decoration: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: 0; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); position: relative; }
@media (min-width: 414px) { .contact nav a { padding: 18px 30px; } }
.contact nav a .arrow { position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.contact nav a .arrow path { fill: #e6e6d1; }
.contact nav a.headmaster .icon { color: #ff5555; }
.contact nav a.headmaster .content h1 { color: #ff5555; }
.contact nav a.work .icon { color: #bd93f9; }
.contact nav a.work .content h1 { color: #bd93f9; }
.contact nav a.icloud .icon { color: #A3AAAE; }
.contact nav a.icloud .content h1 { color: #A3AAAE; }
.contact nav a.s-email .icon { color: #0091FF; }
.contact nav a.s-email .content h1 { color: #0091FF; }
.contact nav a.google .icon { color: #4285f4; }
.contact nav a.google .content h1 { color: #4285f4; }
.contact nav a.keybase .icon { color: #4c8eff; }
.contact nav a.keybase .content h1 { color: #4c8eff; }
.contact nav a.github .icon { color: #6e5494; }
.contact nav a.github .content h1 { color: #6e5494; }
.contact nav a.gitlab .icon { color: #fc6d26; }
.contact nav a.gitlab .content h1 { color: #fc6d26; }
.contact nav a.rubygems .icon { color: #e9573f; }
.contact nav a.rubygems .content h1 { color: #e9573f; }
.contact nav a.bitbucket .icon { color: #205081; }
.contact nav a.bitbucket .content h1 { color: #205081; }
.contact nav a.medium .icon { color: #00ab6c; }
.contact nav a.medium .content h1 { color: #00ab6c; }
.contact nav a.dribbble .icon { color: #ea4c89; }
.contact nav a.dribbble .content h1 { color: #ea4c89; }
.contact nav a.behance .icon { color: #1769ff; }
.contact nav a.behance .content h1 { color: #1769ff; }
.contact nav a.telegram .icon { color: #0088CC; }
.contact nav a.telegram .content h1 { color: #0088CC; }
.contact nav a.linkedin .icon { color: #0077B5; }
.contact nav a.linkedin .content h1 { color: #0077B5; }
.contact nav a.angellist .icon { color: #000; }
.contact nav a.angellist .content h1 { color: #000; }
.contact nav a.facebook .icon { color: #3b5998; }
.contact nav a.facebook .content h1 { color: #3b5998; }
.contact nav a.twitter .icon { color: #1da1f2; }
.contact nav a.twitter .content h1 { color: #1da1f2; }
.contact nav a .icon { float: left; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin-right: 20px; }
.contact nav a .icon svg { width: 100%; height: 100%; padding: 14px; }
.contact nav a .icon svg path { fill: #f8f8f2; }
.contact nav a .content h1 { font-size: 20px; font-weight: 400; line-height: 160%; letter-spacing: .4px; }
.contact nav a .content span { font-size: 14px; color: #282a36; display: block; letter-spacing: .4px; }