161 lines
2.2 KiB
CSS
161 lines
2.2 KiB
CSS
/* Page default disposition */
|
|
body
|
|
{
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
border: 1px solid var(--link-bg-color);
|
|
|
|
font-size: calc(12px + 0.390625vw);
|
|
font-family: "Courier New";
|
|
|
|
width: 90vw;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Navbar, Contact, Error */
|
|
#error {
|
|
text-align: center;
|
|
}
|
|
|
|
#contact, #error
|
|
{
|
|
margin-top: 2vh;
|
|
}
|
|
|
|
nav ul, #contact ul
|
|
{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
nav a, #contact a, #error a
|
|
{
|
|
padding: 0.1rem 1rem;
|
|
margin: 0rem 0.3rem;
|
|
|
|
text-align: center;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
|
|
color: var(--link-color);
|
|
background-color: var(--link-bg-color);
|
|
border: 1px solid var(--link-bg-color);
|
|
}
|
|
|
|
nav a:hover, #contact a:hover, #error a:hover
|
|
{
|
|
color: var(--link-bg-color);
|
|
background-color: var(--link-color);
|
|
}
|
|
|
|
/* pre */
|
|
pre
|
|
{
|
|
color: var(--link-bg-color);
|
|
}
|
|
|
|
pre:hover
|
|
{
|
|
animation: fadePreColor 4s infinite alternate;
|
|
}
|
|
|
|
@keyframes fadePreColor {
|
|
0% {color: var(--lightred);}
|
|
25% {color: #ff5a5f;}
|
|
50% {color: #c81d25;}
|
|
100% {color: #370617;}
|
|
}
|
|
|
|
/* top */
|
|
.top
|
|
{
|
|
background-color: var(--link-bg-color);
|
|
color: var(--link-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.top:after {
|
|
content: "HTTPS://ARKA.ROCKS"
|
|
}
|
|
|
|
/* main */
|
|
main
|
|
{
|
|
margin: 2vw;
|
|
text-align: left;
|
|
}
|
|
|
|
main a
|
|
{
|
|
color: var(--link-bg-color);
|
|
}
|
|
|
|
/* titles */
|
|
h1, h2, h3, h4 {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
h1 {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
font-size: calc(34px + 0.390625vw);
|
|
}
|
|
|
|
main div.h1-content {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#contact ul
|
|
{
|
|
margin-bottom: 2vh;
|
|
}
|
|
|
|
@media screen and (min-width: 1000px)
|
|
{
|
|
div#content
|
|
{
|
|
max-width: 850px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 720px)
|
|
{
|
|
body
|
|
{
|
|
font-size: calc(10px + 0.390625vw);
|
|
}
|
|
|
|
h1
|
|
{
|
|
font-size: calc(24px + 0.390625vw);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 600px)
|
|
{
|
|
nav ul, #contact ul
|
|
{
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
h1
|
|
{
|
|
font-size: calc(14px + 0.390625vw);
|
|
}
|
|
|
|
}
|