style

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
:root {
 /* cor para o fundo da pagina */
 --background-color: #0468BF;
 /* cor dos icons */
 --color-icons: #353D3F;
 /* cor das bordas */
 --color-bordes: #05C7F2;
 /* cor da section */
 --color-section: #0487D9;
 /* cor do botao */
 --color-buttom: #0468BF;
 /* cor do texto */
 --color-text: #000;
 /* cor de fundo de uma pagina */
 --color-input: #FFF;
}
* {
 margin: 0%;
 padding: 0%;
 font-family: 'Roboto', sans-serif;
 box-sizing: border-box;
}
body {
 background-color: var(--background-color);
 display: flex;
 color: var(--color-text);
}
h1 {
 margin-top: 10px;
 text-align: center;
}
hr {
 height: 4px;
 border: solid 1px var(--color-bordes);
 background-color: var(--color-bordes);
}
section {
 border: solid 3px var(--color-bordes);
 margin-top: 30px;
 height: 700px;
 width: 500px;
 margin-left: 30%;
 background-color: var(--color-section);
 border-radius: 4px;
 /* box-shadow: 2px 2px 2px 2px black; */
}
a {
 cursor: pointer;
}
i {
 margin-left: 10px;
 color: var(--color-icons);
}
.lua {
 font-size: 30px;
 height: 40px;
}
.github {
 font-size: 30px;
 height: 40px;
}
.linkdin {
 font-size: 30px;
 height: 40px;
}
nav {
 /* border: solid 5px black; */
 display:grid;
 width:60px;
 height: 300px;
 margin-left: 10px;
 margin-top: 200px;
}
.icon {
}
div {
 border-radius: 3px;
}
input {
 text-align: center;
 font-size: 15px;
 color: var(--color-text);
 background-color: var(--color-input);
}
input::placeholder {
 color: var(--color-text)
}
input:active {
	position:relative;
	top:1px;
}
.name {
 display: flex;
 border: solid 2px var(--color-bordes);
 height: 30px;
 width: 209px;
 margin-left: 28%;
 margin-top: 20px;
 margin-bottom: 40px;
}
.name input {
 width: 100%;
}
.altura {
 display: flex;
 border: solid 2px var(--color-bordes);
 height: 30px;
 width: 210px;
 margin-left: 28%;
 margin-bottom: 40px;
}
.altura input {
 width: 100%;
}
.peso {
 display: flex;
 border: solid 2px var(--color-bordes);
 height: 30px;
 width: 205px;
 margin-left: 28%;
 margin-bottom: 40px;
}
.peso input {
 width: 100%;
}
button {
 font:bold;
 font-size: 15px;
 height: 30px;
 width: 100px;
 margin-top: 10px;
 margin-left: 10px;
 border: solid 1px var(--color-bordes);
 margin-left: 40%;
 border-radius: 5px;
 background-color: var(--color-buttom);
 /* box-shadow: 2px 2px 2px black; */
}
button:hover {
	background-color: var(--quartaCor);
}
button:active {
	position:relative;
	top:1px;
}
#resultado {
 border: solid 5px var(--color-bordes);
 height: 300px;
 width: 400px;
 margin-left: 43px;
 margin-top: 20px;
 background-color: var(--color-section);
 /* box-shadow: 2px 2px 2px black; */
 cursor: context-menu;
}
#textoValue {
 margin-top: 50px;
 font: bold;
 font-size: 20px;
 padding: 10px;
 text-align: center;
}
#textoResultado {
 text-align: center;
 font-size: 30px;
}
/* estilizando buttom checkbox */
/* input[type=checkbox]{
 height: 0;
 width: 0;
 visibility: hidden;
}
label {
 cursor: pointer;
 text-indent: -9999px;
 width: 52px;
 height: 27px;
 background: grey;
 float: right;
 border-radius: 100px;
 position: relative;
}
label::after{
 content: '';
 position: absolute;
 top: 3px;
 left: 3px;
 width: 20px;
 height: 20px;
 background-color: white;
 border-radius: 90px;
 transition: 0.3s;
}
input:checked + label {
 background-color: var(--color-headings);
}
input:checked + label::after {
 left: calc(100% - 5px);
 transform: translateX(-100%);
}
label:active:after {
 width: 45px;
} */