@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

:root{
    --content:rgb(0, 0, 0);
    --main-bg: rgb(255, 255, 255);
    --secondary-bg: rgb(220, 220, 220);
    --tertiary-bg: rgb(170, 170, 170);
    --quat-bg:#2d2d2d;
    --pent-bg:#3d3d3d;
    --accent:rgb(34, 108, 255);
    --danger:rgb(255, 105, 105);;
}

/*section{
    margin-left:4em;
    padding-left:4em;
    border-left:1px var(--secondary-bg) solid;
}*/

.display {
  font-family: "Libre Baskerville";
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.imagerow{
    height:400px;
}

.imagerow > div{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width:100%;
}

p, span, button{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:var(--content)
}

.banner{
    text-align: start;
    padding:20px;
    display:flex;
    flex-flow:row;
    position:sticky;
    top:0px;
    
    justify-content: space-between;

}

.col{
    display:flex;
    flex-flow:column;
}
.row{
    display:flex;
    flex-flow:row;
}

.gp-reg{
    gap:0.35em;
}

.pageheaderwrapper{
    display:flex;
    flex-flow:row;
    padding:20px;
    justify-content: space-between;
    background-color:var(--main-bg);
    border-bottom:1px var(--secondary-bg) solid;
}

.h1{
    font-size:2em;
    font-weight:700;
}
.h2{
    font-size:1.55em;
    font-weight:700;
}

.footer{
    background-color: var(--secondary-bg);
    color:var(--content);

    padding:2em 2em 2em 4em;
}

.pageheadericon{
    font-weight:bold;
    cursor:default;
}

.herobanner{
    padding:4em 2em 4em 4em;
    border-bottom:1px var(--secondary-bg) solid;
}

.stddynamic{
    padding:2em 4em 2em 4em;
    border-bottom:1px var(--secondary-bg) solid;
}

.subtitle{
    font-size:0.7em;
}

.limwd{
    max-width:50%;
}

.featuredcard{
    display:flex;
    flex-flow:column;
    padding:1em;
    border:1px var(--secondary-bg) solid;
    border-radius:5px;
    width:100%;
    gap:0.35em;
    max-width:400px;
    min-width:300px;
}

.featuredcard > .eyebrow{
    color:var(--accent);
    font-size:0.8em;
    font-weight:600;
    margin-top:1em;
}

.imgbg{
    width:100%;
    border-radius:3px;
    height:200px;
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
}

.featuredcard > img{
    width:100%;
}

button{
    background-color: var(--main-bg);
    color:var(--content);
    border: 1px var(--secondary-bg) solid;
    border-radius:5px;
    padding:0.35em 0.7em;
    font-size:0.75em;
}

button.primary{
    background-color:var(--accent);
    color:var(--main-bg);
    border:0px;
}

button:hover{
    cursor:pointer;
    border: 1px var(--tertiary-bg) solid;
}

button.primary:hover{
    border:0px;
    opacity:0.9;
}

.ovscrlx{
    overflow:auto;
}

.minicard{
    font-size:0.9em;
    padding:1em;
    border:1px var(--secondary-bg) solid;
    border-radius:5px;
    width:100%;
    max-width:400px;
    min-width:300px;
}

.minicard:hover, .featuredcard:hover{
    border: 1px var(--tertiary-bg) solid;
    cursor:pointer;
}

.spbtw{
    justify-content: space-between;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 20px;
  flex-grow:0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,var(--accent) 94%,#0000) top/2px 2px no-repeat,
    conic-gradient(#0000 30%,var(--accent));
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 2px),#000 0);
  animation: l13 0.6s infinite linear;
}
@keyframes l13{ 
  100%{transform: rotate(1turn)}
}

@media (max-width: 700px) {
    .limwd{
        max-width:100%;
    }


    .footer{
        padding:2em 2em 2em 2em;
    }


    .herobanner{
        padding:4em 2em 4em 2em;
        border-bottom:1px var(--secondary-bg) solid;
    }

    .stddynamic{
        padding:2em 2em 2em 2em;
        border-bottom:1px var(--secondary-bg) solid;
    }

    .brkcol{
        flex-flow:column;
    }

    
}