Web/projects/starwars/css/high-contrast.css
2022-08-31 13:38:16 +02:00

139 lines
2.2 KiB
CSS

:root {
--darkblue: #00182a;
--yellow: #F0A500;
--blue: #233746;
}
@font-face {
font-family: 'Star Jedi';
src: url('../media/Starjedi.ttf') format('truetype');
}
@media screen {
body {
background-color: black;
color: yellow;
}
nav,
#nav {
background-color: var(--darkblue);
}
main,
#main {
background-color: var(--blue);
}
footer,
#footer {
background-color: var(--darkblue);
}
h1 {
font-family: "Star Jedi", 'Franklin Gothic Medium', fantasy;
text-align: center;
color: white;
}
h2 {
text-align: center;
margin-bottom: 1.5rem;
font-size: 4em;
color: white;
}
h3 {
color: white;
font-size: 3em;
}
h4 {
color: white;
font-size: 2.4em;
}
p {
font-size: 1.8em;
text-align: justify;
}
li {
color: yellow;
font-size: 2em;
}
a:visited {
color: rgb(224, 224, 0);
}
a:hover {
background-color: yellow;
color: black !important;
}
.active {
background-color: var(--blue);
}
.poster {
width: 100%;
}
.jedi {
height: 400px;
}
#switch-high-contrast {
height: 64px;
position: absolute;
right: 0;
top: 0;
padding: 4px;
border: 0;
background-color: transparent;
}
#switch-high-contrast img {
height: 100%;
}
.table {
color: yellow;
border-color: yellow;
font-size: 1.8em;
}
caption {
color: yellow;
}
form label,
legend {
font-size: 1.8em;
}
form span.fs-5 {
font-size: 2em !important;
}
form legend {
font-size: 2.4em;
font-weight: bold;
}
input[type="reset"],
input[type="submit"] {
width: 40%;
color: white;
font-weight: bold;
font-size: 1.8rem;
border: 0;
}
input[type="reset"]:hover,
input[type="submit"]:hover {
background-color: yellow !important;
color: black;
}
}