@import url('reset.css');
@import url('font.css');

@keyframes jump {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(6deg);
    }
}

@keyframes shake2 {

    0%,
    100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

@keyframes shake3 {

    0%,
    100% {
        transform: rotate(-9deg);
    }

    50% {
        transform: rotate(-12deg);
    }
}

@keyframes shake4 {

    0%,
    100% {
        transform: rotate(14deg);
    }

    50% {
        transform: rotate(19deg);
    }
}

@keyframes rot {

    0%,
    100% {
        transform: rotate(-7deg);
    }

    50% {
        transform: rotate(-15deg)
    }

}

@keyframes rot2 {

    0%,
    100% {
        transform: rotate(4deg);
    }

    50% {
        transform: rotate(10deg);
    }
}

* {
    font-family: 'Peace Sans', sans-serif;
    font-weight: 700;
}

body {
    overflow-x: hidden;
    width: 1560px;
}

.red_bg {
    background-color: #E61E1E;
}

.red_bg .par {
    color: #F3E9CE;
}

.gray_bg {
    background-color: #232323;
}

.screen-height {
    height: 100vh;
    min-height: 600px;
    position: relative;
}

.par {
    color: #232323;
    font-size: 23px;
    line-height: 156%;
}

.par-card {
    color: #232323;
    font-size: 23px;
    line-height: 156%;
    padding-left: 40px;
}


#screen1 {
    display: flex;
    padding: 62px 123px 83px 123px;
    flex-direction: column;
    justify-content: space-between;

}

#screen2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 62px 123px 83px 123px;
    position: relative;
    align-items: center;
}

#screen3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 62px 123px 83px 123px;
    position: relative;
    align-items: center;
}

#screen4 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 62px 123px 83px 123px;
    position: relative;
    align-items: center;
}

#screen5 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 62px 123px 83px 123px;
    position: relative;
    align-items: center;
}

#screen6 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 62px 123px 83px 123px;
    position: relative;
    align-items: center;
}

#screen7 {
   
    height: 220px;
    width: 1560px;
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 60px;
}

#first-icons {
    position: absolute;
    left: 92px;
    top: 97px;
}

.glyphs {
    padding-left: 0px;
    padding-top: 120px;
    padding-right: 700px;
    padding-bottom: 700px;
    align-items: left;
    gap: 64px;
    display: flex;
    flex-direction: column;
}

h1 {
    color: #F3E9CE;
    font-size: 139px;
    line-height: 95%;
}

h3 {
    color: #232323;
    font-size: 58px;
    line-height: 95%;

}

h2 {
    color: #232323;
    font-size: 69px;
    line-height: 95%;
}

.card {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 455px;
    height: 670px;
    background-color: #F3E9CE;
    border-radius: 43px;
    padding: 8px 36px;
    justify-content: space-between;
}

.cardmin {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 279px;
    height: 383px;
    background-color: #F3E9CE;
    border-radius: 43px;
    padding: 8px 36px;
    justify-content: space-between;
}

#card1 {
    left: 762px;
    top: 170px;
    transform: rotate(-15deg);
    z-index: 2;
}

#card2 {
    left: 967px;
    top: 66px;
    transform: rotate(4deg);
    z-index: 1;
}

#card3 {
    left: 425px;
    top: -28px;
    transform: rotate(-90deg);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

#card4 {
    left: 521px;
    top: 295px;
    transform: rotate(90deg);
    z-index: 3;
}

#card5 {
    left: 90px;
    top: 152px;
    transform: rotate(-11deg);
    padding: 0;
    z-index: 1;
}

#card6 {
    top: 119px;
    right: 176px;
    padding: 0;
    z-index: 1;
    transform: rotate(17deg);
}

#card7 {
    left: 162px;
    top: -49px;
    transform: rotate(-94deg);
    z-index: 2;

}

#card8 {
    left: 409px;
    top: 272px;
    transform: rotate(94deg);
    z-index: 1;
}

#card9 {
    left: 163px;
    top: 153px;
    transform: rotate(15deg);
    z-index: 3;
}

#card10 {
    left: 635px;
    top: 59px;
    transform: rotate(-10deg);
    z-index: 3;
}

#card11 {
    left: 817px;
    top: 170px;
    transform: rotate(11deg);
    z-index: 1;
    padding: 0;
}

#card12 {
    left: 505px;
    top: 133px;
    z-index: 2;
    padding: 0;
    transform: rotate(-11deg);

}

#card13 {
    position: absolute;
    left: 900px;
    top: 294px
}

#card14 {
    position: absolute;
    left: 1204px;
    top: 294px;
    padding: 0;
}

.cardheader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
}

.cardtitle {
    width: fit-content;
    font-size: 101px;
    color: #232323;
}

.cardtitle2 {
    width: fit-content;
    font-size: 101px;
    color: #E61E1E;
}

.cardtitle3 {
    width: fit-content;
    font-size: 46px;
    color: #232323;
}

.cardtitle4 {
    width: fit-content;
    font-size: 46px;
    color: #E61E1E;
}

.cardtitle5 {
    width: fit-content;
    font-size: 58px;
    color: #232323;
}

.card-ill {
    width: 68px;
    height: 64px;
}

.card-illmin {
    width: 40px;
    height: 38px;
}

.card-illmin2 {
    width: 38px;
    height: 35px;
}

.main-ill {
    position: absolute;
    width: 294px;
    height: 273px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-ill2 {
    position: absolute;
    top: 45%;
    left: 60%;
    transform: translate(-50%, -50%);
}

.main-ill3 {
    position: absolute;
    width: 637px;
    height: 442px;
    transform: rotate(10deg);
}

.main-ill4 {
    position: absolute;
    width: 185px;
    height: 172px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.full-card-shirt {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    border-radius: 43px;
}

.rhomb1 {
    position: absolute;
    left: 1016px;
    top: 154px;
}

.rhomb2 {
    position: absolute;
    left: 1233px;
    top: 275px;
}



.box {
    position: absolute;
    left: 76px;
    top: 141px;
}

.groundtext {
    color: azure;
    font-size: 23px;
    gap: 15px;
}

.hexagon-grid1 {
    position: absolute;
    top: 66px;
    left: 817px;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 0px;
    margin-bottom: 74px;
    max-width: 600px;
    max-height: 722px;
    z-index: 5;
}

.hexagon-grid2 {
    position: absolute;
    top: 554px;
    left: 205px;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 650px;
    max-height: 217px;
    z-index: 5;
}

.hexagon-wight {
    background-image: url("../assets/font/images/wight.svg");
    background-position: center;
    background-repeat: no-repeat;
    width: 86px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;

}

.hexagon-black {
    background-image: url("../assets/font/images/black.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 86px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.hexpblack {
    color: #232323;
    font-size: 35px;
    margin-top: 5px;

}

.hexpblack:hover {
    transform: scale(3ms);
    font-size: 60px;
    border-radius: 5px;
}

.hexpwhite {
    color: #F3E9CE;
    font-size: 35px;
    margin-top: 5px;
    transition: all 0.3ms ease;
    display: inline-block;
    animation-name: jump;
}


.hexpwhite:hover {
    transform: scale(3ms);
    font-size: 60px;
    border-radius: 5px;
}

.llaststrok {
    display: flex;
    margin-left: 91px;
    gap: 3px;
}

.laststrok {
    display: flex;
    margin-left: 179px;
    gap: 3px;
}

.anymshake {
    animation: shake 3s ease-in-out infinite;
}

.anymjump {
    animation: jump 3s ease-in-out infinite;
}

.large {
    animation: uv 3s ease-in-out infinite;
}

.rotat {
    animation: rot 3s ease-in-out infinite;
}

.rotat2 {
    animation: rot2 3s ease-in-out infinite;
}

.anymshake2 {
    animation: shake2 2s ease-in-out infinite;
}

.anymshake3 {
    animation: shake3 2s ease-in-out infinite;
}

.anymshake4 {
    animation: shake4 2s ease-in-out infinite;
}

.footer {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 210px;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.card-content {
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    transform: rotate(90deg);
    
}

.card-description {
    color: #232323;
    font-size: 58px;
    line-height: 95%;
    text-align: left;
}

.card-text {
    color: #232323;
    font-size: 23px;
    line-height: 136%;
    margin: 0;
    text-align: left;
    width: 500px;
}