@import url("https://use.typekit.net/sge4gfh.css");
@font-face {
    font-family: bernoru;
    src: url("../Fonts/Bernoru-BlackUltraExpanded.otf");
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* BUNEER CSS */

/*#region Universal */

/*#region Colors */
:root {
    --black: #1d3548;
    --white: #e5f4ff;
    --accentDark: #1a4c73;
    --accentMedium: #71a2c8;
    --accentLight: #b1d6f2;
}

.black{
    filter: brightness(0) saturate(100%) invert(17%) sepia(18%) saturate(1293%) hue-rotate(164deg) brightness(101%) contrast(96%);
}

.white{
    filter: brightness(0) saturate(100%) invert(88%) sepia(11%) saturate(634%) hue-rotate(189deg) brightness(105%) contrast(104%);
}

.accentDark{
    filter: brightness(0) saturate(100%) invert(23%) sepia(8%) saturate(6625%) hue-rotate(172deg) brightness(97%) contrast(87%);
}

.accentMedium{
    filter: brightness(0) saturate(100%) invert(65%) sepia(67%) saturate(262%) hue-rotate(166deg) brightness(84%) contrast(84%);
}

.accentLight{
    filter: brightness(0) saturate(100%) invert(83%) sepia(15%) saturate(737%) hue-rotate(176deg) brightness(99%) contrast(91%);
}

.transparent{
    opacity: 0;
}

/*#endregion */ 

html{
    scroll-behavior: smooth;
}

body{
    background-color: var(--white);
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

#content{
    padding: 0 10vw;
    margin: auto;
}

h1, h2, a{
    font-family: bernoru;
    color: var(--accentDark);
    text-align: center;
}

a{
    color: var(--accentLight);
    font-size: 1.5vh;
    padding: 0 1vw;
    
    text-decoration: none;
}

h1{
    font-size: 5vh;
    text-transform: uppercase;
}

h2{
    font-size: 2.5vw;
    color: var(--black);
}

h3{
    font-family: "futura-pt", sans-serif;
    font-weight: 600;
    font-size: 3vw;
    color: var(--black);
}

p{
    font-family: futura-pt;
    color: var(--black);
    font-size: 3vh;
    line-height: 4vh;
}

.bold{
    font-weight: 800;
}

section{
    padding: 3vh 0;
}

.divider{
    display: block;
    margin: auto;
    width: 100%;
}

/*#endregion */ 

/*#region Header*/

header{
    position: sticky;
    top: 0;
}

header div{
    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: var(--black);
    color: var(--accentLight);

    padding: 1vh 0;
}

header div>img{
    width: 5vh;
}



header img, footer img{
    
    height: 2vh;
    width: auto;
}

/*#endregion*/

/*#region Section - About */

#about{
    display: flex;
    align-items: center;
}

#about img{
    width: 50%;
}

/*#endregion */ 

/*#region Section - Team */

#team{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
}

.team-member{
    display: flex;
    align-items: center;
    gap: 3vw;
}

.team-member div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#team img{
    width: 23vw;
}

/*#endregion */ 

/*#region Section - Contact */

#contact{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
}

#contact div{
    display: flex;
    gap: 2vw;
    justify-content: space-evenly;
}

#contact img{
    width: auto;
    flex-shrink: 5;
    width: 100%;
    min-width: 0;
    max-width: 10vh;
}

/*#endregion */ 

/*#region Footer */

footer div{
    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: var(--black);
    padding: 1vh 0;
}

footer>.fringe{
    transform: rotateX(180deg);
    margin-bottom: -1vh;
}

footer div img{
    height: 7vh;
}

.button-up img{
    width: 4vh;
    height: auto;
}

/*#endregion*/

.fringe{
    height: 2vh;
    background-image: url("../images/general/Fringe.png");
    background-color: transparent;
    background-repeat: repeat-x;
    background-size: contain;
    padding: 0;
}

@media (max-width: 900px) {
    h1 {
        font-size: 5vw;
    }

    h2 {
        font-size: 3.5vw;
    }

    h3{
        font-size: 3.5vw;
    }

    a{
        font-size: 2.5vw;
    }

    p{
        font-size: 3.5vw;
        line-height: 4vw;
    }

    #about{
        flex-direction: column;
        text-align: center;
    }

    #about img{
        width: 60vw;
    }

    .team-member{
        flex-direction: column;
        text-align: center;
    }

    #team img{
        width: 40vw;
    }

    .team-member p{
        order: 2;
    }

    
}