W3C CSS Validator results for http://abelml.eu/ (CSS level 3)

Congratulations! No Error Found.

This document validates as CSS level 3 !

To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the XHTML you could use to add this icon to your Web page:

Valid CSS! 
<p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!" />
    </a>
</p>
Valid CSS! 
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
        alt="Valid CSS!" />
    </a>
</p>

(close the img tag with > instead of /> if using HTML <= 4.01)

If you like, you can download a copy of this image to keep in your local web directory, and change the XHTML fragment above to reference your local image rather than the one on this server.

If you would like to create a link to this page (i.e., this validation result) to make it easier to re-validate this page in the future or to allow others to validate your page, the URI is: 

http://jigsaw.w3.org/css-validator/validator?profile=css3&uri=http%3A%2F%2Fabelml.eu%2F
or
http://jigsaw.w3.org/css-validator/check/referer (for HTML/XML document only)

(Or, you can just add the current page to your bookmarks or hotlist.)

↑ Top

Warnings (1)

URI : http://abelml.eu/css/style.css

38 -webkit-box-reflect is a vendor extension

↑ Top

Valid CSS information

@font-face {
font-family : 'Open Sans';
font-style : normal;
font-weight : 400;
font-stretch : normal;
font-display : swap;
src : url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');
}
@font-face {
font-family : 'Open Sans';
font-style : normal;
font-weight : 800;
font-stretch : normal;
font-display : swap;
src : url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1x4gaVc.ttf) format('truetype');
}
@font-face {
font-family : 'Orbitron';
font-style : normal;
font-weight : 700;
font-display : swap;
src : url(https://fonts.gstatic.com/s/orbitron/v19/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1ny_CmBoWg2.ttf) format('truetype');
}
body {
font-family : 'Open Sans', sans-serif;
background : linear-gradient(to bottom, skyblue, white);
margin : 0 5%;
}
a:link, a:visited {
text-decoration : none;
}
a:hover {
text-decoration : underline;
}
img {
max-width : 100%;
height : auto;
}
header {
display : flex;
justify-content : space-between;
padding-bottom : 1.5rem;
border-bottom : 1px solid silver;
margin-bottom : 2.5rem;
}
h1 {
margin-left : 0.5rem;
font-size : 2.5rem;
font-family : 'Open Sans', sans-serif;
text-shadow : 0.2em 0.2em 0.2em grey;
}
.subheading {
display : inline-block;
font-size : 1.7rem;
font-family : 'Orbitron', sans-serif;
margin-top : 0.7rem;
text-shadow : none;
}
h2 {
text-shadow : 0.2em 0.2em 0.2em darkgrey;
margin-bottom : 2.5rem;
}
.ribbon {
display : inline-block;
position : relative;
color : #2f2f2f;
background-color : lightsteelblue;
font-style : oblique;
line-height : 3em;
padding : 0 2em;
margin-left : -2.5em;
box-shadow : 0 0.1em 0.2em grey;
border-radius : 0.5em 0.2em 1.5em 0;
}
.ribbon:before {
content : ' ';
position : absolute;
width : 1.4em;
left : -1.4em;
top : 0.8em;
border-width : 1.5em 0.4em;
border-style : solid;
border-color : lightsteelblue lightsteelblue lightsteelblue transparent;
}
.ribbon:after {
content : ' ';
position : absolute;
left : 0;
top : 100%;
border-width : 0.4em 0.4em;
border-style : solid;
border-color : grey grey transparent transparent;
}
header nav {
margin : 2rem 1rem 0 0;
}
header nav ul {
margin : 0;
}
header li {
display : inline-block;
}
.flags-languages {
margin-top : 0;
text-align : right;
}
.flags-languages li {
margin-left : 0.7rem;
}
.document-links {
text-align : right;
}
.document-links li {
margin-top : 1.5rem;
margin-left : 1.7rem;
}
.document-links a {
font-size : 1.2rem;
transition : transform 0.7s ease, background-color 0.5s linear, color 0.5s linear;
}
.document-links a:not(.highlight) {
display : inline-block;
background-color : lavender;
color : inherit;
padding : 0.5em;
border-radius : 0.2rem;
box-shadow : 0.2em 0.2em 0.3em darkgrey;
}
.document-links a:not(.highlight):hover {
text-decoration : none;
background-color : cadetblue;
color : white;
border : none;
transform : scale(1.3);
}
.document-links .highlight {
display : inline-block;
padding : 0.5em;
border-radius : 0.2rem;
box-shadow : 0.2em 0.2em 0.3em darkgrey;
text-decoration : none;
border : none;
transform : scale(1.3);
background-color : dodgerblue;
font-weight : bold;
cursor : auto;
color : white;
margin : 0 0.5rem;
}
main {
position : relative;
max-width : 90%;
background-color : white;
margin : 0 auto;
padding : 0.5rem 2.5rem 1rem;
border-radius : 0.5rem;
box-shadow : 0.5em 0.5em 0.5em silver;
}
body > footer {
border-top : 1px solid silver;
margin : 3rem auto 2rem;
line-height : 5rem;
padding : 2rem 0 0 2rem;
}
body > footer a {
margin-right : 1rem;
}
body > footer a:hover {
text-decoration : none;
}
body > footer img {
display : inline-block;
border-style : none;
vertical-align : middle;
}
main footer {
text-align : justify;
font-size : small;
margin-top : 1rem;
}
main nav {
margin-bottom : 2.5rem;
}
main nav ul {
padding : 0;
margin : 0;
text-align : center;
}
main nav li {
display : block;
background-color : royalblue;
box-shadow : 0.2em 0.2em 0.4em silver;
padding : 0.1em 1em 0.1em 0.3em;
margin-bottom : 1rem;
margin-right : 0;
}
main nav a {
display : inline-block;
color : white;
padding : 0.4em;
box-shadow : none;
border-radius : 0.2em;
}
strong {
font-weight : normal;
}
@media only screen and (min-width: 640px) {
main nav {
float : left;
margin-right : 2.5rem;
}
main nav li {
text-align : left;
}
}
.parts-container {
height : 23rem;
margin-bottom : 2rem;
overflow-y : scroll;
scroll-behavior : smooth;
scroll-snap-type : y mandatory;
}
.parts-container > section {
scroll-snap-align : start;
min-height : 23rem;
}
.parts-container > section:first-child {
margin-bottom : 2rem;
}
@media only screen and (max-width: 980px) {
.parts-container {
height : 27rem;
}
.parts-container > section {
min-height : 27rem;
}
}
@media only screen and (max-width: 780px) {
.parts-container {
height : 32rem;
}
.parts-container > section {
min-height : 32rem;
}
}
@media only screen and (max-width: 690px) {
.parts-container {
height : 38rem;
}
.parts-container > section {
min-height : 38rem;
}
}
dt {
display : inline-block;
margin-right : 0.5rem;
}
dt + dt {
padding-left : 0.5rem;
border-left : 1px solid slategrey;
}
dd {
margin-top : 0.5rem;
margin-bottom : 1rem;
}
summary {
padding-right : 0.5rem;
margin-bottom : 0.3rem;
}
.explain {
font-size : 0.9rem;
text-align : justify;
}
dl + .explain {
margin-top : 1.7rem;
}
main li {
margin-bottom : 0.5rem;
}
.img-sign {
margin : 2em 0 2em 2em;
}
.img-mouse {
max-width : 50%;
margin-right : 2em;
margin-top : 1em;
float : right;
}
.img-pigeon {
display : inline-block;
vertical-align : top;
}
form {
margin-top : 1rem;
display : inline-block;
min-width : 70%;
}
@media only screen and (max-width: 950px) {
form {
min-width : 60%;
}
}
label {
margin-right : 1rem;
}
input {
margin-bottom : 1rem;
}
input[type="submit"] {
display : block;
font-size : large;
height : 2rem;
padding : 0 0.5em;
}
input[type="email"] {
min-width : 30%;
}
textarea {
height : 12rem;
margin-top : 0.5rem;
width : 95%;
resize : none;
}
input[type="email"]:not([disabled]):hover, textarea:not([disabled]):hover {
background-color : aliceblue;
box-shadow : 0.2em 0.2em 0.2em silver;
}
.red {
color : red;
}
.overlay {
position : fixed;
top : 0;
left : 0;
right : 0;
bottom : 0;
margin : 0;
background-color : rgb(50, 50, 50, 0.5);
color : inherit;
}
.loader {
position : absolute;
top : 50%;
left : 50%;
border : white solid 0.8em;
border-radius : 50%;
border-top : 0.8em solid lightblue;
border-bottom : 0.8em solid lightblue;
width : 2.5em;
height : 2.5em;
animation : spin 2s linear infinite;
}
@keyframes spin {
0% {
transform : rotate(0deg);
}
100% {
transform : rotate(360deg);
}
}
dialog {
top : 4rem;
width : 50%;
background-color : rgb(180, 255, 180, 0.8);
border : grey solid 0.2em;
border-radius : 0.5em;
padding-left : 2em;
}
dialog blockquote {
background-color : transparent;
color : midnightblue;
}
dialog button {
height : 2rem;
font-size : large;
padding : 0 0.5em;
margin-top : 0.5rem;
}
.close-icon {
position : absolute;
right : 0.9em;
top : 0.7em;
width : 1.4em;
height : 1.4em;
}
.close-icon:hover {
cursor : pointer;
}
.close-icon:before, .close-icon:after {
position : absolute;
content : ' ';
height : 1.7em;
left : 0.5em;
width : 0.3em;
background-color : #333;
}
.close-icon:before {
transform : rotate(45deg);
}
.close-icon:after {
transform : rotate(-45deg);
}

↑ Top