/* *****************
SECTION STYLING #1
***************** */


main section:nth-of-type(1){
    padding: 0% 0% 15% 13%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
}

main section:nth-of-type(1) h2{
    grid-column: 1/-1;
    font-size: 8rem;
    padding: 10rem 0rem 1rem;
    font-family: 'mainText';
    color: var(--color-text);
    margin-right: -50%;
}

main section:nth-of-type(1) p{
    width: 60ch;
    max-width: max-content;
    font-family: 'breadText';
}

main section:nth-of-type(1) p span{
    color: var(--color-accentcolor);
    font-size: 3em;
    font-family: 'mainText';
}

main section:nth-of-type(1) img:nth-of-type(1){
    grid-column: 2/-1;
    width: 80%;
    margin: 6em 0 0 10em;
    
}

main section:nth-of-type(1) div{
    display: flex;
    flex-direction: column;
    margin-right: 5em;
}



@media only screen and (max-width: 1300px){
    main section:nth-of-type(1){
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: auto;
    }
}

@media only screen and (max-width: 700px){
    main section:nth-of-type(1) p{
        width: 100%;
    }
}

@media only screen and (max-width: 550px){
    main section:nth-of-type(1) h2{
        font-size: 5rem;
    }
}

@media only screen and (max-width: 1700px){
    main section:nth-of-type(1) img:nth-of-type(1){
        align-content:last baseline;
        margin: 6em 0 0 5em;
    }
}

main section:nth-of-type(1) img:nth-of-type(2){
    width: 3em;
}

main section:nth-of-type(1) img:nth-of-type(2){
    grid-column: 2;
    grid-row: 2;
    width: 3.5em;
    place-self: center;
    margin-top: 20vh;
    margin-left: -13%;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { 
        transform: translateY(0); 
    }
    50% { 
        transform: translateY(-1em); 
    }
}


/* **********
LOGOS 
********** */

main section:nth-of-type(2){
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    padding: 0% 0% 15% 13%;
}

main section:nth-of-type(2) img{
    width: 5em;
    margin-left: 3em;
}

main section:nth-of-type(2) h2{
    font-size: 8rem;
    font-family: 'mainText';
    color: var(--color-text);
    grid-column: 1/-1;
    grid-row: 1;

}

main section:nth-of-type(2) div{
    grid-row: 2;
    grid-column: 1;
}

.skills {
    display: flex;
    margin-top: 10em;
}

main section:nth-of-type(2) div:nth-of-type(2) img{
    width: 6em;
    margin-top: -.5em;
}
main section:nth-of-type(2) div:nth-of-type(3) img{
    width: 6em;
    margin-top: -.5em;
}

main section:nth-of-type(2) div p{
    width: 60ch;
    position: absolute;
    margin-top: 2em;
    font-family: 'breadtext';
}

main section:nth-of-type(2) img:hover{
    transform: scale(1.1);
    transition: all 0.5s ease;
    cursor: pointer;
    transform: translateY(10px);
}

.hidden:nth-of-type(2) div p{
    display: none; 
    transition: all 0.3s ease-in-out;
}

.hidden:nth-of-type(2) div p {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.hidden div p.show {
    opacity: 1;
}

.hidden div img {
    transition: transform 0.3s ease-in-out;
}

.hidden div img.zoom {
    transform: scale(1.2);
}