html{
    font-size: 1rem;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

.container-model{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
}

.spinner-border{
    --bs-spinner-width: 7rem;
    --bs-spinner-height: 7rem;
    --bs-spinner-border-width: 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}
.icon-container{
    height: 8rem;
    width: 60rem;
    position: absolute;
    max-width: 90vw;
    transform: translateX(-50%);
    bottom: 5%;
    left: 50%;
}
.model-icon{
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}

.model-icon svg{
    max-width: 55%;
    max-height: 55%;
}

.model-icon-1{
    position: absolute;
    top: 0;
    left: 0;
}

.model-icon-2{
    position: absolute;
    top: 1rem;
    left: 13%;
}

.model-icon-3{
    position: absolute;
    top: 2rem;
    left: 26%;
}

.model-icon-4{
    position: absolute;
    top:  3rem;
    left: 50%;

    transform: translateX(-50%);
}


.model-icon-5{
    position: absolute;
    top:2rem;
    right: 26%;
}

.model-icon-6{
    position: absolute;
    top:1rem;
    right: 13%;
}

.model-icon-7{
    position: absolute;
    top: 0;
    right: 0;
}


.icon-info{
    display: none;
    bottom: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20rem;
    transition: all 1s ease;
    background: rgba(170, 146, 236, 1);
    border: 0.1rem solid rgba(148, 103, 194, 1);
    border-radius: 0.75rem;
    overflow: hidden;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}
.icon-info div:not(.icon-img):empty{
    display: none;
}

.icon-info div:not(.icon-img){
    padding: 0.5rem;
    border-radius: 0.5rem;
}


.icon-img{
    height: 5rem;
    width: 5rem;
    border-radius: 0.6rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.model-icon:hover{
    z-index: 5;
}

.model-icon:hover .icon-info{
    display: flex;
}

#canvas{
    opacity: 0;
    display: none;
    width: 100vw;
    height: 100vh;
}

#video{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
}

@media (min-aspect-ratio: 1/1) {
    .scan{
        width: 50vh;
        height: 50vh;
    }
}

@media (max-aspect-ratio: 1/1) {
    .scan{
        width: 80vw;
        height: 80vw;
    }
}

.scan {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background:
        linear-gradient(to right, white 10px, transparent 10px) 0 0,
        linear-gradient(to right, white 10px, transparent 10px) 0 100%,
        linear-gradient(to left, white 10px, transparent 10px) 100% 0,
        linear-gradient(to left, white 10px, transparent 10px) 100% 100%,
        linear-gradient(to bottom, white 10px, transparent 10px) 0 0,
        linear-gradient(to bottom, white 10px, transparent 10px) 100% 0,
        linear-gradient(to top, white 10px, transparent 10px) 0 100%,
        linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform:  translate(-50%, -50%);
    position: fixed;
    top: 50%;
    left: 50%;

}

.scan::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    background: white;
    animation: move 2s linear infinite;
    z-index: 5;
}

@keyframes move {

    0%,
    100% {
        top: 0%
    }

    50% {
        top: calc(100% - 10px)
    }
}

.scan img{
    width: 75%;
    opacity: 0.5;
}


@media (max-width : 991px){
    html{
        font-size: 4vw;
    }

    .model-icon{
        width: 3rem;
        height: 3rem;
    }

    .model-icon-6 .icon-info, .model-icon-7 .icon-info{
        transform: translateX(-90%);
    }

    .model-icon-5 .icon-info{
        transform: translateX(-70%);
    }

    .model-icon-3 .icon-info{
        transform: translateX(-30%);
    }

    .model-icon-1 .icon-info, .model-icon-2 .icon-info{
        transform: translateX(-10%);
    }
}