/* Main */
html,
body {
  background-color:   #07080D;
  color:              #fafafb;
  font-family:        'Poppins', sans-serif;
  letter-spacing:     2px;
}

/* Links */
a {
  color:              #fff;
  font-weight:        bold;
  transition:         0.3s all ease;
}

a:hover {
  color:              #659fd2;
  transition:         0.3s all ease;
}

footer a:hover {
  color:              #fff;
}

.button.is-primary {
  background-color:   #659fd2!important;
}

/* Text styles */
b {
  font-weight:        700;
}

.title {
  color:              #fafafb;
}

.title.is-1 {
  font-size:          4rem;
  font-weight:        300;
}

.subtitle {
  color:              #fafafb;
  font-size:          1.5rem;
  font-weight:        300;
  line-height:        1.5;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  color:              #fff;
}

ul,
.content ul {
  list-style:         none;
  margin:             0;
}

.has-text-primary {
  color:              #659fd2!important;
}

/* Buttons */
.button.is-light {
  background-color:   #fff;
  border-color:       transparent;
  color:              #07080D;
  font-size:          1.25em;
  font-weight:        500;
  margin-top:         32px;
  transition:         0.3s all ease;
}

.button.is-light.is-hovered,
.button.is-light:hover {
  background-color:   #fff;
  border-color:       transparent;
  box-shadow:         0 5px 15px rgba(255, 255, 255, 0.4);
  transition:         0.3s all ease;
}

/* Navbar */
.navbar-link.is-active,
.navbar-link:focus,
.navbar-link:focus-within,
.navbar-link:hover,
a.navbar-item.is-active,
a.navbar-item:focus,
a.navbar-item:focus-within,
a.navbar-item:hover {
  background-color:   #07080D;
  color:              #659fd2;
  transition:         0.3s all ease;
}

@media screen and (max-width: 1023px) {
  .navbar-menu {
    background-color: initial;
  }
}

.navbar-item,
.navbar-link,
.tabs a {
  color:              #fff;
  font-weight:        300;
  transition:         0.3s all ease;
}

.tabs.is-boxed a:hover {
  background-color:   rgba(0,0,0,0);
}

.tabs a:hover {
  color:              #659fd2;
  transition:         0.3s all ease;
}

.navbar-burger {
  color:              #fff;
  height:             auto;
}

/* Columns */
.column {
  border-right:       1px solid #333;
}

@media screen and (max-width: 768px) {
  .column {
    border-bottom:    1px solid #333;
    border-right:     none;
  }
}

.column:last-child {
  border:             none;
}

.project-grid .column {
  border:             none;
}

/* Sections */
.section.skills {
  margin-top:         -8rem;
}

/* Section with background */
.background {
  position:           relative;
}

.background-padding {
  padding-bottom:     14rem;
}

/* Card */
.card {
  background-color:   #07080D;
  border: 1px solid   #659fd2;
  border-radius:      6px;
  color:              #fafafb;
  min-height:         500px;
}

/* Box */
.box {
  background-color:   #07080D;
  color:              #fafafb;
}

.box i {
  font-size:          3em;
}

/* Colors */
red {
  color:              #EE5C5D;
}

yellow {
  color:              #FFBA42;
}

green {
  color:              #13C4A4;
}

blue {
  color:              #659fd2;
}

/* Animated circles */
.circles {
  height:             100%;
  left:               0;
  overflow:           hidden;
  position:           fixed;
  bottom:             0;
  width:              100%;
}

.circles li {
  animation:          animate 25s linear infinite;
  background:         #fff;
  bottom:             -150px;
  display:            block;
  height:             20px;
  list-style:         none;
  position:           absolute;
  width:              20px;
}

.circles li:nth-child(1) {
  animation-delay:    0s;
  height:             80px;
  left:               25%;
  width:              80px;
  background:         #EE5C5D;
}

.circles li:nth-child(2) {
  animation-duration: 12s;
  animation-delay:    2s;
  height:             20px;
  left:               10%;
  width:              20px;
  background:         #FFBA42;
}

.circles li:nth-child(3) {
  animation-delay:    4s;
  height:             20px;
  left:               70%;
  width:              20px;
  background:         #13C4A4;
}

.circles li:nth-child(4) {
  animation-delay:    0s;
  animation-duration: 18s;
  height:             60px;
  left:               40%;
  width:              60px;
  background:         #659fd2;
}

.circles li:nth-child(5) {
  animation-delay:    0s;
  height:             20px;
  left:               65%;
  width:              20px;
  background:         #EE5C5D;
}

.circles li:nth-child(6) {
  animation-delay:    3s;
  height:             110px;
  left:               75%;
  width:              110px;
  background:         #FFBA42;
}

.circles li:nth-child(7) {
  animation-delay:    7s;
  height:             150px;
  left:               35%;
  width:              150px;
  background:         #13C4A4;
}

.circles li:nth-child(8) {
  animation-delay:    15s;
  animation-duration: 45s;
  height:             25px;
  left:               50%;
  width:              25px;
  background:         #659fd2;
}

/* Keyframes */
@keyframes animate {
  0% {
    border-radius:  100%;
    opacity:        1;
    transform:      translateY(0);
  }

  100% {
    border-radius:  100%;
    opacity:        0;
    transform:      translateY(-1000px);
  }
}