* {
  box-sizing: border-box;
}

body {
  margin: 0%;
  scroll-behavior: .5s;
}

.theme{
  --darkest: #580000;
  --dark: #aa1010;
  --primary: #dd0f0f;
  --secondary: #ff4a4a;
  --tertiary: #ff7e7e;
  --quaternary: rgb(255, 246, 246);
  background-color: var(--quaternary);
}

@font-face{
  font-family: "reem kufi";
  src: url(ReemKufi-Regular.ttf)
}

@font-face{
  font-family: "handwriting";
  src: url(Myhandwriting2-Regular.ttf)
}

.font2 {
  font-family: "reem kufi", "helvetica", cursive, sans-serif;
}

.header {
  color: #ffffff;
  background-color: white;
  background: rgb(2,0,36);
  background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
}

h1 {
  text-align: center;
  filter: brightness(100%);
  font-family: "reem kufi", "helvetica", cursive, sans-serif;
  font-size: 64px;
}

h2 {
  text-align: center;
  filter: brightness(100%);
  font-family: "handwriting", "helvetica", cursive, sans-serif;
  font-size: 36px;
}

h3 {
  text-align: center;
  filter: brightness(100%);
  font-family: "handwriting", "helvetica", cursive, sans-serif;
  font-size: 24px;
}

p {
  font-family: "handwriting", cursive, sans-serif;
  font-size: 18px;
}

.header2 {
  color: #ffffff;
  padding-top: 10%;
  padding-bottom: 10%;
  background: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%);
}

.center {
  align-content: center;
  align-items: center;
  align-self: center;
  text-align: center;
  -webkit-box-align: center;
}

.navbar {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.233);
  position: sticky;
  border-radius: 25px;
  height: 10%;
  width: 100%;
  z-index: 3;
  margin-top: 0.5%;
}

.navbar a {
  display: inline-block;
  text-align: center;
  align-items: center;
  align-content: center;
  text-decoration: none;
}

.navbar a.right {
  line-height: 50px;
  text-align: center;
  float: right;
  padding: 5px 25px;
  border-radius: 25px;
  height: 100%;
}

.navbar a.left {
  display: flex;
  align-items: center;
  line-height: 50px;
  text-align: center;
  float: left;
  padding: 0px 25px;
  border-radius: 25px;
  height: 100%;
}

.navbar a:hover {
  background-color: #0000000c;
  color: #dbdbdb;
}

#sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  background-color: var(--primary);
  overflow-x: hidden;
  transition: 0.5s;
}

#sidenav a {
  padding: 48px 0;
  text-decoration: none;
  font-size: 24px;
  color: var(--tertiary);
  display: block;
  transition: 0.3s;
}

#sidenav a:hover {
  color: var(--quaternary);
}

#sidenav #closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 64px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  #sidenav {
      padding-top: 15px;
  }
  #sidenav a {
      font-size: 18px;
  }
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

footer {
  overflow: auto;
  text-align: center;
  min-height: auto;
  width: 100%;
  height: 10%;
  position: absolute;
  padding-top: 5px;
  background: linear-gradient(120deg, var(--dark) 0%, var(--darkest) 100%);
}

footer img {
  padding: 1%;
  height: 90%;
}

.invert {
  filter: invert(100%);
}

.glow {
  color: #ffffff;
  text-align: center;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
  -moz-animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #ffffffb9, 0 0 20px #ffffff80, 0 0 30px #ffffff57;
  }
  to {
    text-shadow: 0 0 20px #ffffff, 0 0 30px #ffffffef, 0 0 40px #ffffffbd;
  }
}

.box {
  text-decoration: none;
  z-index: 2;
  height: max-content;
}

.row {  
  display: flex;
  flex-wrap: wrap;
  margin: 7%;
  margin-top: 3%;
  margin-bottom: 3%;
  align-content: center;
  align-items: center
}

.desc {
  margin: 5%;
}

.indent {
  text-indent: 50px;
}
#more {
  display: none;
}

.continue {
  top: 80%;
}

.draw-border {
  box-shadow: inset 0 0 0 4px var(--secondary);
  color: var(--secondary);
  transition: color 0.25s 0.0833333333s;
  position: relative;
  display: block;
}

.draw-border::before, .draw-border::after {
  border: 0 solid transparent;
  box-sizing: border-box;
  content: "";
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  right: 0;
}

.draw-border::before {
  border-bottom-width: 4px;
  border-left-width: 4px;
}

.draw-border::after {
  border-top-width: 4px;
  border-right-width: 4px;
}

.draw-border:hover {
  color: var(--tertiary);
}

.draw-border:hover::before, .draw-border:hover::after {
  border-color: var(--tertiary);
  transition: border-color 0s, width 0.25s, height 0.25s;
  width: 100%;
  height: 100%;
}

.draw-border:hover::before {
  transition-delay: 0s, 0s, 0.25s;
}

.draw-border:hover::after {
  transition-delay: 0s, 0.25s, 0s;
}

.btn {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1.5;
  font-size: 16px;
  padding: 10px 20px;
  margin: 4% auto;
}

.btn:focus {
  outline: transparent;
}

.gallery li{
  text-align:center;
  display:inline-block;
  list-style:none;
  position:relative;    
  background:#fff;    
  transition:all 0.8s ease;
  -o-transition:all 0.8s ease;
  -moz-transition:all 0.8s ease;
  -webkit-transition:all 0.8s ease;
  top:50px;
  padding: 1%;
}

.gallery li:hover{
  top:0px;
}

.gallery li:nth-child(1){
    transform:rotate(5deg);
}

.gallery li:nth-child(2){
    transform:rotate(-5deg);
}

.gallery li:nth-child(3){
    transform:rotate(2deg);
}

.gallery li:nth-child(4){
    transform:rotate(-5deg);
}
.gallery li:nth-child(5){
  transform:rotate(3deg);
}

.gallery li:nth-child(6){
    transform:rotate(-1deg);
}

.gallery li:nth-child(7){
    transform:rotate(5deg);
}

.gallery li:nth-child(8){
    transform:rotate(-3deg);
}
.gallery li:nth-child(9){
  transform:rotate(1deg);
}
.gallery li:nth-child(10){
  transform:rotate(-5deg);
}
.gallery li:nth-child(11){
  transform:rotate(5deg);
}

.gallery li:nth-child(12){
  transform:rotate(-2deg);
}

.gallery li:nth-child(13){
  transform:rotate(3deg);
}

.gallery li:nth-child(14){
  transform:rotate(-4deg);
}
.gallery li:nth-child(15){
transform:rotate(3deg);
}
.gallery li:nth-child(16){
  transform:rotate(5deg);
  }

.gallery li:nth-child(17){
transform:rotate(-2deg);
}

.gallery li:nth-child(18){
transform:rotate(3deg);
}

.gallery li:nth-child(19){
transform:rotate(-4deg);
}
.gallery li:nth-child(20){
transform:rotate(3deg);
}
.gallery li:nth-child(21){
  transform:rotate(5deg);
}

.gallery li:nth-child(22){
  transform:rotate(-5deg);
}

.gallery li:nth-child(23){
  transform:rotate(2deg);
}

.gallery li:nth-child(24){
  transform:rotate(-5deg);
}
.gallery li:nth-child(25){
transform:rotate(3deg);
}

.gallery li:nth-child(26){
  transform:rotate(-1deg);
}

.gallery li:nth-child(27){
  transform:rotate(5deg);
}

.gallery li:nth-child(28){
  transform:rotate(-3deg);
}
.gallery li:nth-child(29){
transform:rotate(1deg);
}
.gallery li:nth-child(30){
transform:rotate(-5deg);
}
.gallery li:nth-child(31){
  transform:rotate(5deg);
}

.gallery li:nth-child(32){
  transform:rotate(-5deg);
}

.gallery li:nth-child(33){
  transform:rotate(2deg);
}

.gallery li:nth-child(34){
  transform:rotate(-5deg);
}
.gallery li:nth-child(35){
transform:rotate(3deg);
}

.gallery li:nth-child(36){
  transform:rotate(-1deg);
}

.gallery li:nth-child(37){
  transform:rotate(5deg);
}

.gallery li:nth-child(38){
  transform:rotate(-3deg);
}
.gallery li:nth-child(39){
transform:rotate(1deg);
}
.gallery li:nth-child(40){
transform:rotate(-5deg);
}
.gallery li:nth-child(41){
transform:rotate(5deg);
}

.gallery li:nth-child(42){
transform:rotate(-2deg);
}

.gallery li:nth-child(43){
transform:rotate(3deg);
}

.gallery li:nth-child(44){
transform:rotate(-4deg);
}
.gallery li:nth-child(45){
transform:rotate(3deg);
}