:root {
--softwhite: #f5f0f1;
--softerwhite: #FAF8F8;
--softblack: #242021;
--softerblack: #474143;
--showprimary: #ff8ab5;
--showaccent: #59e3ca;
}

html {
background-size: 20%;

}

@font-face {
src: url(https://file.garden/ZXJkOcYwORXn2d9V/magica.ttf);
font-family: mag;

}

@font-face {
src: url(https://file.garden/ZXJkOcYwORXn2d9V/glamourgirl.ttf);
font-family: fancy;

}

 .header {
position: sticky;
width: 94%;
background: #EEB1C3;
margin: 0px;
height: 50px;
padding: 20px 40px 10px 40px;
z-index: 100;
color: white;
border-radius: 0px 0px 60px 60px;
border: 3px solid var(--softblack);
border-top: none;
top: 0;
text-align: right;
 }

 .header #link {
background: var(--softwhite);
border: 1px solid var(--softblack);
border-radius: 10px;
padding: 5px;
margin-right: 11px;

 }

 a#link {
color: var(--softblack);
font-weight: 600;
transition: 0.5s color, 0.5s font-size;

 }

 a#link:hover {
color: #77CDE9;
font-size: 1.2em;

 }

body {
padding: 0px;
margin: 0px;
}

.body {
width: 85%;
background: var(--showprimary);
z-index:20;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
border: 3px solid var(--softblack);
padding: 10px;
border-radius: 10px;
font-family: mag;
}

.insidebody {
width: 98.75%;
padding: 5px;
border: 2px solid var(--softblack);
border-radius: 5px;
}

.insidebody#light {
background: #f5f0f1;
color: #242021;

}

.insidebody#dark {
border: 2px solid var(--softwhite);
background: var(--softblack);
color: var(--softwhite);
}

.logo {
width: 250px;
position: relative;
top: -10px;
transition: .5s transform;
float: left;

}

.logo:hover {
transform: scale(1.1);

}

.insidebody .head {
width: 98.75%;
border: 2px solid var(--softblack);
border-radius: 5px 5px 0px 0px;
padding: 4px;
background: var(--showprimary);
font-size: 1.9em;
font-weight: 700;
font-family: fancy;
}

.insidebody#light .head {
color: var(--softwhite);
text-shadow: -1px -1px 0 var(--softblack), 1px -1px 0 var(--softblack), -1px 1px 0 var(--softblack), 1px 1px 0 var(--softblack);
}

.insidebody#dark .head {
color: var(--softblack);
border: 2px solid var(--softwhite);
text-shadow: -1px -1px 0 var(--softwhite), 1px -1px 0 var(--softwhite), -1px 1px 0 var(--softwhite), 1px 1px 0 var(--softwhite);
}

.insidebody .head .small {
font-size: .6em;
color: var(--softblack);
text-shadow: none;
font-weight: 500;
font-family: mag;
}

.insidebody#dark .head .small {
color: var(--softwhite);

}
h1 {
 color: var(--showaccent);
 font-size: 1.2em;
 font-weight: 600;
 margin: 3px;
 font-family: fancy;
 text-shadow: -1px -1px 0 var(--softblack), 1px -1px 0 var(--softblack), -1px 1px 0 var(--softblack), 1px 1px 0 var(--softblack);

}
.insidebody#dark h1 {
text-shadow: -1px -1px 0 var(--softwhite), 1px -1px 0 var(--softwhite), -1px 1px 0 var(--softwhite), 1px 1px 0 var(--softwhite);

}

.insidebody .divider {
background-image: url(https://dividers.crd.co/assets/images/gallery09/49afd18b.png);
width: 100%;
height: 20px;
background-repeat: repeat-x;
margin-top: 5px;
margin-bottom: 5px;
}

.divider#small {
width: 385px;
margin-left: auto;
margin-right: auto;

}


.insidebody#dark .divider {
background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/image-4.png);

}
.gallery {
width: 880px;
height: 212px;
border: 2px solid var(--softblack);
padding: 5px;
margin-left: auto;
margin-right: auto;
background: var(--softerwhite);
text-align: center;
margin-top: 10px;

}

.insidebody#dark .gallery {
background: var(--softerblack);
border: 2px solid var(--softwhite);

}

.gallery img {
width: 210px;
height: 210px;
margin-right: 5px;
border: 1px solid var(--softblack);
border-radius: 3px;
object-fit: cover;

}


.gallery img:last-of-type {
margin-right: 0px;

}

.insidebody#dark .gallery img {
border: 1px solid var(--softwhite);

}

.replist {
width: 90%;
border: 2px solid var(--softblack);
padding: 5px;
background: var(--softerwhite);
border-radius: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;

} 

.insidebody#dark .replist {
border-color: var(--softwhite);
background: var(--softerblack);

}

td {
  border: 1px solid var(--softerblack);
  padding: 4px;   border-radius: 5px;
}
.insidebody#dark td {
border-color: var(--softerwhite);

}


tr:nth-child(even) {
background: var(--showaccent);
}

a {
color: var(--showprimary);

}

.insidebody#dark a {
filter: brightness(1.5);

}

@media only screen and (max-width: 600px) {
.body {
width: 400px;
}
}