I made a little webpage with css, the issue that i have is with root:
pseudo-class, the issue is that i (somehow) have to repeat the root
twice in my stylesheet in order for it to work and when i do remove one root
the effect (of the properties applied on the root) disappears , if you have time please take a quick look at my css below:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
font-family: 'Roboto', sans-serif;
:root {
background-color: yellow;
}
:root {
--main-color: #84fa8e;
--secondary-color: #02a678;
--tertiary-color: #027eb3;
font-family: 'Roboto', sans-serif;
}
@media (max-width: 480px) {
#title {
text-align: center;
font-size: 2em;
margin-top: 0em;
color: var(--tertiary-color);
}
main {
margin: 0;
background-color: var(--main-color);
border-radius: 0px;
padding-top: 3.5em;
}
body {
margin: 0;
}
#img-caption {
color: var(--secondary-color);
text-align: center;
margin: 0 1.2em 0 1.2em;
font-size: .8em;
}
}
@media (min-width: 480px) {
main {
margin: 1.8em .1em 1.8em .1em;
background-color: var(--main-color);
border-radius: 5px;
padding-top: 3.5em;
}
/*Animation*/
#image:hover {
animation-duration: .5s;
animation-name: scaleonehalf;
animation-fill-mode: forwards;
}
@keyframes scaleonehalf{
100% {
transform: scale(1.1);
}
}
/*Animation*/
#title {
text-align: center;
font-size: 2.5em;
margin-top: 0em;
color: var(--tertiary-color);
}
#img-caption {
color: var(--secondary-color);
text-align: center;
margin: 0 1.2em 0 1.2em;
}
}
/*Header*/
header p {
color: var(--secondary-color);
text-align: center;
}
/*Header*/
/*###############################################*/
/*Image-div*/
#img-div {
background-color: white;
margin: 0em 1em 0 1em;
padding: .3em .7em .25em .7em ;
}
#image {
width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 1em;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
display: block;
}
#img-div figure {
margin: 0;
padding-bottom: 1em;
}
/*Image-div*/
/*Tribute Info*/
#tribute-info h2 {
text-align: center;
font-size: 1.15em;
margin: 3em 0 3em 0;
color: var(--tertiary-color);
}
#tribute-info ul {
padding: 0 2em 0 3.7em;
line-height: 1.5em;
color: var(--tertiary-color);
max-width: 34em;
margin: auto;
}
#tribute-info ul li {
margin-top: 1.15em;
margin-bottom: 1.15em;
text-shadow: .02em .01em 0.1em lightgray;
}
#paragraphdiv{
padding: 0 1.5em 0 1.5em;
}
#tribute-info p {
margin: 3.5em 0 3.5em 0;
color: var(--secondary-color);
text-shadow: .01em .01em 0.07em var(--tertiary-color);
max-width: 34em;
display: block;
margin-left: auto;
margin-right: auto;
}
/*Tribute Info*/
/*Footer*/
footer {
padding: 0 0 1.8em 0;
}
footer p {
text-align: center;
margin: 0 1em 0 1em;
width: auto;
font-size: 1.2em;
font-weight: bold;
color: var(--secondary-color);
text-shadow: .02em .01em 0.1em lightgray;
}
footer p a {
color: var(--tertiary-color);
text-shadow: none;
}
footer p a:hover {
animation-name: footerpa;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes footerpa {
100% {
transform: scale(2);
color: rgba(155, 155, 0, .7);
}
}
Link below to the webpage