/* Load and define fonts. */
@font-face {
    font-family: HKGroteskRegular;
    src: url("fonts/HKGrotesk/HKGrotesk-Regular.otf") format("opentype");
}

@font-face {
    font-family: HKGroteskItalic;
    src: url("fonts/HKGrotesk/HKGrotesk-italic.otf") format("opentype");
}

@font-face {
    font-family: HKGroteskBold;
    src: url("fonts/HKGrotesk/HKGrotesk-bold.otf") format("opentype");
}

@font-face {
    font-family: SuperMindset;
    src: url("fonts/SuperMindset/Super Mindset.ttf");
}

@font-face {
    font-family: SuperFoods;
    src: url("fonts/SuperFoods/Super Foods.ttf");
}




/* Define universal styles within the body section, mainly used for defining default paragraph/text formatting. */
body {
    line-height: 1.3;
    color: #04004D;
    font-family: HKGroteskRegular;
}

/* Define "main", used for website background colour shown behind the main-stack. */
main {
    padding-left: 1.8vmin;
    padding-right: 1.8vmin;
    padding-bottom: 8px;
    padding-top: 8px;
    background:#B0D2EF;
}




/* The main container that holds the entire stack of containers. */
.mainStack {
    background: #7FD0F1;
    justify-content: center;
    max-width: 937.8px;
    margin: 0 auto;
    padding-top: 0px;
    padding-left: 2.1vmin;
    padding-right: 2.1vmin;
    padding-bottom: 2.1vmin;
    background-image: url("images/UI/transFlagBackgroundFadeOut.svg");
    background-attachment: scroll;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}


/* The container used for holding the wepbages main banner image. */
.titleImageContainer {
    display: flex;
    justify-content: left;
    padding: 0px;
    margin: 0;
}

.titleImageContainer img {
    height: min(209px, 13.2vmax);
    margin-top: 13px;
    margin-bottom: 3px;
}

svg {
    shape-rendering: geometricPrecision;
}

/* Define the navigation bar. */
nav {
    display: flex;
    gap: min(8px, 1.4%);
    padding: 10px;
    background: #F0B5C4;
    border-radius: 1.89vmin 1.89vmin 0px 0px;
}

nav a:link {
    text-decoration: none;
    color: #04004D;
}


/* Define the containers (general use columnar containers
for holding text and images), and their subset styles like text and images. */
.container {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    background: white;
    margin-bottom: 23px;
    padding: 0px;
    border-radius: 1.89vmin;
    overflow: hidden;
    filter: drop-shadow(6.46px 6.46px #04004D);
    padding: min(3.1vmin);
    gap: 9.5px;
}

.container img {
    display: block;
    margin: 0px;
    height: auto;
    display: block;
    
}

.container p {
    font-family: HKGroteskRegular;
    padding: 0px;
    margin: 0px;
}

.container h3 {
    font-family: SuperFoods;
    font-size: 23pt;
    padding: 0px;
    margin: 0px;
    letter-spacing: 1.5px;
    color: #04004D;
}

.container h2 {
    font-family: HKGroteskBold;
    font-size: 15pt;
    padding: 0px;
    margin: 0px;
}

.container ul {
    padding-left: 14.5px;
}

.container i {
    font-family: HKGroteskItalic;
}


/* Define styles for the "next event" container. */
#nextEvent {
    border-radius: 0 0 1.89vmin 1.89vmin;
    background: #ffffff;
}


/* Define the "text boxes" (horiontal rows that go within the columnar "containers".) */
.textBox {
    display: flex;
    flex-direction: column;
    padding: 0vmin;
    margin: 0px;
    gap: 6.7px;
}




/* Redefine elements when screen is below a given width, used for viewing the website on mobile. */
@media (max-width: 600px) {
    .container {
        flex-direction: column;
        align-items: center;
    }

    .container img {
        width: 37vmin;
    }
}