.All_Body{
    margin: 0;
}

.dark_Theme{
	--color-Button: #000;
	--color-Text: #fff;
	--color-Text-Dsiplay: #fff;
    --color-Header: #545454;
    --color-S1_S3: #828282;
    --color-S2_S4: #706f6f;
} 

.light_Theme{
	--color-Button: #fff;
	--color-Text: #000;
	--color-Text-Dsiplay: #303030;
    --color-Header: #f0f0f0;
    --color-S1_S3: #dfdfdf;
    --color-S2_S4: #cfcfcf;
}

.Section_Header{
    display:flex;
    align-items: center;
    justify-content: start;
    height: auto;
}

header{
    position: sticky;
    top: 0;
    background-color: var(--color-Header);
    font-size: large;
    width: auto;
    height: 75px;
    z-index: 1;
}

.center_Theme{
    padding-left: 3%;
    padding-right: 39.5%;
}

.Theme_Button{
    display: flex;
    align-items: center;
    width: 5vw;
    height: 3ch;
    font-size: 1vw;
    background-color: var(--color-Button) ;
    color: var(--color-Text) ;
    border-radius: 37px;
    border: none;
    transition: 0.4s;
}
.Theme_Button:hover{
    cursor: grab; /*help*/
    transform:scale(1.2);
    background-color: var(--color-Button) ;
    opacity: 0.9;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
    transition: 0.4s;
}
.Theme_Button:active{
    cursor: grabbing;
}

.Logo_Theme{
    width: 40%;
}

.Logo_Button{
    top: 20;
    border: none;
    background: none;
    font-size: 1.25vw;
    font-family:'Times New Roman', Times, serif;
    color: #00000000;
    height: 8vh;
    width: 5%;
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    transition: 0.5s;
}
.Logo_Button:hover{
    transform:scale(1.2);
    text-shadow: 5px 13px 20px rgba(0, 0, 0, 1);
    transition: 0.4s;
    transition: 1s;
    color:#ffffff;
}

.Header_Buttons{
    justify-content: end;
    padding-left: 30%;
    padding-right: 3%;
}

.GitHub_Button{
    font-size: 1vw;
    background-color: #171515 ;
    color: #fff ;
    border-radius: 37px;
    border: none;
    transition: 0.4s;
}
.GitHub_Button:hover{
    cursor: grab; /*help*/
    transform:scale(1.2);
    background-color: #171515 ;
    opacity: 0.9;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
}
.GitHub_Button:active{
    cursor: grabbing;
}

.Linkedin_Button{   
    font-size: 1vw;
    background-color: #0e76a8 ;
    color: #fff;
    border-radius: 37px;
    border: none;
    transition: 0.4s;
}
.Linkedin_Button:hover{
    cursor: grab; /*help*/
    transform:scale(1.2);
    background-color: #0e76a8 ;
    opacity: 0.9;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
}
.Linkedin_Button:active{
    cursor: grabbing;
}

.Mail_Button{
    font-size: 1vw; 
    background-color: var(--color-Button) ;
    color: var(--color-Text) ;
    border-radius: 37px;
    border: none;
    transition: 0.4s;
}
.Mail_Button:hover{
    cursor: grab; /*help*/
    transform:scale(1.2);
    background-color: var(--color-Button) ;
    opacity: 0.9;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
}
.Mail_Button:active{
    cursor: grabbing;
}

.CV_Button{
    font-size: 1vw;
    background-color: var(--color-Button) ;
    color: var(--color-Text) ;
    border-radius: 37px;
    border: none;
    transition: 0.4s;
}
.CV_Button:hover{
    cursor: grab; /*help*/
    transform:scale(1.2);
    background-color: var(--color-Button) ;
    opacity: 0.9;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
    transition: 0.4s;
}
.CV_Button:active{
    cursor: grabbing;
}

section{
    height: auto;
    color: #000;
}

.Seccion_1{
    background-color: var(--color-S1_S3);
}

.Titulo_1{
    font-size: 60px;
    display: flex;
    justify-content: center;
    text-align: center;
    font-family:'Times New Roman', Times, serif;

}

.Texto_Normal{
    font-size: 24px;
    display: flex;
    justify-content: center;
    text-align: center;
    font-family:'Times New Roman', Times, serif;

}

.Display_Text{
    font-size: 24px;
    display: none;
    justify-content: center;
    text-align: center;
    font-family:'Times New Roman', Times, serif;
}

.Display_Button{
    background: none;
    border: none;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 24px;
    color: var(--color-Text-Dsiplay) ;
    font-weight: bold;
    font-family:'Times New Roman', Times, serif;

}
.Display_Button:hover{

    transition: 0.5s;
    cursor: help; /*help*/
}

.Seccion_2{
    background-color: var(--color-S2_S4);
}

.Titulo_2{
    font-size: 48px;
    display: flex;
    justify-content: center;
    text-align: center;
    font-family:'Times New Roman', Times, serif;

}

.Grid_Button{
    border: none;
    background: none;
    font-size: 1.25vw;
    font-family:'Times New Roman', Times, serif;
    color: #00000000;
    transition: 0.5s;
}
.Grid_Button:hover{
    cursor: grab; /*help*/
    transform:scale(1.05);
    text-shadow: 5px 13px 20px rgba(0, 0, 0, 1);
    transition: 0.4s;
    transition: 1s;
    color:#000;
}
.Grid_Button:active{
    cursor: grabbing;
}

.celda{
    width: 35%;
    height: auto;
    padding: -20px;
}

.Seccion_3{
    background-color: var(--color-S1_S3);
}

.Grid_Displays{
    display: flex;
    justify-content: center;
    text-align: center;
    color: var(--color-Text-Dsiplay) ;
    background-color: none;
    padding-right: 4%;
}

.Grid_Studies{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap:1rem;
    color: #fff;
    background-color: none;
}

.Grid_Works{
    place-items: center;
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    grid-gap:1rem;
    color: #fff;
    background-color: none;
}

.Seccion_4{
    background-color: var(--color-S2_S4);
}
.Titulo_3{
    font-size: 36px;
    display: flex;
    font-family:'Times New Roman', Times, serif;
}

.Texto_Footer{
    font-size: 16px;
    display: flex;
    font-family:'Times New Roman', Times, serif;
}

.TFG_Button{
    display: flex;
    place-items: center;
    justify-content: center;
    align-items: center;
    font-size: 1.25vw;
    text-align: center;
    font-family:'Times New Roman', Times, serif;
    border: none;
    background: none;
}
.TFG_Button:hover{
    cursor: grab; /*help*/
    transform:scale(1.05);
    text-shadow: 5px 13px 20px rgba(0, 0, 0, 1);
    transition: 0.4s;
    animation: shake;
}
.TFG_Button:active{
    cursor: grabbing;
}

.Grid_Button_Work{
    border: none;
    background: none;
    font-size: 1.25vw;
    font-family:'Times New Roman', Times, serif;
    color: #00000000;
    height: 30vh;
    width: 40%;
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    transition: 0.5s;
}
.Grid_Button_Work:hover{
    cursor: grab; /*help*/
    transform:scale(1.05);
    text-shadow: 5px 13px 20px rgba(0, 0, 0, 1);
    transition: 0.4s;
    transition: 1s;
    color:#ffffff;
}
.Grid_Button_Work:active{
    cursor: grabbing;
}


/*   Barra de cerca     
        <label for="ElementsInProf">Find All&nbsp;</label>
            <input type="text" id="ElementsInProf" list="items">
            <datalist id="items">
            <option value="My Studies">
            <option value="CITM">
            <option value="CTS">
            <option value="My Works">
            <option value="Guardians of The Galaxy">
            </datalist>
            <script>
                const input = document.getElementById("ElementsInProf");

                input.addEventListener("input", function() {
                const selectedOption = this.value;
                switch (selectedOption){
                    case CITM:
                    openProj3()
                    break;
                        
                    case CTS:
                    openProj3()
                    break;

                    case 3:
                    window.open('https://github.com/Draquian', '_blank')
                    break;

                    case 4:
                    window.open('https://github.com/Draquian', '_blank')
                    break;
                }

                });
            </script>
*/