/* Defines variables to use in stylesheet (globally) */
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
    font-weight: 400; /* Regular*/
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Medium.ttf") format("truetype");
    font-weight: 500; /* Medium*/
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
    font-weight: 700; /* Bold*/
}



:root {
    --COREBLUE: #07263F;  /* APG blue color core */
    --COREGREEN: #00E386;  /* APG green color core*/
    --GREENFOCUS: #00B36B;/* Green when focus on COREGREEN background*/
    --BLUEFOCUS: #0c4675;  /* Blue when focus on COREBLUE background*/
    --CORETEXTFONT: "Montserrat";
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--CORETEXTFONT),Arial, sans-serif;
    background-color: var(--COREBLUE);
    color: var(--COREGREEN);
    text-align: center;
    padding: 20px;
}

h1 {
    font-size: 2.5em;
    color: var(--COREGREEN);
    margin-bottom: 10px;
}
p {
    font-size: 1.2em;
    margin-bottom: 15px;
}
a { /*Hyper Link*/
    color: var(--COREGREEN);
    text-decoration: underline;
    font-weight: bold;
}
a:hover {
    color: var(--GREENFOCUS);
    text-decoration: underline;
}

.container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: var(--COREBLUE);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.logo {
    display: block;
    margin: 20px auto;
    max-width: 150px;
    height: auto;
}
.icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}
#3d-container {
    margin: 20px auto;
    max-width: 80%;
    border: 1px solid var(--BLUEFOCUS)
}