@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+SC:wght@100;400&display=swap');

body{
    font-family: 'Orbitron', sans-serif;
    background-color: #120429;
    color: white;
    min-height: 75vh;
    display: grid;
    place-items: center;
    box-sizing: border-box;
}
#title h1{
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 6rem;
    position: relative;

    /*Glitch effect*/
    /*storlekar märkta i em för scaling, detta går ej med pixelar som enhet*/
    text-shadow: 
    0.05em 0 0 rgba(255, 0, 0, .75),
    -0.025em -0.05em 0 rgba(0, 255, 0, .75),
    0.025em 0.05em 0 rgba(0, 0, 255, .75);

    animation: glitch 600ms infinite, glitch-transform 600ms infinite;
}

#title h2{
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
}

/*Tillhörande glitch effect*/
#title span{
    position: absolute;
    top: 0;
    left: 0;
}

#title span:first-child{
    opacity: 0.8;
    animation: glitch 650ms infinite, glitch-transform 700ms infinite;
    clip-path: polygon(0 0, 100% 0,100% 45%, 0 45%);
    transform: translate(.025em, 0.025em);
}
#title span:last-child{
    opacity: 0.8;
    animation: glitch 275ms infinite, glitch-transform 800ms infinite;
    clip-path: polygon(0 60%, 100% 60%,100% 100%, 0 100%);
    transform: translate(-.025em, -0.025em);
}

@keyframes glitch{
    0%{
        text-shadow: 
    0.05em 0 0 rgba(255, 0, 0, .75),
    -0.025em -0.05em 0 rgba(0, 255, 0, .75),
    0.025em 0.05em 0 rgba(0, 0, 255, .75);
    }
    14%{
        text-shadow: 
    0.05em 0 0 rgba(255, 0, 0, .75),
    -0.025em -0.05em 0 rgba(0, 255, 0, .75),
    0.025em 0.05em 0 rgba(0, 0, 255, .75);
    }
    15%{
        text-shadow: 
    -0.05em -0.025em 0 rgba(255, 0, 0, .75),
    0.025em 0.025em 0 rgba(0, 255, 0, .75),
    0.05em -0.05em 0 rgba(0, 0, 255, .75);
    }
    49%{
        text-shadow: 
    -0.05em -0.025em 0 rgba(255, 0, 0, .75),
    0.025em 0.025em 0 rgba(0, 255, 0, .75),
    0.05em -0.05em 0 rgba(0, 0, 255, .75);
    }
    50%{
        text-shadow: 
    0.025em 0.05em 0 rgba(255, 0, 0, .75),
    0.05em 0 0 rgba(0, 255, 0, .75),
    0 -0.05em 0 rgba(0, 0, 255, .75);
    }
    99%{
        text-shadow: 
    0.025em 0.05em 0 rgba(255, 0, 0, .75),
    0.05em 0 0 rgba(0, 255, 0, .75),
    0 -0.05em 0 rgba(0, 0, 255, .75);
    }
    100%{
        text-shadow: 
    -0.025em 0 0 rgba(255, 0, 0, .75),
    -0.025em -0.025em 0 rgba(0, 255, 0, .75),
    -0.025em 0.05em 0 rgba(0, 0, 255, .75);
    }
    
}

@keyframes glitch-transform{
    0%{
    transform: translate(-.025em, -0.025em);
    }

    49%{
        transform: translate(-.025em, -0.025em);
    }

    50%{
    transform: translate(.05em, 0.025em);
    }

    100%{
    transform: translate(.05em, 0.025em);
    }
}

#title h2{
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 2em;
    text-shadow: 
    0.05em 0 0 rgba(255, 0, 0, .75),
    -0.025em -0.05em 0 rgba(0, 255, 0, .75),
    0.025em 0.05em 0 rgba(0, 0, 255, .75);
}


/*stänger av animationer för de som har det avstängt i windows/macOS*/
@media (prefers-reduced-motion: reduce){
    *,
    ::before,
    ::after{
        animation-delay: -1ms !important;
        animation-duration: -1ms !important;
        animation-iteration-count: -1ms !important;
        background-attachment: initial -1ms !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/*BRÖD TEXT*/

.bread-text{
    text-align: center;
    align-items: center;
    place-items: center;
}

.bread-text h3{
    text-transform: uppercase;
    text-decoration: underline;
    font-size: 3em;
    text-shadow: 
    0.05em 0 0 rgba(255, 0, 0, .75),
    -0.025em -0.05em 0 rgba(0, 255, 0, .75),
    0.025em 0.05em 0 rgba(0, 0, 255, .75);
}

.bread-text p{
    font-family: 'Encode Sans SC', sans-serif;
    font-size: 1.5em;
}

.containers{
    display: flex;
    width: 100%;
}

.containers p{
    font-size: 1.5em;
}

.prices-container{
    flex: 1;
    align-self: left;
    text-align: center;
    height: 45vh;
}

.products-container{
    flex: 1.5;
    align-self: right;
    text-align: center;
}


/*Img Show*/
.img-show{
    display: flex;
    width: 100%;
    place-content: center;
}

.mySlides{
    padding-right: 1vw;
    height: 25em;
    width: 25em;
    max-height: 400px;
    max-width: 400px;
}

.left-slide{
    animation: slide-in-left 1s ease;
    align-self: left;
}
.right-slide{
    animation: slide-in-right 1s ease;
    align-self: right;
}

@keyframes slide-in-left{
    0%{
        transform: translateX(-10%);
    }
    100%{
        transform: translateX(0%);
    }
}
@keyframes slide-in-right{
    0%{
        transform: translateX(10%);
    }
    100%{
        transform: translateX(0%);
    }
}

@media(max-width: 1050px){

    #title h1{
        font-size: 5rem;
    }
    #title h2{
        text-align: center;
        place-items: center;
        align-content: center;
        padding-left: 2vw;
        padding-right: 2vw;
    }
    .mySlides{
        max-width: 300px;
        max-height: 300px;
    }
    .bread-text p{
        padding-left: 8vw;
        padding-right: 8vw;
    }

    .containers{
        display: block;
        width: 100%;
        text-align: center;
        align-items: center;
        place-items: center;
    }

    .prices-container{
        height: 25vh;
        animation: none;
        padding-top: 2vh;
        padding-left: 8vw;
        padding-right: 8vw;
    }
    
    .products-container{
        height: 25vh;
        animation: none;
        padding-top: 2vh;
        padding-left: 8vw;
        padding-right: 8vw;
    }
}