:root {
    /* ---  QUERIES  --- */
    --frontier-width: 960px;

    /* --- HEADER --- */
    --header-height: 50px;

    /* --- FOOTER --- */
    --footer-height: 200px;

    /* --- SHOWCASE --- */
    --showcase-vertical-offset: -250px;
}

body                          { width: 100vw; height: 100vh; overflow-x: hidden; margin: 0; background-color: var(--ui-dark); color: var(--font-color); }
#sub-body                     { width: 100%; height: 100%; overflow-x: hidden; margin: 0; padding: 0; position: relative; }

/* --- HEADER --- */
header                        { width: 100vw; height: var(--header-height); background-color: var(--ui-dark); }
header                        { display: flex; justify-content: center; position: fixed; z-index: 1; }

footer                        { width: 100vw; height: var(--footer-height); background-color: var(--ui-black); }
footer                        { display: flex; justify-content: center; }

#sealion-logo                 { height: var(--header-height); display: flex; flex-direction: row; text-decoration: none; position: absolute; left: 0; }
#sealion-logo img             { width: 40px; height: 40px; margin: 5px; }
#sealion-logo p               { margin: 0; height: 100%; align-content: center; font-size: 1.5em; letter-spacing: 1.2px; color: var(--blue-medium); }

#burger-button                { width: 30px; height: 30px; display: none; flex-direction: column; justify-content: space-between; position: absolute; right: 10px; top: 10px; cursor: pointer; }
#burger-button div            { width: 30px; height: 5px; border-radius: 2.5px; background-color: var(--font-color); }

#links                        { width: 500px; height: 100%; display: flex; justify-content: space-between; }
#links a                      { height: 100%; display: flex; flex-direction: column; justify-content: start; align-items: center; padding-top: 15px; text-decoration: none; color: var(--font-color); transition: .2s; z-index: 1; }
#links a:hover                { color: var(--blue-medium); }
#links a[class="f-title"] div { width: 15px; height: 5px; border-radius: 2.5px; background-color: var(--font-color); }


/* --- SHOWCASE --- */
#showcase                     { width: 100%; display: flex; }
#showcase-img                 { width: auto; height: 100%; position: absolute; }
#showcase-gradient            { width: 100%; height: 100%; position: absolute; background-color: #0f05; background: linear-gradient(0deg, var(--ui-dark) 0%, var(--ui-dark-alpha-0) 25%); }

#img-env                      { display: fixed; position: absolute; top: 0; width: 100vw; height: 80vh; }
#img-env .part                { height: 100%; width: auto; position: absolute; left: calc(50vw - 220px); }
#img-env .part img            { height: 100%; width: auto; position: absolute; left: 0; }

/* --- CONTENT --- */
#content                      { width: 80%; min-width: 200px; max-width: 900px; margin: auto; transform: translateY(-50px); }
#content h1, h2, h3           { margin: 10px; color: var(--font-color); }
#content .t-center            { text-align: center; }
#content h1                   { font-size: 3em; }
#content h2                   { font-size: 2em; }
#content h3                   { font-size: 1.5em; }
#content h3 img               { height: 1.5em; }
#content p                    { text-justify: auto; line-height: 150%; text-align: justify; padding: 10px; }
#content .para                { background-color: var(--ui-dark-alpha); }
#content .img                 { width: 80%; border-radius: 5px; }
#content .shadowed            { filter: drop-shadow(0 50px 15px #0008); }
#content .img-raw             { width: 60%; margin-left: 20%; }
#content .img-shadow          { filter: drop-shadow(0 50px 15px #0008); }
#content .button              { width: 200px; height: 60px; border-radius: 2.5px; background-color: var(--blue-medium); border-bottom: solid 3px var(--blue-dark); box-shadow: 0 10px 10px #0005; transition: .2s; }
#content .button              { text-decoration: none; text-align: center; align-content: center; color: var(--white); font-size: 1.2em; }
#content .button:hover        { transform: scale(1.1); }
#content .strip               { width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
#content .strip .bg           { width: 200vw; height: 240px; position: absolute; left: -50vw; background-color: var(--ui-medium); box-shadow: 0 10px 20px #0005; }
#content .strip h3            { width: 100%; margin-top: 10px; }
#content .strip div           { width: 100%; height: 200px; display: flex; justify-content: space-around; align-items: center; perspective: 800px; transform-style: preserve-3d; }
#content .strip img           { width: auto; height: 70%; transform: rotateY(20deg); }
#content .strip p             { width: 50%; margin: 0; }
#content .rot-left            { transform: rotateY(-10deg); }
#content .rot-right           { transform: rotateY(10deg); }

/* --- CONTAINERS --- */
#content .b-container         { display: flex; justify-content: space-around; }
#content .l-container         { width: 120%; height: 300px; display: flex; justify-content: center; align-items: center; transform: translateX(-10%); }
#content .l-container>div     { height: 100%; perspective: 800px; }
#content .l-container .img    { height: 100%; width: auto; }
#content .l-container>.para   { width: 50%; }
#content .l-container>.cont   { width: 50%; }
#content .tri-container       { width: 120%; height: 300px; display: flex; justify-content: space-around; align-items: center; transform: translateX(-10%); }
#content .tri-container>div   { width: 30%; height: 100%; perspective: 800px; }
#content .tri-container .img  { width: 100%; height: auto; }
#content .tri-container .para { width: 30%; }

/* --- APPEARERS --- */
#content .appearable-hidden-left  { opacity: 0; }
#content .appearable-showed-left  { opacity: 0; animation: 1s forwards ease-out appear-left; }
#content .appearable-hidden-right { opacity: 0; }
#content .appearable-showed-right { opacity: 0; animation: 1s forwards ease-out appear-right; }
#content .appearable-hidden-up    { opacity: 0; }
#content .appearable-showed-up    { opacity: 0; animation: 1s forwards ease-out appear-up; }
#content .appearable-hidden-down  { opacity: 0; }
#content .appearable-showed-down  { opacity: 0; animation: 1s forwards ease-out appear-down; }

/* --- ANIMATIONS --- */
@keyframes appear-left            { from { opacity: 0; transform: translateX(20px);  } to { opacity: 100%; transform: translateX(0); } }
@keyframes appear-right           { from { opacity: 0; transform: translateX(-20px); } to { opacity: 100%; transform: translateX(0); } }
@keyframes appear-up              { from { opacity: 0; transform: translateY(20px);  } to { opacity: 100%; transform: translateY(0); } }
@keyframes appear-down            { from { opacity: 0; transform: translateY(-20px); } to { opacity: 100%; transform: translateY(0); } }

/* --- QUERIES --- */
@media (min-width: var(--frontier-width)) {
/* ---     DESKTOP      --- */
    body                        { width: 100vw; overflow-x: hidden; }
/* --- HEADER (default) --- */
    #burger-button              { display: none; }
    #links                      { display: flex; flex-direction: row; position: none; top: 0; right: 0; }
    #links a                    { background-color: none; padding: 0; padding-top: 15px; }
/* --- CONTENT --- */
    #content .button            { width: 200px; font-size: 1.2em; }
/* --- CONTAINERS --- */
    #content .b-container .img  { width: 80%; }
    #content .l-container       { width: 120%; height: 300px; flex-direction: row; transform: translateX(-10%); }
    #content .l-container .img  { width: auto; height: 100%; }
    #content .l-container>.para { width: 50%; }
    #content .l-container>.cont { width: 50%; }
}

@media (max-width: var(--frontier-width)), (orientation: portrait) {
/* ---         MOBILE         --- */
    body                        { width: 100vw; overflow-x: hidden; }
/* --- HEADER (dropdown menu) --- */
    #burger-button              { display: flex; }
    #links                      { display: none; flex-direction: column; position: relative; top: var(--header-height); right: calc(-50% + 250px); }
    #links a                    { background-color: var(--ui-dark); padding: 10px; }
/* --- CONTENT --- */
    #content .button            { width: 120px; font-size: 1em; }
/* --- CONTAINERS --- */
    #content .b-container .img  { width: 100%; }
    #content .l-container       { width: 100%; height: auto; flex-direction: column; transform: translateX(0); }
    #content .l-container .img  { width: 100%; height: auto; }
    #content .l-container>.para { width: 90%; }
    #content .l-container>.cont { width: 90%; }
}