/*  fudeyo.com 2025   */
/*  written by Mate G. Kalman */   


/*FONTS*/
@font-face {
  font-family: 'bornaregular';
  src: url('fonts/borna-regular-webfont.woff2') format('woff2'), url('fonts/borna-regular-webfont.woff') format('woff'), url('fonts/borna-regular-webfont.eot') format('.eot'), url('fonts/borna-regular-webfont.ttf') format('.ttf');
}

@font-face {
  font-family: 'bornabold';
  src: url('fonts/borna-bold-webfont.woff2') format('woff2'), url('fonts/borna-bold-webfont.woff') format('woff'), url('fonts/borna-bold-webfont.eot') format('.eot'), url('fonts/borna-bold-webfont.ttf') format('.ttf');;
}


/*COLORS*/
:root {
--brandcolor: #f93b21; 
--lightgrey: #d6d6d6;
--lenia: #686868;
--text: #d1d1d1; /*7e7e7e old*/
--background: #2e2e2e;
--linkhover: #fff;
--underline: #66ff00;
--marker: #fff;
--footercolor: #fff;
--extraframe: #f92121;
}

/*RESET*/
html { font-size: 1em }
body,
h1,
h2,
h3,
h4,
p,
a,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin, padding: 0;
}

a {
  all: unset;
}

/*DEFAULT STYLES*/
body {
    background-color: var(--background); 
    color: var(--text);
    font-family: 'bornaregular', sans-serif;
    text-align: left;
    letter-spacing: .02rem;
}

H1 {
    font-family: 'bornaregular', sans-serif;
    font-size: 5rem;
    color: var(--brandcolor);
    margin: .5rem 0 4rem 0;
    letter-spacing: .04rem;
}

H1 span {
    font-family: 'bornaregular', sans-serif;
}

.cursive {
    font-style: italic;
}

h2 {
    font-size: 1.8rem;
    text-transform: uppercase;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: .8rem;
}

p {
    font-size: 2.2rem;
    line-height: 3rem;
    margin, padding: 0;
    font-family: 'bornaregular', sans-serif;
    letter-spacing: .02rem;
}

p span {
    color: var(--marker);
    /* text-underline-offset: .5rem;
    /* text-decoration: underline solid 2px var(--marker); */
    /* border-bottom: 2px solid var(--marker); */
    /* padding: 0.2rem 0.4rem ;
    background-color: #404040; */
}


a {
    cursor: pointer;
    padding, margin: 0;
    text-decoration: none;
    color: var(--text);
    border-bottom: 2px solid transparent;
    position: relative;
    transition: all 0.3s ease;
    z-index: 1;
}

a:hover {
  color: var(--brandcolor);
  border-bottom: 2px solid var(--brandcolor);
/*
  -webkit-transition: background .4s, color .4s ease;
  transition: background .4s, color .4s ease;
*/
}

.hero-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about {
padding: 1.5rem;
margin: 0 0 3rem 0;
}

.space-vertical {
padding: 4rem 0 0 0;
}


.caption {
font-size: 1rem;
padding: 2rem 1rem 2rem 1rem;
/*margin: 0 0 2.5em 0;*/
}

.lenia {
width: auto;
margin: 0 1rem 4rem 1rem;
border-bottom: 1px solid var(--lenia);
}

.YACSSTooltip {
background-color: var(--background);
color: #fff;
font-size: 0.6rem;
padding: .26rem .4rem .2rem .4rem;   
max-width:600px; 
}

.jump {
    text-align: right;
    font-size: .8rem;
}

video {
  display: block;
width:100%;    
}


.focus {
 width:100%;
 padding:4rem;
}

.extra_focus {
 width:100%;
 padding:10rem;
 background-color: var(--extraframe);
}


::selection {
  background: #fff;
  color: var(--brandcolor);
}
::-moz-selection {
  background: #fff;
  color: var(--brandcolor);    
}


/*FOOTER*/
.fudeyo2021 {
color: var(--brandcolor);    
padding: 6rem 1rem 2rem 1rem;
font-weight: 400;
}

.fudeyo2021 a {
color: var(--brandcolor);
    font-size: 2.2rem;
    line-height: 3rem;
}
.fudeyo2021 a:hover {
    border-bottom: 2px solid var(--brandcolor);
}

.footer {
color: var(--footercolor);    
background: var(--brandcolor);
padding: 2rem 1rem 2rem 1rem;
font-weight: 400;    
}

.footer a {
color: var(--footercolor);
}

.footer a:hover {
  color: var(--linkhover);
}


.logo {
  max-width: 640px;
  margin: 1.5rem 0 5rem 0;
  height: auto;
  display: block;
  /* vertical-align: middle; */
}


/*MQ*/

@media (min-width: 300px) {
    html { font-size: calc(1em - .2vw) }

    .fudeyo2021 p, .fudeyo2021 a { font-size: 1.3rem; line-height: 2rem;}
    h4, .footer a { font-size: .7rem; }
    
    .jump {
    text-align: left;} 
}

@media (max-width: 480px) {
    H1 { font-size: 2.6rem; } 
    /*.fudeyo2021{ background-size: 80%; }*/
    .focus, .extra_focus {padding:0;}
}    


@media (min-width: 480px) {
    html { font-size: calc(1em + .5vw) }
    /*    .fudeyo2021{ background-size: 70%; }*/
    .jump { text-align: right; }     
}

@media (max-width: 991px) {
    .focus, .extra_focus {padding:0;}
}    


@media (min-width: 1600px) {
    html { font-size: calc(1em + 1vw) } 
    .YACSSTooltip {
    font-size: 0.4rem;
    }    
}