/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap'); /* Latin */
 @import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap'); /* Japanese */
 
 /* Core */
 
 html, body, .container, .screen, .crt {
     height:100%;
 }
 
 body {
     background-color: #143601;
     color: #aad576;
     font-family: 'Sawarabi Mincho', sans-serif;
     font-size: 1em;
     margin: 0em;
     text-transform: lowercase;
 }
 
 a, a:visited {
     color: #73a942;
 }
 
 hr {
     border: 0;
     height: 0.1em;
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(170, 213, 118, 0.75), rgba(0, 0, 0, 0));
 }
 
.crt {
    display: flex;
    flex-flow: column nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}
 
/* Languages */

.jp, .ja {
    font-family: 'M PLUS 1p', sans-serif !important;
}
 
 /* Header */
 
 header #block-sitetitle {
     font-size: 2em;
     text-align: center;
 }
 
 header #block-sitetitle a {
     font-size: 3em;
     text-decoration: none;
 }
 
 header #block-sitetitle a span {
     display: block;
     clear: both;
 }
 
 header #block-sitetitle a span.title-en {
     line-height: 0.6em;
     padding-top: 0.2em;
 }
 
 header #block-sitetitle a span.title-jp {
     font-size: 0.6em;
 }
 
 header #block-sitetitle p {
     font-size: 0.8em;
     margin: 0em;
 }

h2.section-title {
    text-align: center;
    margin:0;
    padding-top:1em;
    padding-bottom:1em;
}

main {
    max-height: 70vh;
    max-width: 900px;
    overflow: scroll;
}

/* Countries */
.countries {
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    align-items: flex-start;
    justify-content: center;
    
    padding-bottom: 1em;
}
 
/* Photos */
.photos {
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    align-items: flex-start;
    justify-content: center;
}

.photo {
    text-align: center;
    width: 106px;
}

.photo-full {
    text-align: center;
}

.photo-full .full {
    border: solid 0.2em #333;
    width:98%;
}

.photo .thumb {
    border: solid 0.2em #333;
    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(80deg);
    height:100px;
    width: 100px;
}

.photo .title, .photo .city {
    margin:0;
}

.photo .city {
    font-size: 0.5em;
}
 
 /* Footer */
 
 footer {
     font-size:0.7em;
     text-align: center;
 }
 
 /* Responsive */
 
 @media only screen and (max-width: 532px) {
     header #block-sitetitle a span.title-jp, header #block-sitetitle p {
         display: none;
     }
     
     header #block-sitetitle a span.title-en {
          line-height: inherit;
      }
     
     header #block-sitetitle a {
         font-size: 15vw;
     }
 }
 
 /****************************************/
 
 /* CRT */
 
 #switch {
       display: none;
     }
     
     .switch-label {
       display: none;
       cursor: pointer;
       background: #fff;
       color: #111;
       padding: 10px;
       padding-left: 15px;
       padding-right: 15px;
       border-radius: 5px;
       margin-top: 10px;
       box-shadow: 0 2px #666;
     }
     .switch-label::after {
       content: "on";
     }
     .switch-label::before {
       content: " ";
       display: inline-block;
       border-radius: 100%;
       width: 10px;
       height: 10px;
       background: #003321;
       margin-right: 10px;
       border: 1px solid #111;
     }
     .switch-label:active {
       box-shadow: none;
       transform: translate3d(0, 2px, 0);
     }
     
     #switch:checked + .switch-label::before {
       background: #22ff55;
     }
     #switch:checked + .switch-label::after {
       content: "off";
     }
     
     @keyframes flicker {
       0% {
         opacity: 0.2537;
       }
       5% {
         opacity: 0.79149;
       }
       10% {
         opacity: 0.3027;
       }
       15% {
         opacity: 0.2269;
       }
       20% {
         opacity: 0.37929;
       }
       25% {
         opacity: 0.78373;
       }
       30% {
         opacity: 0.94509;
       }
       35% {
         opacity: 0.41502;
       }
       40% {
         opacity: 0.16736;
       }
       45% {
         opacity: 0.38803;
       }
       50% {
         opacity: 0.27027;
       }
       55% {
         opacity: 0.30644;
       }
       60% {
         opacity: 0.27263;
       }
       65% {
         opacity: 0.94931;
       }
       70% {
         opacity: 0.33908;
       }
       75% {
         opacity: 0.17591;
       }
       80% {
         opacity: 0.58871;
       }
       85% {
         opacity: 0.31861;
       }
       90% {
         opacity: 0.99894;
       }
       95% {
         opacity: 0.39015;
       }
       100% {
         opacity: 0.53883;
       }
     }
     .container {
       position: relative;
       overflow: hidden;
     }
     .container::after {
       content: " ";
       display: block;
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       background: rgba(18, 16, 16, 0.1);
       opacity: 0;
       z-index: 2;
       pointer-events: none;
     }
     .container::before {
       content: " ";
       display: block;
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
       z-index: 2;
       background-size: 100% 2px, 3px 100%;
       pointer-events: none;
     }
     
     #switch:checked ~ .container::after {
       animation: flicker 0.15s infinite;
     }
     
     @keyframes turn-on {
       0% {
         transform: scale(1, 0.8) translate3d(0, 0, 0);
         -webkit-filter: brightness(30);
         filter: brightness(30);
         opacity: 1;
       }
       3.5% {
         transform: scale(1, 0.8) translate3d(0, 100%, 0);
       }
       3.6% {
         transform: scale(1, 0.8) translate3d(0, -100%, 0);
         opacity: 1;
       }
       9% {
         transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
         -webkit-filter: brightness(30);
         filter: brightness(30);
         opacity: 0;
       }
       11% {
         transform: scale(1, 1) translate3d(0, 0, 0);
         -webkit-filter: contrast(0) brightness(0);
         filter: contrast(0) brightness(0);
         opacity: 0;
       }
       100% {
         transform: scale(1, 1) translate3d(0, 0, 0);
         -webkit-filter: contrast(1) brightness(1.2) saturate(1.3);
         filter: contrast(1) brightness(1.2) saturate(1.3);
         opacity: 1;
       }
     }
     @keyframes turn-off {
       0% {
         transform: scale(1, 1.3) translate3d(0, 0, 0);
         -webkit-filter: brightness(1);
         filter: brightness(1);
         opacity: 1;
       }
       60% {
         transform: scale(1.3, 0.001) translate3d(0, 0, 0);
         -webkit-filter: brightness(10);
         filter: brightness(10);
       }
       100% {
         animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
         transform: scale(0, 0.0001) translate3d(0, 0, 0);
         -webkit-filter: brightness(50);
         filter: brightness(50);
       }
     }
     .screen {
       width: 100%;
       height: 100%;
       border: none;
     }
     
     #switch ~ .container > .screen {
       animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
       animation-fill-mode: forwards;
     }
     
     #switch:checked ~ .container > .screen {
       animation: turn-on 4s linear;
       animation-fill-mode: forwards;
     }
     
     @keyframes overlay-anim {
       0% {
         visibility: hidden;
       }
       20% {
         visibility: hidden;
       }
       21% {
         visibility: visible;
       }
       100% {
         visibility: hidden;
       }
     }
     .overlay {
       color: #00FF00;
       position: absolute;
       top: 20px;
       left: 20px;
       font-size: 60px;
       visibility: hidden;
       pointer-events: none;
     }
     
     #switch:checked ~ .container .overlay {
       animation: overlay-anim 5s linear;
       animation-fill-mode: forwards;
     }
     
     @keyframes textShadow {
           0% {
             text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           5% {
             text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           10% {
             text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           15% {
             text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           20% {
             text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           25% {
             text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           30% {
             text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           35% {
             text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           40% {
             text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           45% {
             text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           50% {
             text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           55% {
             text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           60% {
             text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           65% {
             text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           70% {
             text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           75% {
             text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           80% {
             text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           85% {
             text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           90% {
             text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           95% {
             text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
           100% {
             text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
           }
         }
         .crt {
           animation: textShadow 1.6s infinite;
         }