/* Desktop based design */
@media only screen and (min-width: 778px){
@keyframes pop-swirl {
    0% {
      transform: scale(0) rotate(360deg);
    }
    60% {
      transform: scale(0.8) rotate(-10deg);
    }
    100% {
      transform: scale(1) rotate(0deg);
    }
  }


/* master styles */
body, html{
    margin: 0px;
    min-width: 100%;
    height: 100%;
}

img.top-image{
    height:100px;
    border-radius: 50%;
    margin: auto;
}


/* navbar styles */

.nav-link{
    display: flex;
    justify-content: space-between;
    padding: 25px;

}


.link{
    display: flex;
    height: 50px;
}

.nav-link > .link > div{
    margin-right: 20px;
    font-size: larger;
    text-transform: uppercase;
    font-style: italic;

}

.leftside{
    height: 22px;
    border-bottom: 1px solid transparent; 
    margin: 10px;

}

.rightside{
  margin: 13px;
  height: 50px;
  font-style: italic;
  font-size: larger;
  color:#8a8a8a;
  transition: border bottom 0.5s;;
}

.leftside a{
    color:#8a8a8a;
    text-decoration: none;
    transition:color 0.5s;
}



.leftside a:hover{
    color:black;
}

div.portfolio-items-wrapper{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 10px;
  margin: 10px;



}
div.portfolio-items-wrapper div{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: auto;
    width: 100%;
}


img.image{
    height: 100%;
    width: 100%;
    /* object-fit: cover; */
}

input{
    font-style: italic;
    font-size: larger;
    color: #8a8a8a;
    border-radius: 15%;
}

input:hover{
    box-shadow:  5px 10px #888888;
    color: black;
    cursor: pointer;
}

/*Modal styles*/
#modal{
    -webkit-animation: pop-swirl 1s ease forwards;
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

#modalMask{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #eee;
    z-index: 1000;
    opacity: 0.9;
}

#modalContent{
    position: relative;
    width: 22%;
    margin: 15px auto;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #000;
    text-align: center;
    z-index: 9999;
    top: 37%;
    border-radius: 10%;
}

sup{
    font-size: 10px;
}
}
/* *********************************************************************************************************** */
/* *********************************************************************************************************** */
/* Mobile based design */
@media only screen and (max-width: 778px){
    @keyframes pop-swirl {
        0% {
          transform: scale(0) rotate(360deg);
        }
        60% {
          transform: scale(0.8) rotate(-10deg);
        }
        100% {
          transform: scale(1) rotate(0deg);
        }
      }
    
    
    /* master styles */
    body, html{
        margin: 0px;
        min-width: 100%;
        height: 100%;
        width: fit-content;
    }
    
    img.top-image{
        height:100px;
        border-radius: 50%;
        width:100px;
        margin: auto;
    }

    
    /* navbar styles */
    
    .nav-link{
        display: flex;
        justify-content: space-between;
        padding: 25px;
        flex-direction: column;
    
    }
    
    
    .link{
        display: flex;
        height: 50px;
        width: fit-content;
        margin: auto;
    }
    
    .nav-link > .link > div{
        margin-right: 20px;
        font-size: larger;
        text-transform: uppercase;
        font-style: italic;
    
    }
    
    .leftside{
        height: 22px;
        border-bottom: 1px solid transparent; 
        margin: 10px;
    
    }
    
    .rightside{
        width: fit-content;
      margin: auto;
      height: 50px;
      font-style: italic;
      font-size: larger;
      color:#8a8a8a;
      transition: border bottom 0.5s;;
    }
    
    .leftside a{
        color:#8a8a8a;
        text-decoration: none;
        transition:color 0.5s;
    }
    
  
    .leftside a:hover{
        color:black;
    }
    
    div.portfolio-items-wrapper{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
        margin: 10px;
    }
      
      div.portfolio-items-wrapper div{
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          width: 100%;
      }
        
 
      img.image{
          height: 100%;
          width: 100%;
          
      }
    
    
    /*Modal styles*/
    #modal{
        -webkit-animation: pop-swirl 1s ease forwards;
        display: none;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    
    #modalMask{
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: #eee;
        z-index: 1000;
        opacity: 0.9;
    }
    
    #modalContent{
        position: relative;
        width: 22%;
        margin: 15px auto;
        padding: 15px;
        background-color: #fff;
        border: 1px solid #000;
        text-align: center;
        z-index: 9999;
        top: 20%;
        border-radius: 10%;
    }
    
    sup{
        font-size: 10px;
    }
      
}