body {
font-family: "Times Newer Roman", serif;
background-color: #fff;
color: #000;
padding: 20px;
margin-inline-start: 40px;
}
.big-title {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25vw;
color: blue;
pointer-events: none;
user-select: none;
white-space: nowrap;
padding: 50px;
}
.back-button {
position: absolute;
top: 20px;
left: 20px;
background: 0 0;
border: none;
font-size: 24px;
cursor: pointer;
color: #00f
}
.footer {
  position: inherit;
    bottom: 0px;
}
a:link,
a:visited {
 text-decoration: none;
 color: #00f;
 cursor: pointer
}

a:hover {
 text-decoration: none;
 color: #00f;
 cursor: pointer;
 font-style: italic;
}

#backToTopButton {
   display: none;
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 50px;
   height: 50px;
   border: 1px solid #00f;
   border-radius: 50%;
   background-color: #fff;
   color: #00f;
   cursor: pointer;
   font-size: 24px;
   z-index: 1000
}

#backToTopButton:hover {
   background-color: #00f;
   color: #fff
}
.dark-mode #backToTopButton {
   border: 1px solid white;
   background-color: black;
   color: white;
   cursor: pointer;
   font-size: 24px;
}

.dark-mode #backToTopButton:hover {
   background-color: white;
   color: black;
}
.dark-mode .mode-toggle {
    color: rgba(255, 255, 255, 1);
}
.dark-mode {
    background-color: #000000;
    color: white;
}

.dark-mode .big-title {
    color: rgba(255, 255, 255, 1);
}
.dark-mode h1 {
    color: rgba(255, 255, 255, 1);
}
.dark-mode .header {
    border-bottom: 1px solid white;
}

.dark-mode a:link, .dark-mode a:visited {
    color: white;
}

.dark-mode a:hover {
    color: white;
}

@media (max-width:600px) {
.big-title {
font-size: 14vw;
top: 50%;
white-space: nowrap;
padding: 20px
}
body {
/* padding: 50px; */
margin-inline-start: 10px;
}
span {
margin-left: 20px;
}
}
@media (max-width:400px) {
.big-title {
font-size: 5em;
top: 50%;
white-space: nowrap;
padding: 20px
}
body {
padding: 20px;
margin-inline-start: 5px;
margin-inline-end: 5px
}
}