/* 
 * CSS RESET 
 */
/*
body {
    margin: 0;
}
*/
* {
    box-sizing: border-box;
}

/* 
 * TYPOGRAPHY 
 */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

body, input, ::placeholder, button {
    color: var(--c-text); 
    font-family: "Work Sans", serif;
    font-weight: bold; 
}


/* 
 * VARIABLES - CSS CUSTOM PROPERTIES 
 */
:root { 
    --c-bg: #9c7bff; /* https://codepen.io/reanukeaves/pen/gOjLwYz */
    --c-bg-alt: #00ff9f;
    --c-accent: #f8ff1d;

    --c-text: black;

    --border-style: solid;
    --border-color: black;
    --border-width: 5px;
    --border-radius: 8px; 
    /* --border-radius: 0px; */ 
    --box-shadow: 5px 5px black;  
    
    --js-header-height: 0px; /* Set by JavaScript */
}

/* 
 * BASIC LAYOUT
 */
body {
    margin: 0;
    padding: 0;
    height: 100dvh;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* background-color: antiquewhite; */
    background-color: var(--c-bg);  
}

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-block: 2em;
    padding-inline: 2em;
}





/* 
 * INPUT FORM
 */
#form {
    display: flex;
    gap: 1em;
    width: 60%;
    justify-self: center;
}
input[type="text"] { /* TODO - URL !!! - AND VALIDATE IT */
    width: 100%;
    padding: 10px;
    /* margin: 10px 0; */
    font-size: 1.2em;
    border: 1px solid #ccc;
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}
button {
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 1.2em;
    /* 
    background-color: #333;
    color: white;
    */
    /* background-color: white; */
    background-color: var(--c-bg-alt);
    /* color: var(--c-text); */

    /* */
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    font-weight: bold;
}

button:hover {
    background-color: var(--c-accent);
}

button:active, button.active {
    background-color: var(--c-accent);
}



header#header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding-bottom: 1rem;
    background-color: var(--c-bg);
    gap: 1em;
}



.logo {
    width: 180px; 

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

}


.social-icons {
    display: flex;
    gap: 1em;
    justify-content: flex-end;
    align-items: center;
}

.social-icons a {
    color: var(--c-bg-alt);
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: var(--c-accent);
}

.social-icons svg {
    width: 32px;
    height: 32px;
}


/* 
 * LAYOUT
 */

#iframe-container {
    flex: 1;
    display: grid;
    grid-template-columns: 1024fr 768fr 375fr;
    gap: 2em;
    /* overflow: hidden; */
}


@media screen and (max-width: 1240px) {
    
    #iframe-container {
        /*  border: 3px solid red; */ /* DEBUG */
        grid-template-columns: 768fr 375fr;
    }

    .iframe#laptopView {
        /* grid-column: 1 / span 3; */
        grid-column: 1 / span 2;
    }

} /* MEDIA-QUERY */


@media screen and (max-width: 1024px) {

    header#header {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    #form {
        width: 100%;
        margin-inline: unset;
    }

    .social-icons {
        justify-content: center;
    }
    
} /* MEDIA-QUERY */


.iframe {
    /*
    border: 1px solid #ccc;
    */
    /* margin: 10px; */
    background-color: white; /* PRECAUTION */

    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
     
    /*
    ::-webkit-scrollbar { 
        width: 0.5em;/
      }
    */  
    
}

iframe {
    display: block;
    width: 100%;
    height: 100%;
}

/*
.laptop {
    width: 1024px;
    height: 768px;
}

.tablet {
    width: 768px;
    height: 1024px;
}

.phone {
    width: 375px;
    height: 667px;
}
*/

/* 
 *
 * SCROLLBARS - VERT  & CHECK HORIZONATLM, AROUND TABLES !! CON LO DE L ACLASE DE TABLE WRAPPER , W_TABLE, ... .TABLE ...
 *
 */
 ::-webkit-scrollbar { /* the bar itseld */
    width: 1em; /* APPLIES TO VERTICAL SCROLLBAR - make it less massive ...  */
    /* width: 0.5em; */
    /* width: 0.5em; */
    height: 1em; /* APPLIES TO HORIZONTAL SCROLLBAR - test with table RWD - OK, BUYT SOME MARGIN TOP WOULD BE NICE... */
    background: var(--c-bg); /* */
  }
    ::-webkit-scrollbar-track { /* THE BACKGROUND OF THE SCROLLBAR */
      /* background: hsl(120 75% 50% / 1); */
      /* background: hsl(120 75% 50%); */
      /* background: $c_accent_light; */ /* chenag for a lighter verison of the acent color, so build it with variable sfirts  */
      background: var(--c-bg-alt); /* */ 
      margin-block: 0.5em;
      border-radius: 100vw;
      margin-inline: 0.1em;
    }
      ::-webkit-scrollbar-thumb { /* THE MOVABLE SECTION OF THE SCROLLBAR */
        /* background: hsl(120 100% 20% / 1); */
        /* border: 0.25em solid hsl(120 75% 50% / 1); */
        /* background: hsl(120 100% 20%); */
        /* border: 0.25em solid hsl(120 75% 50%);  */     
        background: var(--c-accent);
        border: 0.25em solid var(--c-accent); /* TRICK, TO MAKE IT LOOK LIKE A PADDING FORM THE OUTSIDE INWARDS  */
        border-radius: 100vw;
      }
        ::-webkit-scrollbar-thumb:hover {
          /* background: hsl(120 100% 10% / 1);  */
          /* background: $c_accent_dark;   */       
          /* background: var(--c-bg-alt); /*  */
          background: var(--c-bg); /*  */
        }