@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fira+Code:wght@300..700&family=Geist+Mono:wght@100..900&family=Lexend+Giga:wght@100..900&family=Orbitron&family=Roboto+Slab:wght@100..900&display=swap');

* {
    box-sizing: border-box;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.body{
    background-color: #0C1B33;
}

.text-color{
    color: white;
}

input{
    background-color: #060d1a !important;
    color: white !important;
}
input::placeholder{
    color: white !important;
    font-family: "Orbitron", serif;;
}
textarea{
    background-color: #060d1a !important;
    color: white !important;
}
textarea::placeholder{
    color: white !important;
    font-family: "Orbitron", serif;;
}


/*header stile*/
#admin-botton{
    font-size: 8px;

}
.gym-link{
    border-right: solid #ffffff !important;
}

/*Image style starts*/
.bg-image{
    background-image: url('backgroindspic/PC-BG.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 90%;
    position: relative;
}
@media(max-height: 900px){
    .bg-image{
        height: 50%;
    }
}
.content {
  position: absolute;
  color: rgb(255, 255, 255);
  background-color: rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 100%;
  border-radius: 10px;
  font-family: "Nanum Gothic Coding", monospace;
  font-weight: 400;
  font-style: normal;
}
/*Image style ends*/




/*Show History starts*/
.little-resume{
    font-size: 20px;
    font-family: "Orbitron", serif;
    font-weight: 400;
    font-style: normal;
}


.bg-my-h2-top-color{
    background-color: #2d3e6d;
    box-shadow: 4px 7px 10px 0.9px;
    
}
.bg-my-h2-top-color:hover{
    box-shadow: 2px 5px 10px 0.9px;
}
.bg-my-h2-top-color:hover:active{
    box-shadow: 2px 5px 10px 0.9px;
}

.border{
    border-color: #14FFEC;
}
/*Font*/

.h2-titles{
    color:white;
    font-size: 220%;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.h2-color{
    color: white;
    font-size: 100%;
    text-align: justify;
    
}
@media (max-width: 575px){
    .margin-sm-leftlright{
        margin-left: 5%;
        margin-right: 5%;
    }
}
/*Show Hitory Ends*/

/*Animation history starts*/
[data-animation="work"] {
    opacity: 0;
    transform: translate(-20%);
    transition: .6s ease-in .3s;

    --opacity: 1 ;
    --transform: translate(0);

}
[data-animation="history"] {
    opacity: 0;
    transform: translate(20%);
    transition: .6s ease-in .3s;

    --opacity: 1 ;
    --transform: translate(0);

}
[data-animation="studies"] {
    opacity: 0;
    transform: scale(0);
    transition: .6s ease-in .3s;

    --opacity: 1 ;
    --transform: scale(1);

}
.unset {
    opacity: var(--opacity);
    transform: var(--transform);
}

@media(max-width: 767px){
}

/*Animation history starts*/

/*calculator start*/

.cal-title{
    font-family: "Nanum Gothic Coding", monospace;
    font-weight: 400;
    font-style: normal;
}

.cal-desing{
    background-color: rgb(163, 189, 199);
}

.inputs-desing{
    border: 3px double rgb(81, 167, 238);
    border-radius: 5px;
    box-shadow: 3px 3px 10px 2px;
}
.inputs-desing:hover{
    border: 2px double rgb(81, 167, 238);
    border-radius: 5px;
    box-shadow: 1px 1px 10px 0.5px;
    
}
.inputs-desing:focus{
    border: 2px double rgb(81, 167, 238);
    border-radius: 5px;
    box-shadow: 1px 1px 10px 0.5px;
}
.drop-font{
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.btn{
    box-shadow: 1px 1px 6px 0.1px;
    
   
}
.btn:hover{
    box-shadow: 1px 1px 6px 0.1px black;
   
}
.btn:focus{
    box-shadow: 1px 1px 6px 0.1px black;
   
}
.resultado-desing{
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.result-desing{
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.error-mensage{
    font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-style: normal;
}
/*Calculator end*/



/*history of calculator starts*/
.history-desing{
    background-color: #14FFEC;
    border: solid rgb(29, 53, 53);
    height: 141px;
    overflow: auto;
}
.top-history{
    background-color: white;
    border-bottom: solid black;
}
.backToTop{
    text-decoration: none;
    
}
/*History of calculator ends*/

/*Coments Start*/ 
/*
.coments-desing{
    background-color: #5D737E
}*/
/*Coment post start*/
.header-coment-section{
    font-size: 20px;
    font-family: "Orbitron", serif;
    font-weight: bolder;
    font-style: normal;
}
.placeHolder-stile{
    font-size: 20px;
    font-family: "Lexend Giga", serif;
    font-weight: bolder;
    font-style: normal;
}
/*Coment post end*/

.coment-name{
    font-family: "Orbitron", serif;
    font-weight: 900;
    font-style: normal;
    font-size: 13px;
    font-weight:bolder;
    border-left: solid 2px;
    
}
.coment-age{
    font-family: "Play", serif;
    font-weight: 900;
    font-style: normal;
    font-size: 17px;
    font-weight:bolder;
    border-left: solid 2px;
}
.coment-text{
    font-size: 15px;
    font-family: "Orbitron", serif;
    font-weight: 300;
    font-style: normal;
}
#send-botton-stile{
    background-color: #0C1B33;
    color: white;
    font-family: "Orbitron", serif;
    font-weight: 300;
    font-style: italic;
}
.coment-hr{
    color: rgb(55, 100, 4);
}






















/*Coments Ends*/