footer{
text-align:center;
width:var(--pw1);color:var(--tx1);
display:grid;
grid-template-columns:repeat(2,1fr);
margin:var(--gap) auto;
}
.footer-column{
display:flex;
flex-direction:column;
text-align:left;
margin-bottom:22px;
}
.footer-column h3{
color:var(--tx3);
font-size:30px;
font-weight:640;
text-transform:uppercase;
letter-spacing:.5px;
margin:10px 0;
font-family:var(--ff2);
}
.footer-column ul{
list-style:none;
padding:0;
margin:0;
}
.footer-column ul li{
margin-bottom:14px;
}
.footer-column ul li a{
color:var(--tx1);font-size:19px;
font-weight:400;
}
.footer-column ul li a:hover{
color:var(--cl1);
text-decoration:underline;
text-decoration-thickness:1px;
}
.ad-placeholder{
width:var(--pw1);
margin:0 auto var(--gap);
height:100px;
border:1px solid var(--bc2);
color:var(--tx2);
display:flex;
justify-content:center;
align-items:center;
border-radius:var(--br1);
grid-column:1/-1;
}
.copyright{
font-size:18px;
font-weight:400;
margin:var(--gap) auto 0;
padding:0 calc((var(--iz1) / 2) - 2px);
height:var(--iz1);
width:fit-content;
color:var(--tx3);
background-color:var(--foo);
border-radius:var(--br0);
box-shadow:var(--fbs);
border:var(--bw1) solid var(--bc1);
grid-column:1/-1;
display:flex;
align-items:center;
justify-content:center;
gap:0.3em;
}
.copyright a{
font-weight:400;
color:var(--tx3);
}
.copyright a:hover{
color:var(--cl1);
text-decoration:underline;
text-decoration-thickness:1px;
}
.theme-toggle,
.top,
.all{
width:var(--iz1);
height:var(--iz1);
background-color:var(--foo);
box-shadow:var(--fbs);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
margin:var(--gap) auto 0;
grid-column:1/-1;
}
.theme-toggle svg{
width:28px;
height:28px;
stroke:var(--tx3);
transition:transform .3s ease;
}
.theme-toggle:hover svg{
stroke:var(--tx1);
transform:rotate(20deg);
}
.top svg,
.all svg{
width:28px;
height:28px;
}
.top svg{
stroke:var(--tx3);
}
.top:hover svg{
stroke:var(--tx1);
}
.all svg{
fill:var(--tx3);
}
.all:hover svg{
fill:var(--tx1);
}