* {
  cursor: url("data:image/svg+xml,%3Csvg width='42px' height='42px' viewBox='0 0 30.00 30.00' id='Layer_1' version='1.1' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23000000' stroke='%23000000' stroke-width='0.75'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23b78f94;%7D .st1%7Bfill:%2317B978;%7D .st2%7Bfill:%238797EE;%7D .st3%7Bfill:%2341A6F9;%7D .st4%7Bfill:%2337E0FF;%7D .st5%7Bfill:%232FD9B9;%7D .st6%7Bfill:%23F498BD;%7D .st7%7Bfill:%23FFDF1D;%7D .st8%7Bfill:%23C6C9CC;%7D %3C/style%3E%3Cpath class='st6' d='M16.3,11.2c0-1.1-0.5-2.2-1.3-3L8.8,2.5C8.5,2.2,8,2.2,7.7,2.5c-0.3,0.3-0.3,0.8,0,1.1L12.4,9c0,0,0,0,0,0 c0.2,0.2,0.2,0.6,0,0.9c-0.2,0.2-0.6,0.2-0.9,0l0,0L6.1,5.1C5.8,4.8,5.3,4.8,5,5.1l0,0C4.7,5.4,4.7,5.9,5,6.2l4.8,5.5 c0.2,0.2,0.2,0.6,0,0.9c-0.2,0.2-0.6,0.2-0.9,0L3.5,7.8c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1L8,15.1 c0.8,0.9,2,1.4,3.2,1.3l1.6-0.1c0.6,0,1.2,0.2,1.6,0.7l8.8,9.9c1,1.2,2.8,1.2,3.9,0.1l0,0c1.1-1.1,1-2.9-0.1-3.9L17,14.2 c-0.4-0.4-0.7-0.9-0.7-1.5V11.2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") 16 16, pointer;
}

body {
  background-color: #efe8d6;
  color: #3F2305;
  font-family: "Merriweather";
  padding: 0;
  margin: 0;
  height: 100%;
}

.navbar {
  overflow: hidden;
}

.navbar a {
  float: left;
  color: #3F2305;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdownbutton {
  background-color: #efe8d6;
  font-size: 30px;
  border: none;
  outline: none;
  padding: 10px;
  transition: 1s transform 0.4s;
}

.dropdownbutton:hover { 
  transform: rotate(180deg);
  transition-delay: 0s;
}

.dropdown {
  float:left;
  overflow: hidden;
}

.dropdowncontent {
  height: 0px;
  position:absolute;
  min-width: 125px;
  z-index: 1;
  transition: all 1s ease-in-out;
  overflow-y: hidden;
  background-color: #ded8cd;
}

.dropdown .dropdownbutton {
  border: none;
  outline: none;
  font-family: inherit;
  margin: 0;
}


.dropdowncontent a {
  display: block;
  text-align: left;
  float: none;
}

/* greyout links on hover */
.dropdowncontent a:hover {
  background-color: lightgrey;
}

/* display dropdown menu on hover */
.navbar:hover > .dropdowncontent {
  height: 144px;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  text-align: center;
  font-size: 69px;
}

.middle {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
}

.shape {
  width: 200px;
  height: 200px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 100px;
  background-color: coral;
}

.bottom {
  position: absolute;
  background-color: lightcoral;
  bottom: 0%;
  padding: 0px;
  margin: 0px;
  width: 100%;
  text-align: center;
}

.bottom > p {
  margin: 0px;
}

.loaderbtn:hover + .loader{
  display:grid;
}

/* loader spinny thing */
.loader {
  --s: 25px;
  
  --_d: calc(0.353*var(--s));
  width: calc(var(--s) + var(--_d));
  aspect-ratio: 1;
  display: none;
}

.loader:before,
.loader:after {
  content:"";
  clip-path:polygon(var(--_d) 0,100% 0,100% calc(100% - var(--_d)),calc(100% - var(--_d)) 100%,0 100%,0 var(--_d));
  background:
    conic-gradient(from -90deg at var(--s) var(--_d),
     #fff 135deg,#666 0 270deg,#aaa 0);
  animation: l4 1.2s infinite;
}
.loader:before {
  z-index: 1;
  margin-bottom: calc(var(--_d)/-2 - 1px);
}
.loader:after {
  margin-top: calc(var(--_d)/-2 - 1px);
  animation-delay: 0.6s
}
@keyframes l4{
  0%     {transform: translate(0)}
  16.67% {transform: translate(-10px)}
  33.33% {transform: translate(10px)}
  50%,
  100%   {transform: translate(0)}
}