@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&display=swap');

html *{
    font-family: 'Dongle', sans-serif;
    color: rgb(36, 36, 36);
}

#MainWrapper {
    width: 100vw;
    height: 100vh;

    display: grid;
    justify-content:center;

    align-content: center;
}

#Wrapper {
    width: min(100vh, 100vw);
    width: min(100vh, 100vw);

    display: grid;
    justify-content:center;

    align-content: center;

    background-color: aquamarine;
}

#Leftupper {
    background-image: url(resources/PNG_SW.png);
    background-color: rgb(216, 210, 187);
}

#Rightlower {
    background-image: url(resources/PNG_SW_II.png);
    background-color: rgb(216, 210, 187);
}

@media all and (orientation:portrait) {
    #Leftupper {
        background-image: url(resources/PNG_SW.png), linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(150, 150, 150, 255));
        width: 100vw;
        height: calc((100vh - 100vw) / 2);

        grid-column: 1;
        grid-row: 1;

        background-position: top;
    }

    #Rightlower {
        background-image: url(resources/PNG_SW_II.png), linear-gradient(to top, rgba(255, 255, 255, 0), rgba(150, 150, 150, 255));
        width: 100vw;
        height: calc((100vh - 100vw) / 2);

        grid-column: 1;
        grid-row: 3;

        background-position: bottom;
    }

    #Wrapper {
        grid-column: 1;
        grid-row: 2;
    }
}

@media all and (orientation:landscape) {
    #Leftupper {
        width: calc((100vw - 100vh) / 2);
        height: 100vh;

        grid-column: 1;
        grid-row: 1;

        background-position: right 50vh;
        background-size: 50vh;
    }

    #Rightlower {
        width: calc((100vw - 100vh) / 2);
        height: 100vh;

        grid-column: 3;
        grid-row: 1;

        background-position: left 25vh;
        background-size: 50vh;
    }

    #Wrapper {
        grid-column: 2;
        grid-row: 1;
    }
}

.quad {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

    grid-gap: min(2vw, 2vh);

    height: min(50vh, 50vw);
    width: min(50vh, 50vw);
}

#Step1 {
    grid-column: 1;
    grid-row: 1;

    background-color: rgb(241, 222, 199);
    background-image: url(resources/Icon_i.png);
    background-position: center center;
    background-size: min(10vh, 10vw);
}

#Step2 {
    grid-column: 2;
    grid-row: 1;

    background-color: rgb(180 231 206);
    background-image: url(resources/Icon_Camera.png);
    background-position: center center;
    background-size: min(10vh, 10vw);
}

#Step3 {
    grid-column: 1;
    grid-row: 2;

    background-color: rgb(170, 196, 221);
    background-image: url(resources/Icon_Result.png);
    background-position: center center;
    background-size: min(10vh, 10vw);
}

#Step4 {
    grid-column: 2;
    grid-row: 2;

    background-color: rgb(227, 180, 213);
    background-image: url(resources/Icon_Analysis.png);
    background-position: center center;
    background-size: min(10vh, 10vw);
}

.Title {
    grid-column: 1/-1;
    grid-row: 1;

    font-size: min(8vh, 8vw);
    margin: min(1vh, 1vw);
    margin-bottom: 0;
    line-height: 0.6;
    font-weight: 700;

    padding: 16px;
}

.Canv {
    grid-column: 2/8;
    grid-row: 2/8;

    width: 100%;
    height: 100%;

    border-style: solid;
}

.Button {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;

    font-size: min(5vh, 5vw);
    line-height: 0.6;
    font-weight: 400;

    text-align: center;

    border-style: dashed;

    width: 90%;
    height: 90%;
}

.Menu {
    grid-column: 1/3;
    grid-row: 8;

    margin-left: 10%;
    margin-bottom: 10%;
}

.NextStep {
    grid-column: 7/-1;
    grid-row: 8;

    margin-right: 10%;
    margin-bottom: 10%;
}

#startCamera {
    grid-column: 4/6;
    grid-row: 8;

    margin-bottom: 10%;
}

.Step1Content {
    display: none;
}

.Step2Content {
    display: none;
}

.Step3Content {
    display: none;
}

.Step4Content {
    display: none;
}

#imageFeedback {
    grid-column: 6/8;
    grid-row: 1;

    border-style: solid;

    margin-top: calc(10% - 3px);

    width: 100%;
    height: 90%;
}

#NextStep2 {
    background-color: rgb(150,0,0);
}

.imageDescriptionSize {
    grid-column: 6/8;
    grid-row: 1;

    border-style: solid;

    margin-top: calc(10% - 3px);

    width: 100%;
    height: 90%;
}

.imageDescriptionAmount {
    grid-column: 4/6;
    grid-row: 1;

    border-style: solid;

    margin-top: calc(10% - 3px);

    width: 100%;
    height: 90%;
}

.imageDescriptionFines {
    grid-column: 3/6;
    grid-row: 6;

    width: 100%;
    height: 100%;

    border-style: solid;
}

.finalCanv {
    margin: 0;

    grid-column: 1/9;
    grid-row: 2/6;

    width: 100%;
    height: 100%;
}

#myChart {
    width: 100%;
    height: 100%;
}

#Instructions {
    grid-column: 2/8;
    grid-row: 2/8;

    width: 100%;
    height: 100%;

    font-size: min(6vh, 6vw);
    line-height: 0.6;
    font-weight: 400;
}

#imageDescriptionSizeMedian2 {
    grid-column: 6/8;
    grid-row: 6;
}