@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
  	box-sizing: border-box;
	margin: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}

:focus {
    outline: none;
}

html { 
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

body {
	font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
}

a {
	text-decoration: none;
}

img:not(#aboutGallery a img) {
    object-fit: contain;
    padding-bottom: 10vh;
    padding-bottom: calc(var(--vh, 1vh) * 10);
}

p {
	color: #808080;
	text-align: justify;
    width: 80%;
}

.flex {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#pleaseRotate {
    display: none;
    justify-content: space-evenly;
    align-items: center;
}

#pleaseRotate p {
    font-size: 3vw;
    text-align: center;
}


div.section {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    background-color: #fff;
    width: 100%;
}

div.section a {
    flex-direction: column;
    font-size: 4.5vw;
}

div.section a p {
    overflow: auto;
    padding: 10vh 0;
    padding: calc(var(--vh, 1vh) * 10) 0;
}

div#gallery_imgs {
    flex-wrap: wrap;
    overflow: auto;
}

div.section:not(div#about) a {
    height: inherit;
}

span.title {
	color: #468A1A;
}

.footer {
    bottom: 0;
	width: 100%;
    background-color: #fff;
    height: 20vh;
    height: calc(var(--vh, 1vh) * 20);
    z-index: 1;
}

#mainFooter.footer {
    display: none;
	position: fixed;
}

#aboutFooter.footer {
    position: relative;
}

a:not(div.text a) {
    text-shadow: 0px 2px 2px #ddd;
	color: #909090;
}

/* mobile sizing */
@media screen and (max-width: 768px) and (orientation:landscape) {
  #pleaseRotate { display:flex; }
  #container { display:none; }
}

@media screen and (max-width: 768px) {

    img:not(#aboutGallery a img) {
        width: 90%; 
    }

    span.title {
        font-size: 6vw;
    }

    #aboutLinks {
        flex-direction: column;
        height: 80vh;
        height: calc(var(--vh, 1vh) * 80);
    }

    #about a {
	    font-size: 7.5vw;
    }

    div#aboutGallery a img{
        width: 100%;
    }

    #mainFooter a, #aboutFooter a {
	    font-size: 6.5vw;
    }

}

/* desktop */
@media screen and (min-width: 768px) {
    #pleaseRotate { display:none; }

    img {
        width: 60%; 
        padding-bottom: 10vh;
        padding-bottom: calc(var(--vh, 1vh) * 10);
    }

    span.title {
        font-size: 2.5vw;
    }

    p {
        font-size: 1.8vw;
        width: 60%;
    }

    #aboutLinks {
        height: 80vh;
        height: calc(var(--vh, 1vh) * 80);
    }

    #aboutLinks a {
	    font-size: 5.5vw;
    }

    #about a:hover,
    #mainFooter a:hover,
    #aboutFooter a:hover 
    {
        transform: translate(0, -3px) scale(1.05);
        transition: 0.2s ease-out;
    }

    div#gallery_imgs {
        padding-top: 10vh;
    }

    div#aboutGallery a img{
        height: 100%;
        object-fit: cover;
    }

    #mainFooter, #aboutFooter a {
	    font-size: 3.2vw;
    }
}