:root{
    --selectorColor: #bd3636;
    --mbGrey: #4D4E50;
    --mbDkMint: #0097a7;
    --maxDiagHeight: calc(80 * var(--vh));
    --maxDiagWidth: calc(65 * var(--vw));
    --units: min(var(--vh), var(--vw));
    --diagSize: min(var(--maxDiagHeight), var(--maxDiagWidth) );
    --sideBoxWidth: calc( 30 * var(--vw) );
    --sideBoxUnits: min(calc(0.01 * var(--sideBoxWidth)), calc(0.0084 * var(--maxDiagHeight)));
}

@media (orientation:portrait){
    :root{
        --maxDiagHeight: calc(53 * var(--vh));
        --maxDiagWidth: calc(90 * var(--vw));
        --diagSize: min(var(--maxDiagHeight), var(--maxDiagWidth) );
        --sideBoxUnits: calc(0.011 * var(--sideBoxWidth));
    }
}

*{
    box-sizing: border-box;
    font-family: "Lato";
}

html, body{
    height: 100%;
    background-color: cornsilk;
    overflow: hidden;
}

p{
    font-family: 'Lato';
}

.gridContainer{
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: calc(2*var(--vw)) calc(68*var(--vw)) calc(28*var(--vw)) calc(2*var(--vw));
    grid-template-rows: calc(2*var(--vh)) calc(3*var(--vh)) calc(12*var(--vh)) calc(55*var(--vh))  calc(24*var(--vh));
}

.content{
    display: none;
}

.mbLogoContainer{
    grid-row: 2 / span 1;
    grid-column: 2 / span 1;
    top: calc(2 * var(--vh));
    left: 2vw;
    width: 16vw;
}

.mbLogoContainer img{
    width: 100%;
    z-index: 0;
}

.cycleTitle{
    grid-row: 3 / span 1;
    grid-column: 2 / span 2;
}

.anchorBox{
    display: block;
    z-index: 10;
    grid-row: 4 / span 2;
    grid-column: 2 / span 1;
}

.sidePanelContainer{
    grid-row: 4 / span 1;
    grid-column: 3 / span 1;
    z-index: 1;
}

h1{
    text-align: center;
    font-family: 'Noto Sans JP';
    font-size: calc(6 * var(--vh));;
    color: var(--mbGrey);
    margin: auto;
}

button{
    position: absolute;
    top: calc(2 * var(--units));
    padding: 0.5%;
    border: calc(var(--units)) var(--selectorColor) solid;
    border-radius: 0.5em;
    font-size: calc(3.5 * var(--units));
    color: var(--selectorColor);
    background-color: white;
    z-index: 6;
}

.citeAs{
    text-align: left;
    bottom: 0;
    top: auto;
    font-size: calc(1.8 * var(--units));
    border: calc(0.1*var(--units)) var(--mbGrey) solid;
    color: black;
}

.citeAs:hover{
    cursor: pointer;
    color: rgb(51,93,171);
}

button:focus {outline:0;}

.startHere{
    left: 0;
}

.reset{
    right: 0;
    color: white;
    background-color: var(--selectorColor);
    border-color: white;
}

.startHere:hover, .reset:hover{
    cursor: pointer;
}

.overlayPanel{
    display: none;
    position: absolute;
    top: 7%;
    left: 10%;
    width: 80%;
    font-size: calc(1.8 * var(--units));
    border: calc(1 * var(--units)) var(--mbGrey) solid;
    background-color: white;
    border-radius: calc(4 * var(--units));
    padding: calc(2.5 * var(--units)) calc(4.5 * var(--units));
    z-index: 50;
}

.diagram{
    display: block;
    position: relative; 
    z-index: 0;
    width: var(--diagSize);
    margin: auto;
}

.diagram .cycleImage{
    width: var(--diagSize);
    height: var(--diagSize);
}

.diagram .overlayRegPanelTitle{
    display: flex;
    align-items: center;
    font-family: 'Open Sans';
    font-size: calc(2.5 * var(--units));
    color: #218ac5;
}

.diagram .overlayRegPanelTitle img{
    height: calc(6 * var(--units));
    width: auto;
}

.diagram .overlayRegPanelTitle a{
    text-decoration: none;
}

.diagram .overlayRegPanelTitle a:visited{
    color: #218ac5;
}

.instructions{
    top: 3%;
    left: 10%;
    width: 80%;
}

.instructions img{
    height: 90%;
    width: 90%;
}

.overlayPanel .closeBtn{
    right: calc(1.5 * var(--units));
    top: calc(1.5 * var(--units));
}

.instrucHeader{
    font-family: 'Noto Sans JP';
    color: var(--mbDkMint);
    font-size: calc(4.5 * var(--units));
    margin-bottom: calc(1.5 * var(--units));;
}

.instrucSubHeader{
    font-family: 'Noto Sans JP';
    color: var(--mbDkMint);
    font-size: calc(2.5 * var(--units));
    margin-bottom: calc(0.8 * var(--units));;
}

.guideRow{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(1.4 * var(--units)) calc(0.8 * var(--units));
}

.guideRow p{
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
}

.guideImgContainer{
    flex-basis: 15%;
}

.guideImgContainer img{
    width: 100%;
}

.guideTextContainer{
    flex-basis: calc(85% - (0.8*var(--units)));
}

.guideTextContainer2{
    flex-basis: calc(70% - (1.6*var(--units)));
}

.selecter:hover{
    cursor: pointer;
}

.outerLegendPopSelecter{
    position: absolute;
    width: 22.5%;
    height: 22.5%;
    border-radius: 50%;
}

.innerLegendPopSelecter{
    position: absolute;
}

.legendPopSelecter:hover, .panelSelecter:hover{
    cursor: pointer;
}

.legendPop{
    position: absolute;
    display: none;
    align-items: center;
    min-width: 80%;
    min-height: 20%;
    gap: 3%;
    background-color: white;
    border-width: calc(1 * var(--units));
    border-color: var(--mbDkMint);
    border-style: solid;
    padding: calc(2 * var(--units));
    padding-left: calc(2 * var(--units));
    border-radius: 0.7em;
    font-size: calc(3 * var(--units));
    z-index: 10;
}

.legendPopNarrow{
    min-width: 50%;
}

.legendPopLogo{
    width: calc(8 * var(--units));
}

.legendPopLogo img{
    width: calc(8 * var(--units));
    height: auto;
}

#legPopSelFunder{
    top: 39%;
    left: 1.2%;
}

#legendPopFunder{
    top: 18%;
    left: 5%;
}

#legPopSelInst1{
    top: 1.3%;
    left: 39%;
}

#legPopSelInst2{
    top: 76.6%;
    left: 39%;
}

#legendPopInst1{
    top: 25%;
    left: 2%;
}

#legendPopInst2{
    top: 48%;
    left: 19%;
}

#legPopSelPlatform{
    top: 39%;
    left: 76.6%;
}

#legendPopPlatform{
    top: 12%;
    left: 15%;
}

.inline{
    display: inline-block;
}

#legendPopInst1 .legendPopLabel, #legendPopInst2 .legendPopLabel{
    line-height: calc(7 * var(--units));
}

#legendPopInst1 .legendPopLogo, #legendPopInst2 .legendPopLogo{
    width: calc(6 * var(--units));
}

#legendPopInst1 .legendPopLogo img, #legendPopInst2 .legendPopLogo img{
    width: calc(6 * var(--units));
}

#legPopSelXref{
    top: 38.5%;
    left: 40%;
    width: 6%;
    height: 8%;
}

#panelSelXref{
    top: 38.5%;
    left: 40%;
    width: 6%;
    height: 8%;
}

#panelSelDatacite{
    top: 38.5%;
    left: 53.5%;
    width: 8%;
    height: 8%;
}


#legendPopDatacite{
    top: 18%;
    left: 30%;
}

#panelSelRaid{
    top: 47.5%;
    left: 45.5%;
    width: 9.5%;
    height: 5.5%;
}

#legendPopRaid{
    top: 27%;
    left: 10%;
}

#legendPopRaid .legendPopLabel{
    font-size: calc(2.5 * var(--units));
}

#panelSelOrcid{
    top: 54%;
    left: 39.6%;
    width: 7%;
    height: 7%;
    border-radius: 50%;
}


#legendPopOrcid{
    top: 33%;
    left: 2%;
}

#panelSelRor{
    top: 54%;
    left: 52.5%;
    width: 9.5%;
    height: 7%;
}

#legendPopRor{
    top: 33%;
    left: 2%;
    min-width: 90%;
}

#legendPopRor .legendPopLabel{
    font-size: calc(3 * var(--units));
}

.closeBtn{
    position: absolute;
    right: calc(0.8 * var(--units));
    top: calc(0.8 * var(--units));
    border-width: calc(0.5 * var(--units));
    border-color: var(--selectorColor);
    color: var(--selectorColor);
    border-style: solid;
    border-radius: calc(0.8 * var(--units));
    font-size: calc(2.5 * var(--units));
    text-align: center;
    padding: calc(0.16 * var(--units)) calc(0.2 * var(--units));
    background-color: #E2E2E2;
}

.closeBtn:hover{
    cursor: pointer;
}

.sidePanel{
    display: none;
    position: relative;
    flex-wrap: wrap;
    width: 100%;
    border: 0 var(--mbGrey) solid;
    border-width: calc(2 * var(--sideBoxUnits));
    border-radius: calc(10 * var(--sideBoxUnits));
    padding: calc(6 * var(--sideBoxUnits));
    margin-top: 2%;
    margin-right: 2%;
    background-color: white;
    font-size: calc(4 * var(--sideBoxUnits));
    z-index: 2;
}

.leftSidePanelBox, .rightSidePanelBox{
    flex-basis: 100%;
}

.sidePanelTitleRow{
    flex-basis: 100%;
    display: flex;
    align-items:flex-start;
    gap: calc(3 * var(--sideBoxUnits));
}

.sidePanelTitle{
    font-family: 'Noto Sans JP';
    font-size: calc(5.5 * var(--sideBoxUnits));
}

.sidePanelLeftArrow{
    width: 0; 
    height: 0; 
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent; 
    border-right: 0 solid var(--selectorColor);
    border-top-width: calc(4 * var(--sideBoxUnits));
    border-bottom-width: calc(4 * var(--sideBoxUnits));
    border-right-width: calc(3 * var(--sideBoxUnits));
}

.sidePanelRightArrow{
    width: 0; 
    height: 0; 
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent; 
    border-left: 0 solid var(--selectorColor);
    border-top-width: calc(4 * var(--sideBoxUnits));
    border-bottom-width: calc(4 * var(--sideBoxUnits));
    border-left-width: calc(3 * var(--sideBoxUnits));
    margin-left: auto;
}

.sidePanelLeftArrow:hover, .sidePanelRightArrow:hover{
    cursor: pointer;
}

.legend{
    display: block;
    max-height: calc(114 * var(--sideBoxUnits));
    font-size: calc(3.8 * var(--sideBoxUnits));
}

#legendTitleTop{
    margin-bottom: calc(3 * var(--sideBoxUnits));
}

#legendTitleBottom{
    margin-bottom: calc(3 * var(--sideBoxUnits));
    margin-top: calc(4 * var(--sideBoxUnits));
}

.legendCells{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: calc(0.7 * var(--sideBoxUnits));
}

.legendCellLeft{
    --iconSize: calc(5.8 * var(--sideBoxUnits));
    width: var(--iconSize);
    height: var(--iconSize);
    flex-basis: 10%;
}

.outputCell{
    height: calc(8 * var(--sideBoxUnits));
}

.legendCellLeft img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.legendCellRight{
    flex-basis: calc(90% - (0.7 * var(--sideBoxUnits)));
}

.outputLabelCell{
    display: flex;
    align-items: center;
}

.logos{
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 2%;
}

.logos img{
    width: 12%;
    margin: 2%;
}

.benefits{
    margin-top: 5%;
    color: #3997A6;
}

ol{
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  padding-inline-start: 1em;
}

@media (orientation:portrait) {
    h1{
        font-size: calc(5.5 * var(--vw));
    }
    .anchorBox{
        grid-row: 4 / span 1;
        grid-column: 2 / span 2;
    }
    .sidePanelContainer{
        grid-row: 5 / span 2;
        grid-column: 2 / span 2;
        z-index: 1;
    }
    .reset{
        top: auto;
        bottom: 0;
    }
    .sidePanel{
        gap: 3%;
        width: 90%;
        margin: auto;
    }
    .leftSidePanelBox, .benefits{
        flex-basis: 48.5%;
    }
    .benefits{
        margin-top: 2.5%;
    }
    .legendContent{
        display: flex;
        align-items: flex-start;
    }
    #legendTitleBottom{
        margin-top: 0;
    }
    #actors{
        flex-basis: 48%;
    }
    #pidsAndReg{
        flex-basis: 52%;
    }
}

@media (max-aspect-ratio:7/10) {
    :root{
        --sideBoxUnits: calc(0.015 * var(--sideBoxWidth));
    }
    /*.sidePanel{
        font-size: calc(5 * var(--sideBoxUnits));
    }*/

}

@media (min-aspect-ratio:7/10) and (max-aspect-ratio:10/9){
    button{
        font-size: calc(3 * var(--units));
    }
    .instructions{
        top: 2%;
        width: 100%;
        left: 0;
        font-size: calc(1.6 * var(--units));
    }
    .instrucHeader{
    font-size: calc(2.5 * var(--units));
    }
    .legendPop{
        font-size: calc(2 * var(--units));
    }
    .citeAs{
        font-size: calc(1.5 * var(--units));
    }
}


@media (max-width:1000px){
    html, body{
        height: 100vh;
    }
}