@font-face{
    font-family: "Strawford";
    src: url("fonts/strawford-regular-webfont.woff") format("woff");
    font-weight: normal;
}

@font-face{
    font-family: "Strawford";
    src: url("fonts/strawford-medium-webfont.woff") format("woff");
    font-weight: bold;
}


:root {
    --main-color:#000;
    --sec-color:#fff;
}

body{
    color:var(--main-color);
    font-family: "Strawford";
    font-weight: normal;
    width:auto;
    margin:2em auto 0 auto;
    position:relative;
    min-height:99vh;
}

.left{
    text-align:left;
}

.centered{
    text-align:center;
}

.fr{
    opacity:0.7;
}

.upper{
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6{
    font-family: "Strawford";
    font-weight: bold;
}

a:link, a:visited, a:active, a:hover{
    color:var(--main-color);
}

#main{
    font-family:"Strawford";
    font-weight: normal;
    text-align:center;
    min-height:75vh;
    margin:3vh auto 5vh auto;
    font-size:1.1em;
}

.title{
    font-size: 3em;
    text-transform: uppercase;
    margin:0 auto;
    text-align:center;
}

.credits{
    margin:0 auto;
    text-align: center;
    font-size: 0.3em;
    visibility: hidden;
}

#main p{
    margin:0vh auto 1vh auto;
    max-width:60vw;
}

#photos_div{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    justify-items: center;
    max-width:90vw;
    margin:4vh auto;
}

.nophoto{
    border:1px solid var(--main-color);
    margin:0.5vw 0.5vw;
    width:15vw;
    min-height:15vw;
    font-size:0.8em;
    padding:1em 0.8em 0.5em 0.8em;
    display:grid;
}

.nophoto svg{
    max-width:15px;
    margin-bottom:1vh;
}

.latlong{
    font-size:0.8em;
    align-self: center;
}

.nophoto p.bottom{
    align-self: end;
    text-align: center;
}

#upload_img_div{
    font-family:"Strawford";
    font-weight: normal;
    text-align:center;
    min-height:75vh;
    margin:5vh auto;
    font-size:1.5em;
}

#spinner{
    visibility:hidden;
    max-width:50px;
    animation-name: loading;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes loading {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

#file_label{
    color:var(--main-color);
    border:1px solid var(--main-color);
    display:block;
    margin:10vh auto;
    width:15vw;
    min-height:15vw;
}

#file_label p{
    margin-top:6vw;
    text-transform: uppercase;
}

input[type="file"] {
    opacity:0;
    position:fixed;
    width:0.1em;
    top:0;
    right:0;
}

input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color:var(--main-color);
    border:1px solid var(--main-color);
    padding:0.25em 0.35em;
    margin:1em auto;
    display:none;
    text-transform: uppercase;
}

#upload_img_submit{
    font-family: "Strawford";
    display:none;
    font-size:1em;
    padding:0.6em 0.8em;
    background-color:var(--sec-color);
}

form{
    text-align:center;
    margin:1em auto 1em auto;

}

/* USER PAGE */
#user_div{
    font-family: "Strawford";
    min-height:75vh;
    text-align:center;
    max-width:60vw;
    margin:3vh auto;
    font-weight:normal;
    font-size:1.1em;
}

#user_div h1, #user_div h2, #user_div h3, #user_div h4, #user_div h5, #user_div h6{
    margin-bottom:1vh;
}

#user_div h2{
    font-size:3em;
    text-transform: uppercase;
}

#user_div p{
    margin-bottom:3vh;
}

#user_div form{
    margin-top:2.5vh;
    font-weight:normal;
}

#user_div input{
    display:inline-block;
    background-color:#FCFCFC;
    border:1px solid var(--main-color);
    font-family: "Strawford";
    font-weight:normal;
    font-size:1em;
    padding:1em 1em;
    width:20vw;

}

#user_div input[type="submit"]{
    font-weight:normal;
    background-color:var(--sec-color);
    font-family: "Strawford";
    font-size:1em;
    padding:0.8em 1em;
    width:auto;
}

#user_div input[type="checkbox"]{
    display:inline;
    width:auto;
}

#user_warning{
    min-height:75vh;
    font-size:1.1em;
    max-width:60vw;
    text-align:left;
    margin:5vh auto;
    font-family:"Strawford";
    font-weight:normal;
    padding:0 0 1em 0;
}

footer{
    width:100vw;
    max-width:100vw;
    min-height:15vh;
    background-color:var(--main-color);
    color:var(--sec-color);
    font-family: "Strawford";
    font-size:0.8em;
    padding:0 0;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items:center;
    margin:5vh auto 0 auto;
}

footer a:link, footer a:visited, footer a:hover, footer a:active{
    color:var(--sec-color);
}

footer div{
    margin:5vh 2vw;
    text-align:center;
}

#partners img{
    max-width:100px;
}

footer img.logo{
    max-width:100px;
}


/* everything in portrait */
@media only screen 
  and (orientation: portrait) {
    
      body{
          max-height:99vh;
          padding:0 0;
          font-size:x-small;
      } 
      
      .centered{
          text-align:center;
      }
      
      .left{
          text-align:left;
      }

      input[type="submit"] {
            font-size:1em;
            padding:0.25em 0.35em;
        }

      #main{
          max-width:90vw;
          margin-top:1.5vh;
          font-size:1.8em;
          min-height:60vh;
      }

      #main h2{
          font-size:3em;
          line-height:1.1em;
          margin:0 auto 2vh auto;
          max-width:90vw;
      }

    #main h3{
        max-width:90vw;
        margin:0 auto 2vh auto;
        font-size: 1em;
    }

      #main p{
          max-width:90vw;
          margin:0 auto 2vh auto;
      }

    #photos_div{
        display:block;
        max-width:90vw;
        margin:2.5vh auto;
        text-align: center;
    }

    .nophoto{
        width:80vw;
        height:80vw;
        font-size:0.8em;
        padding:1em 0.8em 0.5em 0.8em;
        margin:2vh auto;
        display:grid;
    }

    .nophoto svg{
        max-width:15px;
        margin-bottom:1vh;
    }

    .latlong{
        font-size:0.9em;
        align-self: center;
    }

    .nophoto p.bottom{
        align-self: end;
        text-align: center;
        font-size:1em;
    }

      #upload_img_div{
          max-width:90vw;
          margin:1.5vh auto 1vh auto;
          font-size:1.8em;
          min-height:60vh;
          position:relative;
      }

      #file_label{
          font-size:1.3em;
          padding:1.3em 1.5em;
          width:40vw;
          display:block;
          position: relative;
          margin: 10vh auto 5vh auto;
      }

    #spinner{
        visibility:hidden;
        max-width:50px;
    }

    #upload_img_submit{
        font-family: "Strawford";
        font-weight: normal;
        font-size:1.3em;
        padding:0.8em 1.8em;
    }
      
      #user_div{
        max-width:90vw;
        margin-top:1.5vh;
        font-size:1.8em;
        min-height:60vh;
      }

    #user_div h1, #user_div h2, #user_div h3, #user_div h4, #user_div h5, #user_div h6{
        margin-bottom:2vh;
    }

    #user_div h2{
        font-size:3em;
        line-height:1.1em;
    }
      
      #user_div p{
        margin:0 0 5vh 0;
    }
      

      #user_div input{
        padding:0.5em 0.6em;
        text-align:center;
        display:block;
        margin:2vh auto;
        width:70vw;
    }
      
      #user_div input[type="submit"]{
        padding:0.5em 0.6em;
        display:block;
        text-align:center;
        margin:2vh auto 0 auto;
        width:auto;
    }

    #user_div input[type="checkbox"]{
        width:auto;
    }

      #user_warning{
        max-width:90vw;
        text-align:left;
        margin-top:1.5vh;
        font-size:1.8em;
    }

    footer{
        display:block;
        text-align:center;
        vertical-align: top;
        padding:2.5vh 0;
        font-size: 1em;
    }

    footer div{
        display:block;
        vertical-align: top;
        margin:3vh 0 3vh 0;
    }


    #partners img{
        max-width:60px;
    }

    #social i{
        font-size:1em;
        margin:1vh 2vw 1vh 2vw;
    }
}


/* iPhone in landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 812px)
  and (orientation: landscape) {

    #main h3{
        max-width:60vw;
        margin:1vh auto 2vh auto;
        text-align: left;
        font-size: 1em;
    }
        
    #user_warning{
        max-width:90vw;
        text-align:left;
        margin-top:1.5vh;
        font-size:1.2em;
    }
      
      #user_div{
        max-width:90vw;
        margin-top:1.5vh; 
        font-size:1.5em;
    }
      
      #user_div input{
        padding:0.25em 0.35em;
        text-align:center;
        display:block;
        margin:2vh auto;
    }
      
      #user_div input[type="submit"]{
        padding:0.25em 0.35em;
        margin:5vh auto 0 auto;
        display:block;
        text-align:center;
    }

      
      #file_label{
        font-size:0.9em;
      }
      
      #upload_img_submit{
        font-size: 0.9em;
    }
}


/* dark mode */

@media (prefers-color-scheme: dark) {

    body{
        background-color:#111111;
        color:#fff;
    }

    a:link, a:visited, a:active, a:hover{
        color:#fff;
    }

    input{
        background-color:#111111;
        color:#fff;
    }

    input[type="submit"] {
        background-color:#111111;
        color:#fff;
        border-color:#fff;
    }

    #user_div input{
        background-color:#111111;
    }

    #user_div input[type="submit"]{
        background-color:#111111;
        color:#fff;
        border-color:#fff;
    }

    #upload_img_submit{
        background-color:#111111;
        color:#fff;
    }

    .nophoto svg{
        fill:#fff;
    }

    .nophoto{
        border-color:#fff;
    }

    #file_label{
        color:#fff;
        border-color:#fff;
    }

}