@font-face {
    font-family: 'CamptonLighter';
    src: url('../fonts/CamptonLight.otf') format('opentype');
}

@font-face {
    font-family: 'Campton';
    src: url('CamptonMedium.otf') format('opentype');
}

@font-face {
    font-family: 'CamptonSemiBold';
    src: url('../fonts/CamptonSemiBold.otf') format('opentype');
}

@font-face {
    font-family: 'CamptonBold';
    src: url('../fonts/CamptonBold.otf') format('opentype');
}

@font-face {
    font-family: 'CamptonBook';
    src: url('../fonts/CamptonBook.otf') format('opentype');
}


body{font-family:'Campton';background-color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center}#root{width:100VW;margin-top:6%}
canvas#mapViewer{width:100vh;border:white solid 5px}
#showDetailsOnScreen{display:none;height:auto;width:10%;padding-left:2%;background-color:var(--details-background-color, rgba(0, 0, 0, .6));z-index:9999;color:#fff;position:fixed;font-weight:700;top:0;transform:translateY(-100%);box-shadow:0 0 10px #000c}
#stageChanger{position:fixed;align-items:center;top:5%;right:5%;width:7.5%;font-size:8pt;font-weight:bolder;color:#fff;background-color:#153569;padding:8px 12px;border:#153569 solid 3px;outline:none;cursor:pointer}#footer{position:absolute;bottom:0;left:0;width:100%;margin-bottom:1%;text-align:center;font-size:15pt;color:#153569;font-weight:700; display: none;}#stageName{z-index:-111;position:absolute;bottom:0;top:6%;width:100%;margin-bottom:1%;text-align:center;font-family:'Campton';font-size:15pt;color:#153569;font-weight:700}
#howToUse{font-family:Arial,Helvetica,sans-serif;font-size:12pt;font-weight:bolder;width:2%;height:2%;padding:10px 0;background-color:#fff;border-radius:50px;border:#153569 solid 5px;text-align:center;color:#153569;cursor:pointer;position:fixed;bottom:20px;right:30px;display:flex;align-items:center;justify-content:center}
#howToUse:hover{font-family:Arial,Helvetica,sans-serif;font-size:15pt;font-weight:bolder;width:2%;height:2%;padding:10px 0;background-color:#153569;border-radius:50px;border:#9cb9e7 solid 5px;text-align:center;color:#9cb9e7;cursor:pointer;position:fixed;bottom:20px;right:30px;display:flex;align-items:center;justify-content:center}
#howToUsePanel img{width:20px;height:auto;margin-right:10px;vertical-align:middle}
#howToUsePanel{font-family:Arial,Helvetica,sans-serif;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;border:2px solid #153569;border-radius:10px;box-shadow:0 0 10px #00000080;z-index:9999;max-width:400px;text-align:center}
#closeHowToUsePanel{font-weight:bolder;font-family:Arial,Helvetica,sans-serif;margin-top:20px;padding:10px 20px;background-color:#153569;color:#fff;border:none;border-radius:5px;cursor:pointer}
#closeHowToUsePanel:hover{font-weight:bolder;background-color:#89b4d6;color:#153569}
#legendPart{font-family:Arial,Helvetica,sans-serif;width:15%;height:205px;background-color:#f0f0f0;border:2px solid #c9c9c9;position:fixed;bottom:20px;left:20px;z-index:999;display:flex;flex-direction:row;align-items:flex-start;padding:10px 10px 15px}
#legendContainer{margin-top:10px;margin-bottom:5px;display:flex;align-items:center}
#legendColor{margin-right:10px;width:15px;height:15px}#legendText{font-size:10pt}
#column{display:inline-block;vertical-align:top;margin-left:15px}


@media only screen and (max-width: 480px) and (orientation: portrait){
    canvas#mapViewer{
        width: 50vh;
        height: 50vh;
        border:white solid 5px
    }

    #howToUse {
        display: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12pt;
        font-weight: bolder;
        width: 5%;
        height: 2%;
        padding: 10px 0;
        background-color: #fff;
        border-radius: 50px;
        border: #153569 solid 5px;
        text-align: center;
        color: #153569;
        cursor: pointer;
        position: fixed;
        bottom: 7.5%;
        right: 7.5%;
        align-items: center;
        justify-content: center;
    }

    body #legendPart {
        font-family: Arial, Helvetica, sans-serif;
        width: auto;
        height: auto;
        background-color: #f0f0f0;
        border: 2px solid #c9c9c9;
        position: fixed;
        bottom: 5%;
        left: 5%;
        z-index: 999;
        display: none;
        flex-direction: row;
        align-items: flex-start;
        padding: 20px;
    }
    
    #legendContainer {
        margin-top: 10px;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }
    
    #legendColor {
        margin-right: 5px;
        width: 10px;
        height: 10px;
    }
    
    #legendText {
        font-size: 8pt;
    }
    
    #column {
        display: inline-block;
        vertical-align: top;
        margin-left: 15px;
    }

    #stageChanger {
        position: fixed;
        align-items: center;
        top: 5%;
        right: 5%;
        width: 25%;
        font-size: 8pt;
        font-weight: bolder;
        color: #fff;
        background-color: #153569;
        padding: 8px 12px;
        border: #153569 solid 3px;
        outline: none;
        cursor: pointer;
        font-size: 5pt;
    }

     body #showDetailsOnScreen {
        display: none;
        height: auto;
        width: 40%;
        padding-left: 2%;
        background-color: var(--details-background-color, rgba(0, 0, 0, .6));
        z-index: 9999;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        position: fixed;
        font-weight: 700;
        top: 0;
        transform: translateY(-100%);
        box-shadow: 0 0 10px #000c;
    }
}

@media only screen and (max-width: 960px) and (orientation: landscape){
    canvas#mapViewer{
        width: 50vh;
        height: 50vh;
        border:white solid 5px
    }

    #howToUse {
        display: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12pt;
        font-weight: bolder;
        width: 5%;
        height: 2%;
        padding: 10px 0;
        background-color: #fff;
        border-radius: 50px;
        border: #153569 solid 5px;
        text-align: center;
        color: #153569;
        cursor: pointer;
        position: fixed;
        bottom: 7.5%;
        right: 7.5%;
        align-items: center;
        justify-content: center;
    }

    #legendPart {
        font-family: Arial, Helvetica, sans-serif;
        width: auto;
        height: auto;
        background-color: #f0f0f0;
        border: 2px solid #c9c9c9;
        position: fixed;
        bottom: 5%;
        left: 5%;
        z-index: 999;
        display: none;
        flex-direction: row;
        align-items: flex-start;
        padding: 20px;
    }
    
    #legendContainer {
        margin-top: 10px;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }
    
    #legendColor {
        margin-right: 5px;
        width: 10px;
        height: 10px;
    }
    
    #legendText {
        font-size: 8pt;
    }
    
    #column {
        display: inline-block;
        vertical-align: top;
        margin-left: 15px;
    }

    #stageChanger {
        position: fixed;
        align-items: center;
        top: 5%;
        right: 5%;
        width: 15%;
        font-size: 8pt;
        font-weight: bolder;
        color: #fff;
        background-color: #153569;
        padding: 8px 12px;
        border: #153569 solid 3px;
        outline: none;
        cursor: pointer;
        font-size: 5pt;
    }

    #showDetailsOnScreen {
        display: none;
        height: auto;
        width: 17.5%;
        padding-left: 2%;
        background-color: var(--details-background-color, rgba(0, 0, 0, .6));
        z-index: 9999;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        position: fixed;
        font-weight: 700;
        top: 0;
        transform: translateY(-100%);
        box-shadow: 0 0 10px #000c;
    }
}

@media only screen and (max-width: 1024px) and (orientation: portrait){
    canvas#mapViewer{
        width: 50vh;
        height: 50vh;
        border:white solid 5px
    }

    #howToUse {
        display: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12pt;
        font-weight: bolder;
        width: 5%;
        height: 2%;
        padding: 10px 0;
        background-color: #fff;
        border-radius: 50px;
        border: #153569 solid 5px;
        text-align: center;
        color: #153569;
        cursor: pointer;
        position: fixed;
        bottom: 7.5%;
        right: 7.5%;
        align-items: center;
        justify-content: center;
    }

    #howToUse:hover {
        display: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12pt;
        font-weight: bolder;
        width: 5%;
        height: 2%;
        padding: 10px 0;
        background-color: #fff;
        border-radius: 50px;
        border: #153569 solid 5px;
        text-align: center;
        color: #153569;
        cursor: pointer;
        position: fixed;
        bottom: 7.5%;
        right: 7.5%;
        align-items: center;
        justify-content: center;
    }

    #legendPart {
        font-family: Arial, Helvetica, sans-serif;
        width: auto;
        height: auto;
        background-color: #f0f0f0;
        border: 2px solid #c9c9c9;
        position: fixed;
        bottom: 5%;
        left: 5%;
        z-index: 999;
        display: block;
        flex-direction: row;
        align-items: flex-start;
        padding: 20px;
    }
    
    #legendContainer {
        margin-top: 10px;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }
    
    #legendColor {
        margin-right: 5px;
        width: 10px;
        height: 10px;
    }
    
    #legendText {
        font-size: 8pt;
    }
    
    #column {
        display: inline-block;
        vertical-align: top;
        margin-left: 15px;
    }

    #stageChanger {
        position: fixed;
        align-items: center;
        top: 5%;
        right: 5%;
        width: 20%;
        font-size: 8pt;
        font-weight: bolder;
        color: #fff;
        background-color: #153569;
        padding: 8px 12px;
        border: #153569 solid 3px;
        outline: none;
        cursor: pointer;
        font-size: 5pt;
    }

    #showDetailsOnScreen {
        display: none;
        height: auto;
        width: 20%;
        padding-left: 2%;
        background-color: var(--details-background-color, rgba(0, 0, 0, .6));
        z-index: 9999;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        position: fixed;
        font-weight: 700;
        top: 0;
        transform: translateY(-100%);
        box-shadow: 0 0 10px #000c;
    }
}