body {
    margin: 0;
    padding: 0;
    background-color: #003185;
    /* Oswald Font */
    font-family: 'Oswald', sans-serif;
    overflow: clip;
}

:root {
    --state-height: calc((100vh - 100px)/2 - 5vh);
}

/* Header */

#location-selection-header {
    width: 100%;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Location Selection Grid */

#desktop-location-selection-container {
    display: none;
    grid-template-rows: var(--state-height) 10vh var(--state-height);
    grid-template-columns: var(--state-height) 10vh var(--state-height);
    height: calc(100vh - 100px);
    width: 100%;
    margin: 0;
    padding: 0;
    justify-content: center;
}

/* Desktop logo */

#falcanna-logo-svg {
    filter: invert(100%) sepia(11%) saturate(143%) hue-rotate(40deg) brightness(111%) contrast(100%);
}

/* Locations */

#washington-svg {
    position: relative;
    top: calc(0.32 * var(--state-height));
    left: -1.5vh;
    width: calc(.95 * var(--state-height));
}

#oklahoma-svg {
    position: relative;
    top: calc(0.37 * var(--state-height));
    left: 0.5vh;
}

#germany-svg {
    position: relative;
    top:  -2.5vh;
    width: calc(.9 * var(--state-height));
}

#spain-svg {
    position: relative;
    top: 1vh;
    left: 2.5vh;
    width: calc(1.075 * var(--state-height));
}

/* Location Titles */

#washington-title {
    position: relative;
    top: calc(-2 * (var(--state-height)/2 - 17.5vh));
    left: calc(var(--state-height)/2 - 16.5vh);
    font-size: 3.2vh;
}

#oklahoma-title {
    position: relative;
    top: calc(-1 * (var(--state-height)/2 - 20vh));
    left: calc(var(--state-height)/2 - 12.5vh);
    font-size: 3.2vh;
}

#germany-title {
    position: relative;
    top: calc(-1.75 * (var(--state-height)/2 - 7.5vh));
    left: calc(var(--state-height)/2 - 21vh);
    font-size: 2.8vh;
}

#spain-title {
    position: relative;
    top: calc(-1 * (var(--state-height)/2 - 1vh));
    left: calc(var(--state-height)/2 - 18.5vh);
    font-size: 4.5vh;
}

.location-titles {
    color: #FFF;
    text-align: center;
    margin: 0;
    padding: 0;
    z-index: 3;
}

a {
    text-decoration: none;
}

/* Coming Soone */

#coming-soon-title {
    color: #FFF;
    text-align: center;
    margin: 0;
    padding: 1.5vh 0 0 0;
    z-index: 4;
    background-color: rgba(180, 180, 180, 0.379);
    position: relative;
    top: calc(-1 * (var(--state-height)/2 - 1.5vh));
    left: calc(var(--state-height)/2 - 18.5vh);
    font-size: 4vh;
    width: 35vh;
    height: 5vh;
    /* Rotation */
    transform: rotate(5deg);
}

/* Deviders on Desktop */

#top-divider-element-svg {
    position: relative;
    top: -1.5vh;
}

#left-divider-element-svg {
    transform: rotate(-90deg);
    position: relative;
    left: calc(var(--state-height)/2 - 6.5vh);
    top: calc(-1 * (var(--state-height)/2 - 5vh));
}

#right-divider-element-svg {
    transform: rotate(90deg);
    position: relative;
    left: calc(var(--state-height)/2 - 3.5vh);
    top: calc(-1 * (var(--state-height)/2 - 5vh));
}

#bottom-divider-element-svg {
    transform: rotate(180deg);
    position: relative;
    top: 1.5vh;
}

.desktop-divider-svg {
    height: var(--state-height);
    width: 10vh;
    filter: invert(100%) sepia(11%) saturate(143%) hue-rotate(40deg) brightness(111%) contrast(100%);
}

/* Styling for mobile and tablet */

#mobile-location-selection-container {
    display: grid;
}

#location-selection-header {
    font-size: 1.5em;
    margin-top: 1em;
}

#mobile-washington-svg {
    height: 100%;
    width: 27vh;
    margin-left: 5vw;
}

#mobile-oklahoma-svg {
    height: 100%;
    width: 29vh;
}

#mobile-germany-svg {
    height: 100%;
    width: 28vh;
    margin-left: 4.5vw;
}

#mobile-spain-svg {
    height: 100%;
    width: 28vh;
    margin-left: 10vw;
}

#mobile-location-selection-container {
    justify-content: center;
}

#mobile-washington-title {
    position: relative;
    top: -12.5vh;
    left: 3.2vh;
    font-size: 2.3vh;
}

#mobile-oklahoma-title {
    position: relative;
    top: -11.5vh;
    left: 3.5vh;
    font-size: 2.5vh;
}

#mobile-germany-title {
    position: relative;
    top: -12.5vh;
    left: 2.5vh;
    font-size: 2vh;
}

#mobile-spain-title {
    position: relative;
    top: -16vh;
    left: 0.5vh;
    font-size: 3.2vh;
}

#mobile-coming-soon-title {
    color: #FFF;
    text-align: center;
    margin: 0;
    padding: 0.5vh 0 0.5vh 0;
    z-index: 4;
    background-color: rgba(180, 180, 180, 0.379);
    position: relative;
    top: -15vh;
    left: 2vh;
    font-size: 2.4vh;
    width: 19vh;
    height: 2vh;
    transform: rotate(5deg);
}

#mobile-floating-logo {
    display: none;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(96deg) brightness(101%) contrast(102%);
}

@media only screen and (max-width: 768px) {
    #mobile-floating-logo {

        display: block;
        position: fixed;
        bottom: -5vh;
        right: -5vh;
        height: 17.5vh;
        width: 17.5vh;
        z-index: 5;
    }
}

@media only screen and (min-width: 768px) {
    #desktop-location-selection-container {
        display: grid;
    }
    #mobile-location-selection-container {
        display: none;
    }    
}