/* Index style */
*
{
    margin: 0;
    padding: 0;
}

body {
    display: grid;
    justify-content: center;
    align-items: center;
    min-height: 101vh;
    background: black;
}

.container {
    display: grid;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    width: 800px;
    height: 800px;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 50%;
    box-shadow: 0px 0px 40px 10px rgb(236, 226, 226);
}

.toggle {
    grid-area: 4 / -13 / 13 / -5;
    justify-self: center;
}

.container2 {
    display: flex;
    justify-content: center;
    position: absolute;
    align-items: center;
}

.containertext {
    color: grey;
    grid-area: 14 / -13 / 15 / -5;
    justify-self: center;
    cursor: pointer;
}

.text {
    text-align: center;
    font-family: "Open Sans" , sans-serif;
    font-size: 20px;
}

.box-button { 
    grid-area: 1 / -17 / 5 / -5;
    position: relative;
    top: 360px;
    left: -40px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    cursor: pointer;
    object-fit: contain;
    transform: rotate(calc(360deg/3 * var(--i)));
    transform-origin: 440px;
    overflow: hidden;
    box-shadow: 0px 0px 10px 6px rgb(251, 250, 250);
    transition: all 0.3s ease;
}

.box-button:hover {
    box-shadow: 0px 0px 14px 10px rgb(236, 182, 20);
}

.container .box-button img {
    position: absolute;
    object-fit: cover;
    background-color: white;
    width: 90px;
    height: 90px;
    transform: rotate(calc(-360deg/3 * var(--i)));
}

/* keybords page style */
.video-container {
    grid-area: 5 / 2 / -5 / -2 ;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.video-container iframe {
    aspect-ratio: 16/9;
}

/* contact - info style */
.containertext2 {
    color: white;
    grid-area: 5/ -15 / 13 / -3;
}

.text2 {
    text-align: center;
    font-family: "Open Sans", Sans-serif;
    font-size: 15px;

}

.h1 {
    color: grey;
    text-transform: uppercase;
    height: 110px;
}

.h2 {
    font-weight: lighter;
}

.h3 {
    height: 100px;
    align-content: flex-end;
}

.scroll-watcher {
    height: 10px;
    position: fixed;
    top: 0;
    z-index: 1000;
    background-color: lime;
    width: 100%;
    scale: 0 1;
    transform-origin: left;

    animation: scroll-watcher linear;
    animation-timeline: scroll()
}

@keyframes srcoll-watcher {
    to { scale: 1 1; }
}