:root{
    width:100vw;
    overflow-x: hidden;
    padding: 0px;
    margin:0px;
    /*background:green;*/
    font-size: 1rem;
    background-image: url(WebImgs/pexels-abraham-pérez-11991865.jpg);
    --primary-text:aliceblue;
    --primary-text-highlight:rgba(49, 39, 31, 0.648);
    --secondary-text-highlight:rgba(223, 110, 17, 0.829);
    --primary-border:rgb(41, 33, 33);
    --primary-section:rgb(228, 228, 228);
    overflow-wrap: break-word;
}

:is(li) :any-link{
    color:var(--secondary-text-highlight);
}

body{
    padding:0px;
    margin:0px;
    justify-items: center;
    align-items: center;
}

h2{
    text-indent: 1em;
    transition: 900ms

}

p{
    transition: 800ms;
}


#grid-section-1{
    width: 100vw;
    height: fit-content;
    justify-content: center;
    display: grid;
    grid-template-columns: 20vw 20vw 20vw 20vw;
    grid-template-rows: auto;
    row-gap: 2vw;
    column-gap: 4vw;
    margin:0px;
    padding-top:4vw;
    padding-bottom:4vw;
    left:0px;
    color:var(--primary-text);
    /* text-decoration-line: line-through;
    text-decoration-thickness: 1em;
    text-decoration-color: rgba(30, 78, 150, 0.329); */
    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0),var(--primary-section),var(--primary-section),var(--primary-section));
}

#grid-section-1 p{
    display:inline;
    background: var(--primary-text-highlight);
    line-height: 1.5;
}

#photo-box{
    aspect-ratio: 1/1;
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    /* background:rgba(0, 0, 0, 0.441); */
    color: var(--primary-text);
    overflow-wrap:break-word;
    border-radius: 50%;
    border:0.25em solid var(--primary-border);
    overflow: hidden;
    box-shadow: 0px 0px 1em black;
    transition: box-shadow 550ms;
}

#photo-box img{
    display: block;
    position: relative;
    aspect-ratio: 1/1;
    height: 100%;
}

/* #photo-box:hover{ }*/

#mission-box{
    background: rgba(0, 0, 0, 0.441);
    border:0.25em solid var(--primary-border);
    grid-column: 2 / span 3;
    border-radius: 0.5cm;
    padding:1.5vw;
    overflow: hidden;
    box-shadow: 0px 0px 1em black;
    text-indent:1em;
    transition: background 700ms;
}

#skills-list h2{
    text-indent:0em;
    text-shadow: 0px 0px 0.2em black;
}

#mission-box:hover,#skills-list:hover,.skills-boxes:hover,.column-info:hover,#side-comments:hover,#side-footer:hover,#top-left-comment:hover,#bottom-left-comment:hover,#large-inputs:hover{
    background:rgba(0, 0, 0, 0.80);
} 

:is(#mission-box,#skills-list,.skills-boxes,.column-info,#side-comments,#side-footer,#top-left-comment,#bottom-left-comment,#large-inputs):hover > p{
    background: var(--secondary-text-highlight);
}

:is(#mission-box,#skills-list,.skills-boxes,.column-info,#side-comments,#side-footer,#top-left-comment,#bottom-left-comment,#large-inputs):hover > h2{
    text-decoration: underline double var(--secondary-text-highlight);
}

#skills-list{
    /* aspect-ratio:1/1.3; */
    background: rgba(0, 0, 0, 0.441);
    border:0.25em solid var(--primary-border);
    grid-column: 1 / span 1;
    grid-row: 2 / span 2;
    border-radius: 0.5cm;
    padding:1.5vw;
    overflow: hidden;
    transition: background 700ms;
    box-shadow: 0px 0px 1em black;

}

#skills-list h2{
    justify-content: left;
    font-size: 1.7em;
}

#skills-list li{
    position:relative;
    background:rgba(0, 0, 0, 0.441);
    font-weight: 700;
    font-size: large;
    left:-10%;
    margin-top: 2em;
    margin-bottom: 3em;
    overflow-wrap: break-word;
}

.skills-boxes{
    background: rgba(0, 0, 0, 0.441);
    border:0.25em solid var(--primary-border);
    grid-column: auto;
    grid-row: auto / span 1;
    border-radius: 0.5cm;
    padding:1.5vw;
    overflow: hidden;
    transition: background 700ms;
    box-shadow: 0px 0px 0.7em black;
}

.skills-boxes svg{
    width:50%;
    height:25%;
    position:relative;
    float: right;
}

#grid-section-2{
    width: 100vw;
    height: fit-content;
    display: grid;
    justify-content: center;
    grid-template-columns: 20vw 20vw 20vw 20vw;
    grid-template-rows: auto;
    row-gap: 2vw;
    column-gap: 4vw;
    margin:0px;
    padding-top:4vw;
    padding-bottom:4vw;
    background:var(--primary-section);
    color:var(--primary-text);
}

#grid-section-2 p{
    display:inline;
    background: var(--primary-text-highlight);
    line-height: 1.5;
}

.column-info{
    aspect-ratio: 1/2;
    grid-column: auto / span 1;
    grid-row: 1 / span 3;
    background: rgba(0, 0, 0, 0.441);
    border:0.25em solid var(--primary-border);
    border-radius: 0.5cm;
    padding: 1.5vw;
    transition: background 700ms;
    box-shadow: 0px 0px 1em black;
}

.line-through{
    position:relative;
    width: 0px;
    height: 1em;
    margin-top:0px;
    left:0px;
    color: rgba(0,0,0,0);
    background:var(--primary-text-highlight);
    transition: width 700ms;

}

:is(#skills-list,.column-info):hover > .line-through{
    width: 13vw;
    left:0px;
    color: rgba(0,0,0,0);
    background:var(--secondary-text-highlight);

}

.section-heading {
    background: var(--primary-text-highlight);
    width: max-content;
    text-align: left;
    text-decoration:none;
    padding-right: 2em;
    margin-bottom: 0px;
}

:is(#skills-list,.column-info):hover > .section-heading {
    background:rgba(22, 18, 15, 0.877);
    text-decoration: none;
}

#side-comments{
    background: rgba(0, 0, 0, 0.441);
    border:0.25em solid var(--primary-border);
    grid-column: 4 / span 1;
    grid-row: 1 / span 2;
    border-radius: 0.5cm;
    padding:1.5vw;
    transition: background 700ms;
    box-shadow: 0px 0px 1em black;
}

#side-footer{
    background: rgba(0, 0, 0, 0.441);
    border:0.25em solid var(--primary-border);
    grid-column: 4 / span 1;
    grid-row: 3 / span 1;
    border-radius: 0.5cm;
    padding:1.5vw;
    transition: background 700ms;
    box-shadow: 0px 0px 1em black;
}

#top-banner{
    justify-items: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    height: 75vh;
    padding:1px;
    margin: 1px;
    padding-top:25vh;
}

#title-banner{
    display: grid;
    grid-template-columns: 66vw;
    grid-template-rows: fit-content fit-content;
    align-items: center;
    justify-items: center;
    padding:1px;
    margin: auto;
    row-gap: 1em;
    width: fit-content;
}

#title-banner h1{
    color: white;
    text-shadow: 0px 0px 10px black;
    font-size: 4rem;
    font-weight: 700;
    justify-content: center;
    align-content: center;
    grid-row: 1/span 1;
    margin-bottom: 0px;
}

#title-banner p{
    color:white;
    text-shadow: 0px 0px 15px black;
    font-size: 1.5em;
    grid-row: 2/span 1;
    margin-top: 0px;
}

#grid-section-3{
    width: 100vw;
    height: fit-content;
    /* change display to grid once the content is finished */
    display:none;
    justify-content: center;
    grid-template-columns: 20vw 20vw 20vw 20vw;
    grid-template-rows: auto;
    row-gap: 2vw;
    column-gap: 4vw;
    margin:0px;
    padding-top:4vw;
    padding-bottom: 25vh;
    left:20px;
    /* background: var(--primary-section); */
    background-image: linear-gradient(var(--primary-section),var(--primary-section),var(--primary-section),rgba(0,0,0,0),rgba(0,0,0,0));
}

#grid-section-3 p{
    display:inline;
    background: var(--primary-text-highlight);
    line-height: 1.5;
    word-break: break-all;
    color:var(--primary-text);
}

#top-left-comment{
    background: rgba(0, 0, 0, 0.441);
    border:0.25em solid var(--primary-border);
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    border-radius: 0.5cm;
    padding:1.5vw;
    transition: background 700ms;
    box-shadow: 0px 0px 1em black;
}

/*#left-side-menu{
    background: rgba(0, 0, 0, 0.441);
    border:0.25em solid var(--primary-border);
    grid-column: auto;
    grid-row: auto / span 1;
    border-radius: 0.5cm;
    padding:1.5vw;
    overflow: hidden;
    transition: background 700ms;
    box-shadow: 0px 0px 0.7em black;
}
*/
#bottom-left-comment{
    background: rgba(0, 0, 0, 0.441);
    border:0.25em solid var(--primary-border);
    grid-column: 1 / span 1;
    grid-row: 2 / span 2;
    border-radius: 0.5cm;
    padding:1.5vw;
    transition: background 700ms;
    box-shadow: 0px 0px 1em black;
}

#large-inputs{
    aspect-ratio:2.75/1;
    background: rgba(0, 0, 0, 0.441);
    border:0.25em solid var(--primary-border);
    grid-column: 2 / span 3;
    grid-row: 1 / span 3;
    border-radius: 0.5cm;
    padding:1.5vw;
    transition: background 700ms;
    box-shadow: 0px 0px 1em black;
}

footer{
    background:linear-gradient(var(--primary-section),var(--primary-section),var(--primary-section),rgba(0,0,0,0),rgba(0,0,0,0));
    color:white;
    justify-content: center;
    position: relative;
    padding-top: 10em;
    padding-left: 3em;
    padding-bottom: 2em;
}

footer p{
    background: var(--primary-text-highlight);
    overflow-wrap: break-word;
    display: inline;
}