@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700');

:root{
    --amd-main-color: rgb(237, 28, 36);
    --nvidia-main-color: rgb(118, 185, 0);
    --floral-white: #fffcf2ff;
    --black-olive: #403d39ff;
    --eerie-black: #252422ff;
}

* {
    padding: 0;
	margin: 0;
	box-sizing: border-box;
    font-family: "Rajdhani", serif;
    font-weight: 500;
    font-style: normal;
	font-size: 1.5vw;
}

button{
    background: none;
    border: none;
    cursor: pointer;
}

body{
    width: 100%;
    height: 100vh;
}

#main{
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    background-image: url('../assets/1440-900-1296621.png');
    background-size: cover;
    -webkit-backdrop-filter: grayscale(0.8);
    backdrop-filter: grayscale(0.8);
}

.section{
    min-width: 20%;
    height: 100%;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    border: solid 0px transparent;

    transition: 700ms ease-in-out;
    -webkit-backdrop-filter: grayscale(0.8) brightness(0.5) ;
    backdrop-filter: grayscale(0.8) brightness(0.5) ;
}

#section1:hover{
    border-right: solid 5px var(--amd-main-color)
}
#section2:hover{
    border-left: solid 5px var(--nvidia-main-color)
}

#section1:hover,
#section2:hover{
    flex-grow: 3;
}

#section1:hover{
    -webkit-backdrop-filter: grayscale(0.8) brightness(0.6) hue-rotate(5deg) contrast(150%) saturate(5);
    backdrop-filter: grayscale(0.8) brightness(0.6) hue-rotate(5deg) contrast(150%) saturate(5);
}

#section2:hover{
    -webkit-backdrop-filter: grayscale(0.8) brightness(0.6) hue-rotate(35deg) contrast(150%) saturate(5);
    backdrop-filter: grayscale(0.8) brightness(0.6) hue-rotate(35deg) contrast(150%) saturate(5);
}

#section1:hover ~ #section2,
#section2:hover ~ #section1 {
    flex-grow: 0.5;
}

.section-content{
    width: 60%;
    height: max-content;
    margin-block-start: 35vh;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 10vh;
}

.content-title{
    font-size: 3em;
    color: var(--floral-white);
    transition: 700ms ease-in-out; 
}

#section1:hover > .section-content > .content-title{
    color: var(--amd-main-color);
}
#section2:hover > .section-content > .content-title{
    color: var(--nvidia-main-color);
}


.content-button{
    width: max-content;
    padding: 2vh 4vw;
    border: solid 3px;

    background-color: var(--eerie-black);
    border-color: var(--floral-white);
    color: var(--floral-white);
    transition: 100ms ease-in-out;
}

.section:hover > .section-content > .amd-button{
    color: var(--amd-main-color);
    border-color: var(--amd-main-color);
}

.section:hover > .section-content >  .nvidia-button{
    color: var(--nvidia-main-color);
    border-color: var(--nvidia-main-color);
}


#amd-button:hover{
    background-color: var(--amd-main-color)
}

#nvidia-button:hover{
    background-color: var(--nvidia-main-color);
}

#amd-button:hover,
#nvidia-button:hover{
    color: var(--floral-white);
    border-color: var(--floral-white);
}


.section-logo{
    max-width: 100px;
    margin: 5vw;
    transition: 700ms ease-in-out;
    filter: grayscale(0);
}

.nvidia-logo{
    height: 5vw;
    max-width: 150px;
    align-self: start;
}  

.amd-logo{
    width: 5vw;
    align-self: end;
}