64 lines
1.3 KiB
CSS
64 lines
1.3 KiB
CSS
|
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Yeseva+One&display=swap');
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--primary: hsla(220, 60%, 50%, 1);
|
||
|
|
--hover: hsl(240, 50%, 22%);
|
||
|
|
--secondary: hsla(194, 52%, 67%, 1);
|
||
|
|
--accent: hsla(15, 99%, 57%, 1);
|
||
|
|
--light: hsla(90, 8%, 85%, 1);
|
||
|
|
--mutedBlack: hsla(0, 0%, 0%, 0.25)
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-size: 1em;
|
||
|
|
font-weight: 400;
|
||
|
|
font-family: "Fira Sans", sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1, h2 {
|
||
|
|
font-weight: 400;
|
||
|
|
font-family: "Yeseva One", cursive;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
outline: none;
|
||
|
|
border: none;
|
||
|
|
padding: 14px 28px;
|
||
|
|
cursor: pointer;
|
||
|
|
-webkit-border-radius: 1em;
|
||
|
|
-moz-border-radius: 1em;
|
||
|
|
border-radius: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btnPrimary {
|
||
|
|
background-color: var(--primary);
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
div.formControl {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 0.5em;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
form .formControl input:not([type="submit"]), form .formControl textarea {
|
||
|
|
width: 100%;
|
||
|
|
border: 4px solid var(--primary);
|
||
|
|
background: 0 0;
|
||
|
|
outline: 0;
|
||
|
|
-webkit-border-radius: 1em;
|
||
|
|
-moz-border-radius: 1em;
|
||
|
|
border-radius: .5em;
|
||
|
|
padding: 0 .5em;
|
||
|
|
height: 3em;
|
||
|
|
}
|
||
|
|
|