/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */
   @import 'https://fonts.googleapis.com/css?family=PT+Mono&display=swap';
   @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
   @import 'https://fonts.googleapis.com/css?family=Varela+Round&display=swap';
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}

#particles-js {
  width: 100%;
  height: 100%;
  background-color: rgb(39, 37, 37);
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.panel {
  font-family: 'Quicksand', sans-serif;
  display: block;
  color:white;
  position: absolute;
  z-index: 10;
  width: 20%;
  height: auto;
  min-width: 550px;
  background: transparent;
  padding: 20px;
  border-radius: 4px;
  box-sizing: border-box;
  z-index: 100;
  overflow: auto;
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
  text-align: center;
}

@media only screen and (max-device-width: 480px) {
  .panel {
    font-family: 'Quicksand', sans-serif;
    display: block;
    color:white;
    position: absolute;
    z-index: 10;
    width: 100%;
    height: auto;
    min-width: 100%;
    background: transparent;
    padding: 20px 0;
    border-radius: 4px;
    box-sizing: border-box;
    z-index: 100;
    overflow: auto;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
    text-align: center;
  }
}

html,body{ 
	width:100%;
	height:100%;
}

html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


canvas{
  display:block;
  vertical-align:bottom;
}

.centered-div{
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
  z-index: -1;
  display: block;
  margin: auto;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0; padding: 0;
  width: 720px;
  height: 50%;
  overflow: auto;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
}

#socialize-header {
  position: relative;
  height: 310px;
  width: 310px;
  vertical-align: middle;
  text-align: center;
  padding-top: 2em;
  margin: auto;
}

#socialize-header img {
  /* border: 10px solid rgba(255, 255, 255, 0.1); */
  border: 10px solid white;
  opacity: .9;
  border-radius: 50%;
  height: 250px;
  margin: auto;
  vertical-align: middle;
  text-align: center;
  align-content: center;
}

.email-a{
  text-align: center;
  align-content: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.6);
}

.email-a:hover{
  opacity: .9;
  color: #fff
}

#social-container {
  font-size: 30px;
  padding: 0;
  margin-top: 10px;
  margin-bottom: 0;
  padding-bottom: 10px;
  vertical-align: middle;
  text-align: center;
}

#social-container li {
  display: inline-block;
  margin-right: 10px
}

#social-container li a {
  color: rgba(255,255,255,.6);
  list-style-type: none;
  display: inline-block;
  line-height: 50px;
  height: 50px;
  width: 50px;
  padding: 1%;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  cursor: pointer;
  transition: ease .3s
}

#social-container li a:hover {
  border: 1px solid #fff;
  color: #fff
}

#social-container:hover>li {
  opacity: .5
}

#social-container:hover>li:hover {
  opacity: 1
}


::-webkit-scrollbar {
  width: 7px;
  height: 7px
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0
}

::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 20px;
  border: 0
}

::-webkit-scrollbar-thumb:hover {
  background: #415f90
}

::-webkit-scrollbar-track {
  background: #202020;
  border: 0
}

::-webkit-scrollbar-track:hover {
  background: 0 0
}

::-webkit-scrollbar-corner {
  background: 0 0
}