:root { --backg1: hsl(212, 80%, 50%); --backg2: hsl(212, 60%, 50%); --backg3: hsl(212, 50%, 50%); --button1:hsl(212, 78%, 42%); /* #1867c0; */ --color1: hsl(212, 38%, 85%); --color2: hsl(212, 48%, 85%); --color3: #bae67e; --color4: #ffcc66; --color5: #c3a6ff; --color6: #5ccfe6; --backg4: #2f3b54; } body { /* background-color: var(--backg2); */ background-color: var(--backg4); /* width: calc(100% - 17px); */ color: var(--color2); font-family: 'Roboto', 'Open Sans', 'Poiret One'; padding: 0 10px; overflow-x: hidden; /* overflow-y: scroll; */ } /* to allow overflow properties to work everywhere as they do not work on on mobile */ #body-wrapper { display: block; position: relative; margin: 0; padding: 0; width: 100vw; min-height: 100vh; overflow-x: hidden; } noscript { position: fixed; /* display: flex; */ width: 100vw; /* height: 100vh; */ text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); /* justify-content: center; align-items: center; */ } noscript p { position: relative; max-width: 95vw; top: -100px; } /* #noscript-wrapper p { width: 100vw; } */ h1, time { text-align: center; color: var(--color5); } time { display: block; /* time cannot align without display:block */ position: relative; /* left: 50%; transform: translateX(-50%); */ } article { position: relative; left: 50%; transform: translateX(-50%); max-width: 600px; /* margin: 0 10px 5px 10px; padding: 0 10px; */ font-size: 1.1em; } /* p { text-justify: inter-word; text-justify: inter-character; text-justify: auto; } */ ul { padding-inline-start: 20px; /*user-agent default is 40px */ } a { color: var(--color3); } code { color: var(--color4); font-size: 1.15em; margin-left: 2px; margin-right: 3px; padding-left: 3px; padding-right: 3px; line-break: auto; } /************************************** MEDIA QUERIES: **************************************/ @media (orientation: landscape) { } @media (max-height: 770px) { } @media (max-width: 770px) { } @media (orientation: landscape) and (max-width: 770px) { } @media (orientation: landscape) and (max-height: 770px) { }