*{
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', 'sans-serif';
    box-sizing: border-box;

    
}



.bar{

    height: 100vh; 
    width: 100%;
    background-image: url(../images/cat.jpg);
    background-size: cover;
    background-position: center;
    
}

nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 45px;
    padding-left: 5%;
    padding-right: 5%;
    
    
}

.bar h2{
    font-size: 35px;
    letter-spacing: 0.2px;
    cursor: pointer;
    background-color: transparent;
    color: azure;
}






nav ul li{
    list-style: none;
    display: inline-block;
    padding: 10px 40px;
}

nav ul li a{
    color: azure;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}

nav ul li a:hover{
    color: rgb(24, 182, 230);
}

.btn{
    padding: 15px;
    background-color: rgb(24, 182, 230);
    color: azure;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease 0s;
    text-decoration: none;
}

.btn:hover{
    background-color: rgb(5, 119, 154);
}

.home{
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    color: azure;
}

.home h1{
    color: azure;
    margin: 20px 0px 20px;
    font-size: 60px;
}


span#htmllogo{
    color: rgb(240, 101, 41);
}
span#css{
    color:  rgb(38, 77, 228);
}

.about{
    height: 100vh; 
    width: 100%;
    background-image: url(../images/cat2.jpg);
    background-size: cover;
    background-position: center;
    
}

.about header{
    color: azure;
    font-size: 60px;
    text-align: center;
}



.about h2{
    color: azure;
    font-size: 20px;
    text-align: center;
    margin-top: 25px;
    
}
.about h2 a{
    color: rgb(179, 26, 18);
    text-decoration: none;
}
.about h2 a#neobis{
    color: rgb(18, 212, 50);
    text-decoration: none;
}

.skills{
    height: 100vh; 
    width: 100%;
    background-image:linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5) ), url(../images/cat3.jpg);
    background-size: cover;
    background-position: center;
    
    
    
}

.skills header{
    color: azure;
    font-size: 60px;
    text-align: center;
    
}

.skills h2{
    color: azure;
    font-size: 20px;
    text-align: center;
    
    
}

.skills h2 a#python{
    color: #4B8BBE;
    text-decoration: none;
}

.skills h2 a#node{
    color: #3c873a;
    text-decoration: none;
}

.it{
    display: flex;
    justify-content: space-between;
    padding-top: 45px;
    padding-left: 15%;
    padding-right: 5%;
    color: azure;
}

.plans{
    display: flex;
    justify-content: space-between;
    padding-top: 45px;
    padding-left: 15%;
    padding-right: 275px;
    color: azure;
}

.footer{
    height: 50vh; 
    width: 100%;
    background-color: black;
    font-size: 30px;
    
}

.footer-content{
    display: flex;
    justify-content: space-between;
    padding-top: 10%;
    padding-left: 15%;
    padding-right: 5%;
    color: azure;
    
}

span#blue{
    color: rgb(24, 182, 230);
    
}

div.anim {
    height: 100%;
    position: relative }

.anim h2 {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: 7.5vw;
    font-family: sans-serif;
}


#water1{
    color:  transparent;
    -webkit-text-stroke: 1px rgb(24, 182, 230);
}

#water2{
    color:  rgb(24, 182, 230);
    animation: animate 2s ease-in-out infinite;
}

@keyframes animate 
{
    0%,100%
    {
        clip-path: polygon(0% 58%, 5% 56%, 9% 51%, 13% 46%, 19% 44%, 25% 43%, 31% 43%, 35% 45%, 39% 46%, 42% 49%, 45% 52%, 49% 54%, 53% 58%, 57% 60%, 63% 63%, 68% 64%, 73% 64%, 78% 64%, 82% 63%, 86% 63%, 89% 61%, 92% 57%, 93% 54%, 96% 52%, 100% 51%, 99% 100%, 0% 99%);
    }
    50%
    {
        clip-path: polygon(0% 62%, 9% 60%, 11% 59%, 16% 64%, 21% 65%, 27% 64%, 32% 63%, 37% 60%, 41% 58%, 46% 55%, 49% 53%, 52% 52%, 56% 49%, 60% 48%, 65% 46%, 68% 44%, 73% 44%, 77% 44%, 82% 44%, 86% 44%, 89% 46%, 91% 48%, 94% 50%, 97% 52%, 100% 54%, 100% 100%, 0% 99%);    }
}


.click{
    height: 30em;
    font-size: large;
    text-align: center;
    background-color: black;
}
.click h1{
    padding: 10%;
    color: azure;
}

.api{
    height: 20em;
    font-size: large;
    text-align: center;
    background-color: black;
}

#cat p{
    color: white;
    padding: 5%;
}

.video{
    height: 20em;
    font-size: large;
    text-align: center;
    background-color: black;
}