.hero-container {
    display: block;
    width: 100%;
    /* height: 945px; */
    height: 100vh;
    background-color: #333333;

    margin: auto;
    
    background-image: url("../assets/Images/GoldenStream3.png"); /*assets/Images/Gold\ stream.png  assets/Images/GoldenStream2.png*/
    background-position: center;
    background-size: 101%;
    background-repeat: no-repeat;

    text-align: center;
    place-content: center;
    color: white;
    text-decoration: none;
}

.row {
    display: grid;

    grid-template-columns: 6fr 6fr;

    padding-top: 1%; 
}

.text-article {
    text-align: center;
    place-content: center;

}

.img-article {
    text-align: center;
    place-content: center;
}

.img-article > img {
    width: 75%;
}

#article-logo {
    width: 50%;

    transition: 0.5s;

    border-radius: 50%;
}

#article-logo:hover {

    transition: 0.5s;

    transform: rotate(360deg) scale(1.2);
}

#article-langauges {

    transition: 0.5s;
}

#article-langauges:hover {

    transition: 0.5s;

    transform: scale(1.2);
}

#article-cpu {
    width: 50%;
    transition: 0.5s;
}

#article-cpu:hover {

    transition: 0.5s;

    transform: scale(1.2) rotate(5deg);
}

main {
    padding: 5%;
}

.section-header {
    padding: 1% 0;

    text-align: center;
}

.header-bar {
    width: 40%;
    margin: 1% auto;
    border: solid black 3px; border-radius: 10px;
}

.block-article {
    text-align: center;
    width: 75%;
    margin: auto;

    background-color: lightgray;

    border: solid black 2px;
    border-radius: 50px;

    box-shadow: 10px 10px 10px black;

    transition: 0.5s;
}

.block-article:hover {
    transition: 0.5s;

    transform: translateX(-10px) translateY(-10px);

    box-shadow: 20px 20px 30px black;
}

.tri-panel {
    display: grid;

    grid-template-columns: 4fr 4fr 4fr;
}

.column-tri-panel {
    padding: 10%;

    place-content: center;

    text-align: center;
}

.column-tri-panel.light
{
    background-color: #eba100;
}

.column-tri-panel.dark {
    background-color: #976700;
}