/* For Homepage Styling */
.container-div {
    width: 100%;
    height: 100%;
    background-image: url("../assets/Menu_BG.png");
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    background-size: cover;
    position: absolute;
    z-index: 0;
}

.normal-spinning-light{
    width: 6000px;
    height: 6000px;
    left: -3000px;
    top: -1000px;
    overflow: hidden;
    background-size: cover;
    position: absolute;
    z-index: 10;
    animation-name: rotate;
    animation-duration: 5s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
    transform-origin: center;
  }
  100% {
    transform: rotate(360deg);
    transform-origin: center;
  }
}

.corner-rail-decor{
    overflow: hidden;
    background-size: cover;
    position: absolute;
    z-index: 10;
    transform: rotate(45deg);
    animation-name: walkingline;
    animation-duration: 1s;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes walkingline {
  0% {
    transform: translate(0px, -100px) rotate(45deg);
  }
  100% {
    transform: translate(-100px, 0px) rotate(45deg);
  }
}

.upper-left-corner{
    left: -50%;
    top: -70%;
}

.bottom-right-corner{
    left: 40%;
    top: -40%;
}

@media only screen and (max-width: 900px) {

    .upper-left-corner{
        left: -85%;
        top: -85%;
    }

    .bottom-right-corner{
        left: 30%;
        top: -30%;
    }
    
}

.graphical-zone{
    width: 50%;
    top: 10%;
    overflow: visible;
    position: absolute;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.title_text{
    position: relative;
    margin: auto;
    width: 100%;
    height: 50%;
}

.interaction-zone{
    left: 55%;
    width: 50%;
    height: 100%;
    position: absolute;
    z-index: 100;
    object-fit: contain;
}

.homepage-card{
    max-width: 320px;
    position: absolute;
    z-index: 100;
    opacity: 90%;
    object-fit: scale-down;
}

.first-card-upper-right{
    left: 50%;
    top: 5%;
    transform: translate(0px, 0px) rotate(0deg);
    transition: 1s;
}

.second-card-middle{
    left: 0%;
    top: 30%;
    transform: translate(0px, 0px) rotate(0deg);
    transition: 1s;
}

.third-card{
    left: 35%;
    top: 53%;
    transform: translate(0px, 0px) rotate(0deg);
    transition: 1s;
}

img.first-card-upper-right:hover{
    transform: translate(-10px, -10px) rotate(10deg);
    transition: 1s;
    opacity: 100%;
}

img.second-card-middle:hover{
    transform: translate(0px, -20px);
    transition: 1s;
    opacity: 100%;
}

img.third-card:hover{
    transform: translate(-15px, 10px) rotate(-20deg);
    transition: 1s;
    opacity: 100%;  
}

/* Standard resolution taken from:
https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1200px: Desktops, large screens

This design is desktop first, not mobile-first.
TODO: Change this to mobile-first later, if a lot of people uses this.
 */

/* Tablets */
@media only screen and (max-width: 768px) {
    
    .graphical-zone{
        width: 100%;
        height: 50%;
        top: 0%;
        position: absolute;
        z-index: 100;
    }

    .title_text{
        position: relative;
        margin: auto;
        width: 100%;
        height: 50%;
        object-fit: contain;
    }

    .interaction-zone{
        left: 0%;
        top: 50%;
        width: 100%;
        height: 50%;
        position: absolute;
        z-index: 100;
    }
    
    .homepage-card{
        max-width: 200px;
    }
    
    .first-card-upper-right{
        left: 10%;
        top: 20%;
    }

    .second-card-middle{
        left: 40%;
        top: 20%;
    }

    .third-card{
        left: 70%;
        top: 20%;
    }
}

/* Mobile Screens */
@media only screen and (max-width: 480px) and (orientation: portrait) {

    .upper-left-corner{
        left: -115%;
        top: -115%;
    }

    .bottom-right-corner{
        left: 20%;
        top: -75%;
    }
    
    .graphical-zone{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 100;
    }
    
    .container-div {
        background-image: url("../assets/mobile/Menu/BG.png");
    }

    .title_text{
        content: url("../assets/mobile/Menu/Title.png");
        width: 100%;
        position: absolute;
        z-index: 1000;
    }

    .interaction-zone{
        position: absolute;
        top: 0%;
        width: 100%;
        height: 100%;
        z-index: 100;
        display: grid;
        grid-template-columns: auto auto auto;        
    }
    
    .homepage-card{
        max-width: 300px;
    }
    
    .first-card-upper-right{
        content: url("../assets/mobile/Menu/play.png");
        top: 80%;
    }

    .second-card-middle{
        content: url("../assets/mobile/Menu/Collection.png");
        top: 80%;
    }

    .third-card{
        content: url("../assets/mobile/Menu/Credit.png");
        top: 80%;
    }
}