:root  {
    --size: 500px;
}

html, body {
    background-color: #bed2cd;
    margin: 0;
    padding: 0;
    background-image: url("bg.png");
    background-size: 50px;
    font-family:Georgia, 'Times New Roman', Times, serif;
    height: 100%;
}

#text-container {
        padding: 0px;
    }

button, input[type=file]::file-selector-button {
    margin: 2px;
    background-color: #bed2cd;
    color: #0f4838;
    border: 3px double #0f4838;
    border-radius: 3px;
    padding: 3px;
}

button:hover, input[type=file]::file-selector-button:hover {
    border: 3px solid #0f4838;;
}


#main-container {
    max-width: var(--size);
    margin: 0 auto;
    padding-top: 3px;
    background-color: white;
    min-height: 100%;
    border-left: 60px solid white;
    border-right: 60px solid white;
}

#kaleidoscope-container {
    width: var(--size);
    height: var(--size);

}


img {
    width: var(--size);
    height: var(--size);
}

@keyframes spin {
    from {
        rotate: 360deg;
    } 
    to {
        rotate: 0deg;
    }
}

.container {
    width: var(--size);
    height: var(--size);

    margin-left: 0px;
    margin-top: 0px;

    position: absolute;
    overflow: hidden;
}


.container-orig {
    clip-path: polygon(0% 50%, 50% 50%, 0% 0%);
}

.container-orig img {
    animation: spin 6s infinite linear;
}

.container-reverse {
    clip-path: polygon(50% 50%, 100% 50%, 100% 0%);
}

.container-reverse img {
    transform: rotateY(180deg);
    animation: spin 6s infinite reverse linear;
}



#image-container-1 {
    rotate: 0deg;
}


#image-container-2 {
    rotate: 0deg;
}

#image-container-3 {
    rotate: 90deg;
}

#image-container-4 {
    rotate: 90deg;
}

#image-container-5 {
    rotate: 180deg;
}

#image-container-6 {
    rotate: 180deg;
}

#image-container-7 {
    rotate: 270deg;
}

#image-container-8 {
    rotate: 270deg;
}

@media only screen and (max-width: 620px) {
    #text-container {
        padding: 10px;
    }
    :root  {
        --size: 100vw;
    }
    #main-container {
        border-left: none;
        border-right: none;

    }}