/*palette*/
:root {
    --clrwht: #f3f3f3;
    --clrbg: #a5a5a5;
    --clrtxt: #515151;
    --clrylw: #ead856;
    --clrred: #db4268;
    --clrblu: #4ca4c4;
    --clrblk: #242424;
}
/*  -   -   -   -   -   -   -   -   -   -   -   -   >    
*/

/*viewport calculations*/
:root {
    --pi: 3.14159vw;
    --pi3rd: calc(var(--pi)/ 3);
    --pigold: calc(var(--pi)/1.618)
}
/*  -   -   -   -   -   -   -   -   -   -   -   -   >    
*/

/*config*/
body {
    background: var(--clrtxt);
}
@font-face {
    font-family: Bahnschrift;
    src: url(assets/BAHNSCHRIFT.woff);
}
/*  -   -   -   -   -   -   -   -   -   -   -   -   >    
*/



/*main container*/
.mainContainer {
    margin: var(--pigold);
    padding: 1vw;

    height: 90vh;

    background: var(--clrbg);
    border: double calc(1px + 0.2vw) var(--clrblu);

    font-family: Bahnschrift;
}
.mainContainer:hover {
    border: solid calc(.5px + 0.1vw) var(--clrylw);
    border-radius: 4px;
    transition: all .12s ease-out;
}
/*  -   -   -   -   -   -   -   -   -   -   -   -   >    
*/



/*text highlighters*/
.txtClr {
    margin: .1vw;
    padding: .1vh;

    border-radius: 4px;
}
.txtClr.blu {
    color: var(--clrblu);
}
.txtClr.blu.bg {
    color: var(--clrwht);
    background-color: var(--clrblu);
}
.txtClr.ylw {
    color: var(--clrylw);
}
.txtClr.ylw.bg {
    color: var(--clrtxt);
    background-color: var(--clrylw);
}
.txtClr.red {
    color: var(--clrred);
}
.txtClr.red.bg {
    color: var(--clrblk);
    background-color: var(--clrred);
}
/*  -   -   -   -   -   -   -   -   -   -   -   -   >    
*/


/*individual elements*/
.title {
    font-size: calc(33px + 3vw);
}
.subtitle {
    padding: 0;
    margin-top: 0;
    font-size:calc(16px + var(--pigold)/32)
}
/*  -   -   -   -   -   -   -   -   -   -   -   -   >    
*/