frog-website/stylesheet.css

80 lines
1.2 KiB
CSS

:root {
--color: #161616;
--primary-color: #E04855;
--on-primary: white;
--dark: #161616;
--on-dark: #E04855;
--space-xsmall: 5px;
--space-small: 10px;
--space-medium: 20px;
--space-large: 30px;
--width: 1100px;
--fz-1: 2rem;
--fz-2: 1.5rem;
--fz-3: 1.125rem;
}
body {
background-image: url(img/background.jpg);
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
text-align: justify;
line-height: 25px;
color: var(--color);
}
h1{
font-family: "Knewave", system-ui;
text-transform: uppercase;
text-align: center;
margin: var(--space-xsmall);
}
p {
margin-bottom: var(--space-medium);
}
.content {
margin: 2em auto 0 auto;
max-width: 1100px;
}
.separator {
width: 150px;
height: 125px;
display: block;
margin-left: auto;
margin-right: auto;
background-image: url(img/frog.png);
}
.separator:hover {
background-image: url(img/frog-hover.png);
}
.separator:active {
background-image: url(img/frog-cwak.png);
}
.fc-right-menu {
text-align: right;
}
@media (max-width: 47.999em) {
.fc-right-menu {
text-align: left;
}
toggle-menu-button {
display: block;
}
}