/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, h1,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
    margin: 0;
    padding: 0;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

div.postarea{
    word-break: break-word;
}

textarea {
    line-height: 1.2;
    font-size: 12px;
}

/* scrollbar */

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
  
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
   
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #1A1A1B; 
}

/* change colours to suit your needs */
mark {
    background-color:#F2eecb;
    color:#1A1A1B; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #F2eecb;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* my code */

body {
    background-color: black;
}

/*section*/

section.mars {
    width: 100%;
    position: absolute;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div.mars {
    min-height: calc(100dvh - 126px);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: inherit;

    @media only screen and (max-width: 1050px) {
        min-height: calc(100dvh - 64px);
    }
}

div.greet{
    flex: 0 0 auto;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 64px;
    padding-right: 64px;

    @media only screen and (max-width: 1050px) {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
    }
}

div.martian {
    flex: 1 0 auto;
}

div.marsphoto {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 64px;

    @media only screen and (max-width: 1050px) {
        padding-top: 16px;
    }
}
img.mars {
    z-index: -1;
    height: 175vh;
}

/* nav */

nav.menu {
    background-color: #f9e0de;
    padding: 16px;
    @media only screen and (max-width: 1050px) {
        padding: 0px;
    }
    
}

ul.inline {
    text-align: center;
    @media only screen and (max-width: 1050px) {
        text-align: left;
    }
}

li.inline {
    display: inline;
    padding: 16px;
    @media only screen and (max-width: 1050px) {
        display:list-item;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

section.main {
    background:#f9e0de;
    padding-top: 48px;
    padding-bottom: 64px;
    padding-right: 64px;
    padding-left: 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 32px;

    @media only screen and (max-width: 1050px) {
        padding-top: 24px;
        padding-right: 32px;
        padding-left: 32px;
        padding-bottom: 16px;
        row-gap: 16px;
    }
}

section.main div.subarticle {
    width: 100%;

    @media only screen and (max-width: 1050px) {
        width: auto;
    }    
}

section.mainecoagro {
    background:#f9e0de;
    padding-top: 32px;
    padding-bottom: 48px;
    padding-right: 48px;
    padding-left: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    @media only screen and (max-width: 1050px) {
        padding-top: 16px;
        padding-right: 16px;
        padding-left: 16px;
        padding-bottom: 16px;
    }
}

section.mainecoagro div.subarticle {
    width: 100%;

    @media only screen and (max-width: 1050px) {
        width: auto;
    }    
}

img.resize {
    width: 100%;
    min-height: 100%;
}

video.resize {
    width: 100%;
    min-height: 100%;
}

div.split{
    display: flex;
    flex-direction: column;
    width: 100%;
}

div.article {
    display: flex;
    flex-direction: row;
    background-color: #f9e0de;
    border-radius: 16px;
    overflow: hidden;
    max-width: 100%;
    transition: 400ms ease 0s;
    /*transition: opacity ease 400ms, box-shadow ease 400ms;*/

    /*box-shadow: 4px 8px 8px hsl(0deg 0% 0% / 0.36);*/

    @media only screen and (max-width: 1050px) {
        flex-direction: column;
        /*box-shadow: 2px 4px 4px hsl(0deg 0% 0% / 0.44);*/
    }
}

div.article:hover{
    background-color: white;
    transition: 400ms ease 0s;
    /*box-shadow: 8px 16px 16px hsl(0deg 0% 0% / 0.25);

    @media only screen and (max-width: 1050px) {
        box-shadow: 4px 8px 8px hsl(0deg 0% 0% / 0.36);
    }*/
}

div.article_ecoagro {
    display: flex;
    flex-direction: row;
    background-color:#7e9f2e;
    overflow: hidden;
    max-width: 100%;
    transition: 400ms ease 0s;
    /*transition: opacity ease 400ms, box-shadow ease 400ms;*/

    /*box-shadow: 4px 8px 8px hsl(0deg 0% 0% / 0.36);*/

    @media only screen and (max-width: 1050px) {
        flex-direction: column;
        /*box-shadow: 2px 4px 4px hsl(0deg 0% 0% / 0.44);*/
    }
}

div.subarticle {
    width: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

div.subarticleecoagro {
    padding: 16px;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

/* header*/

header.main {
    
    padding: 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 32px;

    @media only screen and (max-width: 1050px) {
        padding: 32px;
        row-gap: 16px;
    }
}

img.header {
    height: 60px;
    @media only screen and (max-width: 1050px) {
        display: none;
    }
}

/* footer */

footer.footer {
    background-color: #061f4a;
    display: flex;
    flex-direction: column;
    padding: 64px;
    row-gap: 32px;

    @media only screen and (max-width: 1050px) {
        display: flex;
        flex-direction: column;
        padding: 32px;
        row-gap: 32px;
    }
}

/* text */

@font-face {
    font-family: Oppen;
    src: url(../text/CooperHewitt-Medium.otf);
}
@font-face {
    font-family: MetL;
    src: url(../text/Metropolis-Light.otf);
}
@font-face {
    font-family: MetM;
    src: url(../text/Metropolis-Medium.otf);
}
@font-face {
    font-family: MetR;
    src: url(../text/Metropolis-Regular.otf);
}
@font-face {
    font-family: Nasa;
    src: url(../text/nasalization-rg.otf);
}

h1.greet {
    font-size: 32px;
    font-family: MetR, Arial, Helvetica, sans-serif;
    color: #E3E3E3;
    line-height: 1.3em;
    
    text-decoration: none;

    @media only screen and (max-width: 1050px) {
        font-size: 32px;
    }
}

p.greet {
    font-size: 16px;
    font-family: MetM, Arial, Helvetica, sans-serif;
    color: #E3E3E3;
    
    text-decoration: none;

    @media only screen and (max-width: 1050px) {
        font-size: 16px;
    }
}

p.inf {
    font-size: 16px;
    font-family: MetM, Arial, Helvetica, sans-serif;
    color: #E3E3E3;
    
    text-decoration: none;

    @media only screen and (max-width: 1050px) {
        font-size: 16px;
    }
}

ul.inline a {
    font-size: 16px;
    font-family: Oppen ,Arial, Helvetica, sans-serif;
    color: #212121;
    text-transform: uppercase;
    text-decoration:none;
    transition: 400ms ease 0s;

    @media only screen and (max-width: 1050px) {
        font-size: 16px;
    }
}

ul.inline a:hover {
    transition: 400ms ease 0s;
    color: #212121;
    text-decoration: underline;
}

/* article info buttons */
div.article_button {
    display: flex;
    flex-direction: column;
    color:#212121;
    background-color:#f9e0de;
    padding: 16px;
    gap: 16px;
    border-radius: 16px;
    overflow: hidden;
    max-width: 100%;
    transition: 400ms ease 0s;
    /*transition: opacity ease 400ms, box-shadow ease 400ms;*/

    /*box-shadow: 4px 8px 8px hsl(0deg 0% 0% / 0.36);*/

    @media only screen and (max-width: 1050px) {
        font-size: 16px;
        padding: 8px;
        border-radius: 8px;
        gap: 8px;
    }
}

div.article_button p {
    color: #212121;
}

/* text article*/

p.article {
    font-size: 16px;
    font-family: MetL, Arial, Helvetica, sans-serif;
    color: #212121;
    line-height: 1.3em;
    
    text-decoration: none;

    @media only screen and (max-width: 1050px) {
        font-size: 16px;
    }
}

p.title {
    font-size: 32px;
    font-family: MetR, Arial, Helvetica, sans-serif;
    color: #212121;
    
    text-decoration: none;

    @media only screen and (max-width: 1050px) {
        font-size: 32px;
    }
}

/*Button*/

button.article {
    font-size: 16px;
    font-family: MetM, Arial, Helvetica, sans-serif;
    color: #f9e0de;
    background-color: #212121;
    padding: 16px;
    border-radius: 16px;
    width: fit-content;

    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 0;
    
    text-decoration: none;

    @media only screen and (max-width: 1050px) {
        font-size: 16px;
        padding: 8px;
        border-radius: 8px;
    }
}

button.article:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff8800, #ffff00, #b3ff00, #00ffff, #0000ff, #3f00ff, #7f00ff, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity 400ms ease 0s;
    border-radius: 4px;
}

button.article:active {
    color: #212121;
}

button.article:active:after {
    background: transparent;
}

button.article:hover:before {
    opacity: 1;
}

button.article:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #212121;;
    left: 0;
    top: 0;
    border-radius: 8px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/*Text animation*/
p.greet a {
    transition: 400ms ease 0s;
    color: #b3ff00;
}

h1.greet a {
    transition: 400ms ease 0s;
    color: #b3ff00;
}

p.greet a:hover{
    transition: 400ms ease 0s;
    color: #E3E3E3;
}

a p.greet {
    transition: 400ms ease 0s;
    color: #E3E3E3;
}

a p.greet:hover {
    transition: 400ms ease 0s;
    color: #b3ff00;
}

a p.inf {
    transition: 400ms ease 0s;
    color: #E3E3E3;
}

a p.inf:hover {
    transition: 400ms ease 0s;
    color: #b3ff00;
}

/*Text animation*/
p.greet a {
    transition: 400ms ease 0s;
    color: #b3ff00;
}

p.greet a:hover{
    transition: 400ms ease 0s;
    color: #E3E3E3;
}

a p.greet {
    transition: 400ms ease 0s;
    color: #E3E3E3;
}

a p.greet:hover {
    transition: 400ms ease 0s;
    color: #b3ff00;
}

a p.inf {
    transition: 400ms ease 0s;
    color: #E3E3E3;
}

a p.inf:hover {
    transition: 400ms ease 0s;
    color: #b3ff00;
}

/*overlay*/

.overlay {
    position: absolute; 
    bottom: 0; 
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */ 
    width: -webkit-fill-available;
    transition: 400ms ease 0s;
    opacity:0;
    padding: 16px;
    text-align: center;
    overflow: hidden;
}
  
.container:hover .overlay {
    opacity: -1;
}

.container .overlay {
    opacity: 1;
}

.container {
    position: relative;
    overflow: hidden;
}