:root{
    --padding: 20px;
    --main-color: #EF9023;
    --main-dark-color: #000000;
    --off-color: #3a2216;
    --glow-color: #3a2216;
    --marker-color: #938539;
}

@font-face {
    font-family: pixelFont;
    src: url(./media/Glass_TTY_VT220.ttf);
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: pixelFont;
    color: var(--main-color);
}

body{
    position: relative;
    height: 100svh;
    width: 100svw;
    background-color: var(--main-dark-color);
}

main{
    display: flex;
    gap: var(--padding);
    height: 100%;
    width: 100%;
    padding: var(--padding);

    & .measureContainer{
        display: flex;
        justify-content: space-between;
        gap: var(--padding);
        padding: var(--padding);
        height: 100%;
        width: 50%;
        min-width: 350px;
        max-width: 420px;
        border: 1px solid var(--main-color);

        & .textContainer{
            position: relative;
            display: flex;
            flex-direction: column;
            gap: var(--padding);
            width: calc(100% - 70px - var(--padding));

            & .moistureLevel{
                display: flex;
                flex-direction: column;
                gap: 10px;
                font-size: 30px;

            }

            & .dates{
                display: flex;
                flex-direction: column;
                gap: 20px;

                & .time{
                    height: 20px;
                }

                & .container{

                    & .output{
                        padding: 10px;
                        margin-top: 10px;
                        background-color: var(--off-color);
                        color: var(--main-color);
                        height: 35px;

                    }
                }
            }

            & img{
                display: none;
            }

            & .requestButton{
                position: absolute;
                bottom: 0;
            }
        }


        & .moistureContainer{
            position: relative;
            display: flex;
            align-items: flex-end;
            height: 100%;
            width: 70px;
            border: 1px solid var(--main-color);
            background-color: var(--off-color);
            padding: 10px;

            & .marker{
                width: 100%;
                height: 0%;
                background-color: var(--marker-color);
            }
        }
    }

    & .extraContainer{
        position: relative;
        height: 100%;
        width: 100%;
        border: 1px solid var(--main-color);

        & img{
            position: absolute;
            top: 0;
            width: 100%;
            height: 60%;
            object-fit: cover;
            border-bottom: 1px solid var(--main-color);
        }

        & .textBox{
            position: absolute;
            bottom: 0;
            height: 40%;
            width: 100%;
            padding: var(--padding);
            line-height: 20px;
            white-space: preserve-breaks;
        }
    }
}


.button{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    background-color: var(--off-color);
    color: var(--main-color);
    opacity: 0.4;

    height: 40px;
    width: 160px;
    font-size: 20px;

    &.active{
        background-color: var(--off-color);
        animation-name: activate;
        animation-duration: 3s;
        opacity: 1;

        & .left{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 2px;
            height: 100%;
            background-color: var(--main-color);
            animation-name: leftAnimation;
            animation-duration: 16s;
            animation-iteration-count: infinite;
        }
        & .top{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--main-color);
            animation-name: topAnimation;
            animation-duration: 16s;
            animation-iteration-count: infinite;
        }
        & .right{
            position: absolute;
            top: 0;
            right: 0;
            width: 2px;
            height: 0%;
            background-color: var(--main-color);
            animation-name: rightAnimation;
            animation-duration: 16s;
            animation-iteration-count: infinite;
        }
        & .bottom{
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 2px;
            background-color: var(--main-color);
            animation-name: bottomAnimation;
            animation-duration: 16s;
            animation-iteration-count: infinite;
        }
    
        & .left2{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 2px;
            height: 100%;
            background-color: var(--off-color);
            animation-name: leftAnimation2;
            animation-duration: 16s;
            animation-iteration-count: infinite;
            z-index: 2;
        }
        & .top2{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--off-color);
            animation-name: topAnimation2;
            animation-duration: 16s;
            animation-iteration-count: infinite;
            z-index: 2;
        }
        & .right2{
            position: absolute;
            top: 0;
            right: 0;
            width: 2px;
            height: 0%;
            background-color: var(--off-color);
            animation-name: rightAnimation2;
            animation-duration: 16s;
            animation-iteration-count: infinite;
            z-index: 2;
        }
        & .bottom2{
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 2px;
            background-color: var(--off-color);
            animation-name: bottomAnimation2;
            animation-duration: 16s;
            animation-iteration-count: infinite;
            z-index: 2;
        }
    }



}

@keyframes activate {
    0%{
        opacity: 0.4;
    }

    100%{
        opacity: 1;
    }
    
}

@keyframes leftAnimation{
    0%{
        height: 0%;
    }

    12.5%{
        height: 100%;
    }

    100%{
        height: 100%;
    }
}

@keyframes topAnimation{
    0%{
        width: 0%;
    }

    12.5%{
        width: 0%;
    }

    25%{
        width: 100%;
    }

    100%{
        width: 100%;
    }
}

@keyframes rightAnimation{
    0%{
        height: 0%;
    }

    25%{
        height: 0%;
    }

    37.5%{
        height: 100%;
    }

    100%{
        height: 100%;
    }
}

@keyframes bottomAnimation{
    0%{
        width: 0%;
    }

    37.5%{
        width: 0%;
    }

    50%{
        width: 100%;
    }

    100%{
        width: 100%;
    }
}


@keyframes leftAnimation2{
    0%{
        height: 0%;
    }

    50%{
        height: 0%;
    }

    62.5%{
        height: 100%;
    }

    100%{
        height: 100%;
    }
}

@keyframes topAnimation2{
    0%{
        width: 0%;
    }

    62.5%{
        width: 0%;
    }

    75%{
        width: 100%;
    }


    100%{
        width: 100%;
    }
}

@keyframes rightAnimation2{
    0%{
        height: 0%;
    }

    75%{
        height: 0%;
    }

    87.5%{
        height: 100%;
    }


    100%{
        height: 100%;
    }
}

@keyframes bottomAnimation2{
    0%{
        width: 0%;
    }

    87.5%{
        width: 0%;
    }

    100%{
        width: 100%;
    }

}

@keyframes pulse {
    0%{
        opacity: 1;
    }

    50%{
        opacity: 0.65;
    }

    100%{
        opacity: 1;
    }
}


@media only screen and (max-width: 660px){
    body{
        
    }
    main{
        flex-direction: column;

        & .extraContainer{
            display: none;
        }

        & .measureContainer{
            min-width: 350px;
            min-height: 510px;
            max-width: 660px;
            width: 100%;

            & .textContainer{
                & .moistureLevel{
                    font-size: 24px;
                }
    
                & img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}