@font-face {
    font-family: myFirstFont;
    /* src: url ('./Comic_CAT.otf'); */
    src: url(Comic_CAT.otf);
    /* src: 'Comic_CAT.otf'; */
}

html,
body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    background-color: aquamarine;
    /* font-family: myFirstFont; */

}


.horizontally {
    width:3500vw;
    /* Set this according to your JS settings */
    height: 100vh;
    display: grid;
    justify-content: center;
    align-items: center;
    align-content: center;
    color: #fff;
    background: linear-gradient(45deg, #000, #222);
}

.vertically {
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: linear-gradient(45deg, #222, #444);
}

.wrapper {
    /* width: 100%; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid1 {
    width: 700px;
    height: 100%;

    /* background-color: aqua; */
}

.grid2 {
    width: 500px;
    height: 100%;

    /* background-color: rgb(255, 0, 149); */
}

.grid3 {
    /* width: 500px; */
    height: 100%;

    /* background-color: rgb(203, 47, 38); */
}

.grid4 {
    height: 100%;

    width: 500px;
    /* background-color: rgb(183, 96, 21); */

}

.grid5 {
    height: 100vh;

    width: 500px;
    /* background-color: aqua; */
}

.wrapperrow1 {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.wrapperrow2 {

    width: 100px;
    height: 100%;
}

.gridcol1 {
    width: 100px;
    height: 100%;
    /* background-color: aqua; */
}

.gridcol2 {

    width: 800px;
    height: 100%;

    /* background-color: rgb(255, 0, 149); */
}
.gridcol3 {

    /* width: 500px; */
    height: 100%;

    /* background-color: rgb(255, 0, 149); */
}
/* */
header {
    overflow: hidden;
    height: auto;
}

h2 {
    color: white;
    text-align: center;
    mix-blend-mode: difference;
    filter: drop-shadow(0.05em 0.05em orange);
}

.namepalat {
    margin-top: 35rem;
    font-family: myFirstFont;
    font-size: 7em;
    /* color: rgb(236, 217, 217); */
    text-align: center;
    mix-blend-mode: difference;
    filter: drop-shadow(0.05em 0.05em rgb(234, 14, 205));
}

.detail1 {
    margin-top: 35rem;
    margin-left: 5rem;
    line-height: 1.8;
    letter-spacing: 5px;
    font-size: 3em;
    /* color: rgb(236, 217, 217); */
    text-align: center;
    mix-blend-mode: difference;
    filter: drop-shadow(0.05em 0.05em rgb(234, 14, 205));
}




.horiz-scroll-wrapper {
    width: 100%;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    scrollbar-width: none;

}

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

.horiz-scroll-inner {
    width: 100%;
    display: flex;
    flex-direction: row;
    width: fit-content;
    padding: 0;
    margin: 0;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    overflow: hidden;
}

.slide {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transform: translateX(10vw) skew(-45deg) scale(1.2);
    --anti-transform: translateX(-10vw) skew(45deg) scale(.8);
}

.slide * {
    transform: var(--anti-transform);
}

.slide:last-child {
    width: 80vw;
}

.slide.one {
    background: hsl(-30deg, 80%, 60%);
}

.slide.two {
    background: hsl(-60deg, 80%, 60%);
}

.slide.three {
    background: hsl(-90deg, 80%, 60%);
}

.slide.four {
    background: hsl(-120deg, 80%, 60%);
}

.slide.five {
    background: hsl(-150deg, 80%, 60%);
}

.slide h1 {
    font-size: calc(3em + 4vmin);
    width: fit-content;
    margin: 0;
    text-align: center;
}