/* Scrollbar */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #ffbeea;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d6f7ff;
  border-radius: 5px;
}

body {
  background-color: transparent;
  text-transform: lowercase;
}

main {
  text-align: justify;
  letter-spacing: 0.1rem;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
}

body, main {
  cursor:url(image/cursor.gif), auto;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

a:hover {
  text-decoration: none;
  color: white;
  text-shadow: 0px 0px 7px rgba(217,48,147,1);
  cursor:url(image/cursorhover.gif), auto;
}

table {
  border-radius: 8px;
  border-spacing: 8px;
  width: 100%;
  margin-top: -12px;
  padding: 10px;
  table-layout: fixed;
  text-align: center;
  background: radial-gradient(circle, #ffe0f2 0%, #ffccea 100%);
}

.subheader {
  color: white;
  font-size: x-large;
  font-weight: bold;
  text-shadow: 0 0 10px #7cb2bf;
  text-align: center;
  position: relative;
  z-index: 1;
}

#layout {
  display: grid;
  grid-template-rows: repeat(6 auto);
  gap: 1em;
}

#part1 {
  grid-row: 1 / 2 ;
}

#part2 {
  grid-row: 2 / 3 ;
}

#part3 {
  grid-row: 3 / 4 ;
}

#part4 {
  grid-row: 4 / 5 ;
}

#part5 {
  grid-row: 5 / 6 ;
}

#part6 {
  grid-row: 6 / 7 ;
}

.container {
  border: 50px solid transparent; 
  border-image: url(image/ribbonborder.png);
  border-image-slice: 80;
}

.containertext {
  padding: 0px 5px 5px 5px;
  text-align: center;
}

.mirror {
  position: relative;
  text-align: center;
  filter: drop-shadow(0px 3px 4px rgba(230,156,201,1));
}

.mirrortext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: x-large;
  font-weight: bold;
  text-shadow: 0 0 10px #2386cb;
}