/* Blocks Don’t Need 100% Width */
/* A block element (such as a <div>, <p>, or <ul>, to name a few) will, by default expand to fit the width of its containing, or parent */
/*If the div is empty, set width:100% and height:100% to fill the parents size*/
/*Width or height in % defines the width or height in percent of the containing block*/


/* When the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top):

1.The background and borders of the root element
2.Descendant non-positioned blocks (default position:static), in order of appearance in the HTML
3.Descendant positioned (posotion:relative/absolute/fixed/sticky) elements, in order of appearance in the HTML */

/* PRIORITY CSS CLASSES*/
/* The order of the class attribute in the html element doesn't matter, instead the order in which your css is written. The last class defined in the css will be used. */
/*Another way of declaring priority is using: !important */

/*CSS Selectors*/
/* .name1. name2 (.class1 .class2) -> Selects all elements with name2 that is a descendant of an element with name1*/
/* .name1.name2 (.class1.class2) -> Selects all elements with both name1 and name2 set within its class attribute*/
/* p.intro (element.class) Selects all <p> elements with class="intro" */


/*Anchor elements by default are displayed as "inline", manually set width and height have no effect. If we want to set the width and height we need to change the display property to "block". Block elements start on a new line, and take up the whole width*/

/*Define variables*/
:root {
    --blue: #50DED0;
    --white: #faf0e6;
    --nav-height: 50px;
    --scrollbar-width: 12px;
  }

  /*Apply to all*/
* {
    box-sizing: border-box; /*By default, the width and height of an element is calculated like this: width + padding + border = actual width of an element. If you set box-sizing: border-box; on an element, padding and border are included in the width and height:*/
    overflow-x: hidden; /*No scroll on x direction*/
    margin: 0px; /*Remove Html default margin to the body*/
    padding: 0px;
    font: normal normal normal 15pt 'Audiowide';
}

/* Customize the scrollbar */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}
 
/* Scrollbar Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /*for compatibility*/
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Scrollbar Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /* background: #50ded096;  */
    background: rgba(0,0,0,0.4);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5); /*for compatibility*/
}

/*container for all the page, occupies 100vh, so only the first full-width-section is shown. This div has a scroll so the other sections appear when scrolling*/
.page-content {
    height: 100vh;
    /* scroll-snap-points-y: repeat(100vh); */
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth; /*To scoll smoothly when clicking an anchor*/
}

.full-width-section {
    height: 100vh;
    width: 100vw; /*by default it is 100% for div elements, but if the content goes out of the page it keeps growing, so we use 100vw to limit to the screen*/
    /* margin-top: var(--nav-height); */
    position:relative; /*So that the children with position absolute are placed relative to this*/
    /* scroll-margin-top: calc(var(--nav-height) + 2.5em); */
    scroll-snap-align: end;
}

.short-line-left {
    width: 50px;
    border-bottom: 5px solid #50DED0;
    position: relative; /*So that it is placed on top of the other children with position static.*/
    /* margin-left:10vw; */
}
.short-line-right {
    width: 50px;
    border-bottom: 5px solid #50DED0;
    right:10vw;
    position:absolute;
}

.home-text-col1 {
    animation-duration: 3s;
    animation-name: leftright;
    width: 100vw;
}


  
@keyframes leftright {
    0% {
        transform: translateX(-1000%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes rightleft {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}


@keyframes topdown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes downtop {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

.section-title-container {
    margin-left: 10vw;
    margin-top: 15vh; 
}

.section-title-left{
    /* position: absolute; */
    /* margin-left: 10vw;
    margin-top: 15vh; */
    font-size: 40px;
    color: rgba(0,0,0,0.3);
    background-color: rgba(0,0,0,0.1);
}

.section-title-right{
    text-align: right;
    margin-right:10vw;
    margin-top:15vh;
    font-size: 100px;
}

.anim-topdown {
    animation-duration: 2s;
    animation-name: topdown;
}

.anim-downtop {
    animation-duration: 2s;
    animation-name: downtop;
}

.anim-leftright {
    animation-duration: 3s;
    animation-name: leftright;

    /* transform: translateY(0) */
}

.anim-rightleft {
    animation-duration: 2s;
    animation-name: rightleft;

    /* transform: translateY(0) */
}