/* Css INDEX PAGE*/

/* root */


:root {

    /* COLORS BASIC*/

    --color1a: hsl(000, 00%, 50%);  /* root */

    /* COLORS MUTED*/

    --color1b: hsl(000, 00%, 25%);  /* root */
 
    /* COLORS DARK */

    --color1c: hsl(000, 00%, 00%);  /* root */


    /* COLORS LIGHT*/

    --color1d: hsl(000, 00%, 100%);  /* root */        
}


/* STRUCTURE */

html { 
    box-sizing: border-box;
}

.addinlineblock {
    display: inline-block; 
}   

.addmargin1 {
    margin: 0vw 5vw;
}

.removemargin {
    margin-top: -1px;
    margin-bottom: -1px;
}

.addmargin2 {
    margin: 2vw 2vw;
}     

.addpadding {    
    padding-top: 2vw;
    padding-bottom: 2vw;
}

.noborder {
    border:  0;
}

.addflexcenter {  
    display: flex;
    justify-content: space-evenly;
}

.limitw1 {
    width: 50vw;
}

.limitw2 {
    width: 66vw;
}

/* VIDEO PLAYER */

.video-container {
      max-width: 854px;
      width: 100%;
      margin: 20px auto;
    }

    
    .video-container video {
      width: 100%;
      height: auto;
    }

    /* Existing CSS styles... */

/* Style for the horizontal menu */
.horizontal-menu {
    position: fixed; /* Fixed position */
    top: 0px; /* Position it from the top */
    left: 50%; /* Center horizontally */
    width: 90%;
    transform: translateX(-50%); /* Center the menu horizontally */
    background-color:black; /* Semi-transparent white background */
    padding: 1px; /* Padding for the links */
    
    display: flex; /* Arrange items in a row */
    justify-content: space-between;

    
    
}

/* Style for the links inside the horizontal menu */
.horizontal-menu a {
    text-decoration: none; /* Remove default underline */
    color: #ff0000; /* Link color */
    margin-right: 10px; /* Spacing between links */
   
}

/* Remove margin from the last link */
.horizontal-menu a:last-child {
    margin-right: 0;
}

/* Hover effect for links */
.horizontal-menu a:hover {
    color: #ff0000; /* Change link color on hover */
}


/* CENTER */

.centertxt {
    text-align: center;
}

.center1 {
    display: block;
    margin: 8px auto;
}


/* TEXT STYLE */

.font1 {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

.fontbig {
    font-size: 8rem
}

.fontmed {
    font-size: 4rem
}

.fontsmall {
    font-size: 2rem
}

.fontmicro{
    font-size: 0.7rem
}

.bold {
    font-weight: bold;
}

.underline {
  text-decoration-line: underline;
}

.noitalic {
    font-style: normal;   
}

.nodeco {
    text-decoration: none;
} 

.spacing {
    letter-spacing: 3vw;
}


/* COLORSTEXT */

.colorfont1 {
    color: var(--color1c) 
}

.colorfont2 {
    color: var(--color1d) 
}

.colorfont3 {
    color: var(--color1a) 
}

.colorfont4 {
    color: var(--color1b) 
}

/* COLORBORDER */

.colorborder1 {
    height:2px ;
    background-color:var(--color1a); 
}


/* IMG */

.microimg {
    width: 10vw; 
}

.smallimg {
    width: 15vw; 
}

.midimg {
    

    max-width: 50%;
    height: auto;
}

.bigimg {
    width: 50vw;
}

.customimg {
    width: 75vw;
}

.customimg2 {
    width: 25px;
    height: 25px;
}

.customimg3 {
    width: 20vw;
}



/* COLORSBG */

.colorbg1 {
    background: var(--color1d);
}

.colorbg2 {
    background: var(--color1c);
}

/* LINKS */

a {
  color: var(--color4);
}

a:visited {
    color: var(--color1);
}

a:hover {
    color: var(--color5);
}


/* CELPHONE VARIATION */

@media (max-width: 800px){

.addflexcenter {  
    align-items: center;      
}

.smallimg {
    width: 25vw; 
}

.midimg {
    width:50vw;
    padding-top: 1vw;
}


.fontbig {
    font-size: 4rem
}

.fontmed {
    font-size: 2rem
}

.fontsmall {
    font-size: 1rem
}

.fontmicro{
    font-size: 0.5rem
}

.spacing {
    letter-spacing: 0.5vw;
}

.customimg2 {
    width: 15px;
    height: 15px;
}

.horizontal-menu a {
    text-decoration: none; /* Remove default underline */
    color: #ff0000; /* Link color */
    margin-right: 1px; /* Spacing between links */
}
}