/*
    File: style.css
    Description: This CSS file contains styles for the website layout and design of index.html and projects.html
    Author: Pablo Duenas
*/

.bg {
    width: 100%;
    min-height: 100%;
    display: flex;
    background-size: 300% 300%;
    background-image: linear-gradient(-45deg, #85d832 30%, #62bce6 50%, #0000ff 100%);
    -webkit-animation: AnimateBG 20s ease infinite;
            animation: AnimateBG 20s ease infinite;
}
  
@-webkit-keyframes AnimateBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
  
@keyframes AnimateBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.logo-text {
    font-size: 25px;
    padding-left: 20px;
    padding-right: 30px;
}
.icon {
    padding-right: 30px;
}

.content-start {
    padding-top: 90px;
}

.content-block {
    padding-top: 30px;
    padding-bottom: 25px;
}

.content-size {
    padding-left: 200px;
    padding-right: 200px;
}

.rounded-edges {
    border-radius: 10px;
}

.prof-pic {
    height: 65px;
    width: 65px;
}

.projects-bg {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: #5dbedb;
}

.project-title {
    font-size: 28px;
    font-weight: 600;
    color: black;
    padding-bottom: 5px;
}

/* mobile screen configuration */
@media screen and (max-width: 768px) {
    .navbar-item {
      padding: 10px;
    }
    
    .navbar-item div {
      display: flex;
      align-items: center;
    }
    
    .navbar-burger {
      display: block;
    }
    
    .navbar-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: #fff;
      padding: 10px;
    }
    
    .navbar-menu.is-active {
      display: block;
    }

    .content-size {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .bg {
        height: 100%;
    }
      
    .projects-bg {
        height: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
  }