/* This allows us to use the kilowatt font */
@font-face {
    font-family: "kilowattregular";
    src: url("../fonts/kilowatt-regular-webfont.woff2") format("woff2"),
    url("../fonts/kilowatt-regular-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}


* {
    /* Global default font */
    font-family: "Lora", serif;
    /* Global default font color */
    color: white;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
    font-family: "kilowattregular", serif;
    font-size: clamp(4rem, 6vw, 8rem);
    font-weight: 800;
    text-shadow: 0 5px 25px rgb(0 0 0 / 40%);
    letter-spacing: 0.45em;
    padding-left: 0.45em;
    text-align: center;
}

h2 {
    font-family: "kilowattregular", serif;
    margin-top: 1.20vh;
    font-size: clamp(2rem, 4vw, 6rem);
    font-weight: 400;
    text-shadow: 0 5px 25px rgb(0 0 0 / 20%);
}

body {
    /* Default background color displayed if the background image is out of view */
    background-color: #23252b;

    /* The background image */
    background-image:url('../img/homeimg.jpg');
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: cover;

}

/* This flexbox denotes the 3 sections of this page */
.main_content_box {
    display: flex;
    flex-direction: column;
    justify-content: center; /* This aligns items vertically */
    align-items: center;     /* This centers the items horizontally */
    height: 100vh;
}

/* Section containing the top headers */
.top_section {
    text-align: center;
    height: 25vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Sections containing the flags */
.middle_section {
    z-index: 9999;
    text-align: center;
    height: 50vh;
    width: 100vw;

    /* Transparent glass effect */
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.4px);
    -webkit-backdrop-filter: blur(5.4px);
    border: 2px solid rgba(255, 255, 255, 0.04);
    border-style: groove;
    border-left-width: 0;
    border-right-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

flags-menu {
    max-height: 100%;
}

/* Section containing logo and copyright notice */
.bottom_section {
    text-align: center;
    height: 25vh;
    padding-bottom: 2.75vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

#bottom_logo {
    height: 17.5vh;
    width: auto;
    opacity: 0.55;
}

#copyright_text {
    opacity: 0.3;
}