@import url('https://fonts.googleapis.com/css2?family=Rubik&family=Boogaloo&Architects+Daughter&family=Kalam:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root
{
    --mainColor: #30a2dc;
    --softColor: #8cc7e5;
    --softAccent: #bdbdbd;
    --accentColor: #697076;
    --darkAccent: #22262c;
    --pagemax: 100%;
}
body
{
    margin: 0px; padding: 0px; overflow-x: hidden;
    font-family: Rubik;
    user-select: none;
    width: 100%;
    height: 100%;
    color: var(--accentColor);
}
h3
{
    color: var(--darkAccent);
}
h2
{
    font-weight: lighter;
    color: #FFFFFF;
}
#navbar
{
    position: relative;
    z-index: 50;
    top: 0px;
    height: 50px;
    width: 100%;
    white-space: nowrap;
}
::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: var(--accentColor);
}
::-webkit-scrollbar-thumb {
    background-color: var(--mainColor);
    outline: 0px solid var(--mainColor);
}
#nav-title
{
    display: inline-block; 
    padding-right: 20px;
    color: var(--accentColor);
}
#menu-icon
{
    position: absolute;
    top: -7px;
    visibility: hidden;
}
#menu-icon svg{fill: var(--accentColor);}
#menu-icon svg:hover{fill: var(--mainColor);}

@media (max-width: 275px)
{
    #nav-title
    {
        visibility: hidden;
        pointer-events: none
    }
    li#menu-icon
    {
        left: calc(50vw - 40px);
    }
}
@media (max-width: 775px)
{
    #hidden-menu
    {
        position: absolute;
        top: 50px;
        right: 15px;
        z-index: 999;
        width: 250px;
        height: fit-content;
        border-radius: 10px;
        background-color: #FFFFFF;
        opacity: 0.90;
        zoom: 1.5
    }
    #hidden-menu .menu-active
    {border-top: none !important}
    #hidden-menu ul a li .menu-link, #hidden-menu ul, #hidden-menu li, #hidden-menu .menu-link
    {
        z-index: 9999;
        position: relative;
        visibility: visible;
    }
    #menu li, .menu-link
    {
        visibility: hidden;
    }
    li#menu-icon
    {
        visibility: visible;
        right: 20px;
    }
}
#menu li
{
    list-style-type: none;
    width: fit-content;
    height: calc(100% - 10px);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 12px;
    font-size: 20px;
    display: inline-block;
    border-top: solid 3px #FFFFFF;
}
.menu-active
{
    border-top: solid 3px var(--softColor) !important;
    color: var(--softColor) !important;
}
a:has(.menu-active)
{
    pointer-events: none;
    cursor: default;
}
.menu-link
{
    color: var(--accentColor);
    text-decoration: none;
    width: 100%;
    height: 100%;
}
.menu-link:hover, .menu-active:hover
{
    color: var(--mainColor);
}
#menu li:hover
{
    border-top: solid 3px var(--mainColor);
}
#banner
{
    position:fixed;
    z-index: 50;
    top: 55px;
    width: 100%;
    overflow: hidden;
	max-height: min(20vw, 300px);
    height: 300px;
	min-height: 150px;
    border-top: 5px solid var(--mainColor);
    border-bottom: 5px solid var(--mainColor);
}
#slidedeck, slidedeck
{
    background-color: var(--accentColor);
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#slides
{
    margin: 0%;
    padding: 0%;
    list-style-type: none;
    width: 100%;
    height: 100%;
    overflow:visible;
    white-space: nowrap;
}
#slides div
{
    display:inline-block;
    height: 100%;
    width: 100%;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}
#logo
{
    height: 100%;
    position: relative;
    top: calc(-100%);
    left: 50px;
}
#logo-img
{
    height: 100%;
    width: 300px;
    position: relative;
    background-image: url('../img/main/jtpl.png');
    background-repeat: no-repeat;
    background-position: center left;
    background-size: auto 75%;
}
#logo-spacer
{
    display: inline;
    width: 300px;
    height: 300px;
    max-height: 100%;
}
#logo-title
{
    position: relative;
    display: inline;
    height: 100%;
    top: 25%;
    left: min(max(150px, 20vw), 300px);
	-webkit-text-stroke: .125ex black;
    color: var(--mainColor);
    text-shadow: 10px 10px 10px var(--darkAccent);
	font-family: "Boogaloo" !important;
	font-size: min(max(5vw, 40px),80px);
    white-space: nowrap;
    text-transform: uppercase;
}
#logo-subtitle
{
    position: relative;
    display: inline;
    height: 100%;
    top: 25%;
    left: min(max(150px, 20vw), 300px);
	-webkit-text-stroke: med var(--mainColor);
    color: #FFFFFF;
    text-shadow: 5px 5px 5px var(--darkAccent);
	font-size: min(max(2.5vw, 20px),40px);
    font-weight: lighter;
    white-space: nowrap;
}
#content
{
    position: fixed;
    top: calc(55px + max(150px, min(20vw, 300px)));
    width: 100%;
    height: calc(100% - calc(55px + 100px + max(150px, min(20vw, 300px))));
    overflow-y: auto;
}
#blerb
{
    text-align: center;
    box-sizing: border-box;
    padding: 25px;
    width: 100%;
    height: fit-content;
    background-color: var(--darkAccent);
    color: var(--softAccent);
}
#callout
{
    position:fixed;
    z-index: 50;
    bottom: 0px;
    box-sizing: border-box;
    padding: 25px;
    width: 100%;
    height: 100px;
    background-color: var(--darkAccent);
    color: var(--softAccent);
}
#callout div
{
    box-sizing: border-box;
    position: relative;
    width: min(calc(100% - 225px),75%);
    max-width: 100%;
    right: 0px;
}
#callout-text
{
    height: 100%;
    float: left;
    top:12px;
    font-size: 26px;
}
#callout div:has(button)
{
    float: right;
    box-sizing: border-box;
    width: max(calc(225px),25%);
    max-width: 100%;
    max-height: 100%;
}
#callout button
{
    --width: 200px;
    width: 200px;
    height: 50px;
    position:relative;
    right: calc(-100% + 200px);
    bottom: calc(0px);
    font-size: large;
    font-family: Rubik;
    font-weight: 800;
}
@media (max-width: 550px)
{  
    #callout div
    {
        box-sizing: border-box;
        position: relative;
        width: 100%;
        right: 0px;
    }
    #callout div:has(button)
    {
        float: none;
        box-sizing: border-box;
        width: 100%;
        max-height: 50px;
    }
    #callout-text
    {
        display: none;
    }
    #callout button
    {
        width: 200px;
        height: 50px;
        position: relative;
        right: calc(-50% + 100px);
        bottom: calc(0px);
        font-size: large;
        font-family: Rubik;
        font-weight: 800;
    }
}
#content-banner
{
    position: relative;
    left: 5vw;
    width: 250px;
    padding: 10px 0px 10px 10px;
    background-image: url('../img/main/services.png');
    background-size:contain;
    background-repeat: no-repeat;
    background-position: right;
    color: #FFFFFF;
}
#services
{
    position: relative;
    left: 2vw;
    width: 90%;
    max-width: var(--pagemax);
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(50%));
}
#services img
{
    width: 40px;
    vertical-align: middle;
    pointer-events: none;
    padding-right: 10px;
}
@media (max-width: 800px)
{
    #services
    {
        position: relative;
        left: 5vw;
        width: 90vw;
        display: grid;
        grid-template-columns: repeat(auto-fill, calc(100%));
    }
}
.servicegrid
{
    padding-left: 4vw;
    padding-right: 0px;/*
    width: calc(90%);
    border: 2px solid var(--accentColor);
    background-color: #30a3dc30;*/
}
disc, .disc
{
    font-size: smaller;
    font-style: italic;
    font-weight: 300;
}
.hidden{
    display: none;
}