*{
    padding: 0;
    margin: 0px;
}
body{
    width:100%;
    height: 100vh;
    color: aliceblue;
    font-size:15px;
}
body::-webkit-scrollbar{
    background-color: #042e52;
}
body::-webkit-scrollbar-thumb{
    background-color: rgb(55, 119, 98);
}
.background{
    background: radial-gradient(circle, rgb(100, 170, 90) 0%, #042e52 100%);
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: -3;
}

.logo{
    background-color: antiquewhite;
    width: 150px;
    height: 130px;
    text-align: center; 
    padding: 3px;
    padding-top: 20px;
    position:fixed;
    left: 40%;
    top: 40vh;
    font-size: 40px;
    border-radius: 50%;
    transform: scale(1.5);
    color:  rgb(14, 88, 56);
    opacity: 60%;
    box-shadow: 0px 0px 10px  ;
}

#minav{
    width: 100%;
    height: 40px;
    padding: 15px 0px;
    text-align: end;
    background-color: rgba(67, 154, 154, 0.484);
    z-index: 5;
    position: fixed;
}
#minav>h1{
    position: absolute;
    font-size: 30px;
    text-decoration: underline;
    font-weight: 600;
    color: rgb(131, 171, 205);
}
#superior-nab{
    color: rgb(244, 238, 255);
    font-size: 20px;
    font-weight: 550;
    margin: 10px;
    margin-left: 20px;
    text-decoration: none;
}
#superior-nab:hover{
text-decoration: underline;
}
.show-nav2{
    display: none;
}

.sss{
    display: none;
}
#navbar{
    background-color: rgb(26, 65, 77);
    color: rgb(70, 94, 116) ;
    border: solid 1px white;
    position: fixed;
    top:70px;
    left: -900px;
    font-size: 30px;
    width: 400px;
    height: 89vh;
    z-index: 2;
    overflow-y: scroll;
    transition: 1s;
    
}
#navbar::-webkit-scrollbar{
    background-color: transparent;
}
#navbar>a{
    margin-top: 20px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    color: aliceblue;
}
#navbar>a>div{
    width: 100%;
    height: 40px;
    padding-top: 5px;
    margin: 7px 0px;
    background-color: rgba(34, 71, 71, 0.484);
}
#url1>div{
    background-image: linear-gradient(0deg, rgb(100, 170, 90) 0%, #042e52 100%);
}
#url1>div:hover{
    background-image: linear-gradient(180deg, rgb(100, 170, 90) 0%, #042e52 100%);
}
#url{
    background-color:#0b3d69;
    font-size: 1;
    color: aliceblue;
}
#navbar>a>div:hover{
    background-color: rgba(64, 125, 125, 0.685); 
}

main{
    position: relative;
    top: 70px;
    font-size: 20px;
}
.btn{
    display: none;
}

.btn2{
    display: block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: aqua;
    font-weight: 600;
    position: fixed;
    transform: scale(1.3);
    animation: alert 3.5s linear infinite;
    z-index: 6;
    left: 0.7%;
    top: 12%;
}
section{
    margin-top: 100px;
    margin-bottom: 20px;
}
section>header{
    font-size: 50px;
    font-weight: 600;
}
.text-0{
    font-size: 25px;
    margin: 10px;
}
.text-1::first-letter{
    color: rgb(18, 139, 139);
    font-size: 40px;
    font-weight: 550;
}
a{
    color: #042e52;
}
a:hover{
    text-decoration: none;
    color: #0b3d69;
}
#for__htmlimage>img{
    width:60%;
    height: auto;
    object-fit: cover;
    position: relative;
    left: 20%;
    text-align: center;
}
#for__cssimage>img{
    width:60%;
    height: auto;
    object-fit: cover;
    position: relative;
    left: 20%;
    text-align: center;
}
#for-javaScriptimg>img{
    width:60%;
    height: auto;
    object-fit: cover;
    position: relative;
    left: 20%;
    text-align: center;
}
#for-FStack>img{
    width:40%;
    height: auto;
    object-fit: cover;
    position: relative;
    left: 20%;
    text-align: center;
    object-fit: cover;
}

#uni{
    color: rgb(152, 234, 255);
}
.mensaje{
    background-color: #003e75c8;
    position: relative;
    width: 60%;
    top: 80px;
    margin: auto;
    text-align: center;
    border-radius: 7px;
}
footer{
    position: relative;
    top: 111px;
    width: 100%;
    height: 400px;
    background-color: rgba(40, 57, 74, 0.728);
    display: grid;
    grid-template-columns:225px auto auto ;
}
footer>header{display: none;}
.foot-link{
   color: aliceblue;
}
h3{
    font-size: 30px;
}
.redes{
    position: absolute; 
}

.foo{
    text-align: center;
}

@media screen and (max-width:777px) {
    .btn{
        display: block;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background-color: aqua;
        font-weight: 600;
        position: fixed;
        transform: scale(1.3);
        animation: alert 3s linear infinite;
        z-index: 6;
        left: 96%;
        top: 2%;
    }

    .btn2{
        display: block;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background-color: aqua;
        font-weight: 600;
        position: fixed;
        transform: scale(1.3);
        animation: alert 3.5s linear infinite;
        z-index: 6;
        left: 0.7%;
        top: 2%;
    }
    #minav{
        width: 99.5%;
        height: 100vh;
        text-align: center;
        position: fixed;
        display: flex;
        flex-direction: column;
        text-decoration: underline;
        transition: 0.5s;
        top: -900px;
    }
    #minav>h1{
        position: relative;
        margin-bottom: 30px;
    }
    #navbar{
        top:0px;
        width: 300px;
        height: 100vh;
        z-index: 2;
        transition: 0.5s;
    }
    .sss{
        display: block;
        position: fixed;
        font-size: 30px;
        text-decoration: underline;
        font-weight: 600;
        color: rgb(131, 154, 176);
        left: 20%;
        transition: 0.6s;
        
    }
    
    #navbar>a{
        margin-top: 20px;
        text-decoration: none;
        font-size: 20px;
        font-weight: 700;
        color: aliceblue;
    }
    #navbar>a>div{
        width: 100%;
        height: 40px;
        padding-top: 5px;
        margin: 4px 0px;
        background-color: rgba(34, 71, 71, 0.484);
    }
    .show-nav2{
        display: block;
    }
    #for-FStack>img,#for-javaScriptimg>img,#for__cssimage>img,#for__htmlimage>img, #for__htmlimage>img{
        width: 100%;
        height: auto;
        left: 0px;
    }
    .mensaje{
        background-color: #042e52;
        width: 98%;
    }
    footer{
        height: auto;
        grid-template-columns:  auto;
        grid-template-rows: auto auto auto;
    }


}


@keyframes alert {
    0%{
        background-color: aqua;
    }50%{
        background-color: red;
    }90%{
        background-color: blue;
    }100%{
        background-color: aqua;
    }   
}