html {
    height: -webkit-fill-available;
}

body {
    margin: 0;
    overflow: hidden;
    height: -webkit-fill-available;
}

.wrapper {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    perspective: 10px;
}

.wrapper::-webkit-scrollbar {
    display: none;
}

header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    transform-style: preserve-3d;
    z-index: -1;
    text-align: center;
}

.background {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
    transform: translateZ(-10px) scale(2);
}

.title {
    font-size: 3.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-family: 'Acme', sans-serif;
    color: white;
    text-shadow: 0 0 10px black;
}

section {
    font-size: 2rem;
    font-family: 'Mouse Memoirs', sans-serif;
    color: white;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: rgb(181, 27, 88);
    height: 100vh;
    text-align: center; 
    display: flex;
    justify-content: center;
    align-items: center;   
}

#protectionSection {
    font-size: 1.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

#monky {
    padding: .5rem;
}

/* Hide scrollbar for Chrome, Safari and Opera */
/*.example::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  /*.example {
    -ms-overflow-style: none;  /* IE and Edge */
  /*  scrollbar-width: none;  /* Firefox */

@media only screen and (min-width: 768px) {
   .title {
    font-size: 4rem;
    padding: 3rem;
   }
    section {
    font-size: 2.25rem;
    padding-left: 7rem;
    padding-right: 7rem;
   }
   #protectionSection {
    font-size: 2.25rem;
    padding-left: 5rem;
    padding-right: 5rem;
   }
   #monky {
    padding: 1.5rem;
   }
}

@media only screen and (min-width: 1024px) {
    .title {
    font-size: 5rem;
    padding: 3rem;
    }
    section {
    font-size: 2.75rem;
    padding-left: 10rem;
    padding-right: 10rem;
    }
    #protectionSection {
    font-size: 2.5rem;
    padding-left: 8rem;
    padding-right: 8rem;
    }
    #monky {
    padding: 2rem;
    }
}

@media only screen and (min-width: 1440px) {
    .title {
    font-size: 7rem;
    padding: 3.5rem;
    }
    section {
    font-size: 3.5rem;
    padding-left: 15rem;
    padding-right: 15rem;
    }
    #protectionSection {
    font-size: 3.25rem;
    padding-left: 10rem;
    padding-right: 10rem;
    }
}

@media only screen and (min-width: 1880px) {
    .title {
        font-size: 10rem;
        padding: 5rem;
    }
    section {
        font-size: 3.5;
        padding-left: 18rem;
        padding-right: 18rem;
    }
    #protectionSection {
        padding-left: 18rem;
        padding-right: 18rem;
    }
}