/*****/

/*
NOTE TO SELF:
Watch Traversy Media tutorials as refresher
W3schools for actual demo

It's hard to memorize the syntax without constant practice
*/

/*****/

html, body{
    margin: 0;
    width: 100%;
    color: black;
    font-family: 'Changa', 'fantasy';
}
a{
    color: black;
}

/*****/

#main-header{
    background-color: #FAF9F6;
    padding: 0 30px;
    display: flex; /*default row direction*/
    align-items: center; /*align logo alongside the title*/
}
#main-header .bne_logo{
    height: 100px;
    max-width: 150px;
    margin-right: 15px;
}
#main-header h1{
    font-size: 3.2em;
    /*flex: 1;*/
}

/*****/

#navbar{
    background-color: #FAF9F6;
    border-block: 2px solid black;
}
#navbar ul{
    margin: 0;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    list-style: none;
}
#navbar li a{
    /*flex: 1; /*takes all space evenly*/
    padding: 15px;
    font-size: 20px;
    text-decoration: none; /*remove text underline*/
    transition: 0.3s; /*hover animation transition*/
}
#navbar li a:hover{
    background-color: #36454F;
    color: white;
}

/*****/

#main-section{
    padding: 15px;
}
.section-flex-wrapper{
    margin-block: 20px;
    padding: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.section-flex-wrapper article{
    display: flex;
    flex-basis: 25%; /*width but flexy style*/
    flex-direction: column;
    /*border-radius: 15px 50px;*/
}

article:hover{
    border-radius: 15px;
}
article .desc_pic{
    min-height: 150px;
    margin: 15px;
}
article .desc_pic img{
    object-fit: contain; /*retains normal aspect of img*/
    width: 100%;
    max-width: 100%;
    min-height: 150px;
}
article .desc_pic img:hover{
    animation: imgRotate 10s infinite;
    animation-delay: 0.2s;   
    /*transform: rotate(360deg);
    transition: 5s;
    */
}
/*keyframes the main animation*/
@keyframes imgRotate{
    50% {transform: rotate(360deg);}
}
article .desc_text{
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0 15px 15px 15px;
    padding-inline: 25px;
    border-radius: 15px 50px;
    font-size: 25px;
    text-align: center;
}
.desc_text p{
    flex: 1;
}
.desc_text .button{
    background-color: white;
    width: 100%;
    padding: 10px 15px;
    align-items: flex-end; /*place at the bottom*/  
    border-radius: 15px;
    font-family: 'Changa';
    font-size: 25px;
    letter-spacing: 3px;
    cursor: pointer;
}
article .desc_text .button:hover{
    color: red;
    transition: 0.3s;
}
.cpp_article:hover{
    animation: cppHover 3s infinite;
    animation-delay: 0.2s
}
@keyframes cppHover {
  50% {box-shadow: 10px 20px 20px green;
        translate: -10px -10px;}
}
/*
.cpp_article .desc_text{
    background-color: #ACE1AF;
    box-shadow: 0 5px 0 0 darkgreen;
}
*/
.cpp_article .desc_text .button{
    border: 3px solid green;
    color: green;
}
/*
.r_article{
    margin-right: 30px;
    margin-left: 30px;    
}
*/
.r_article:hover{
    animation: rHover 3s infinite;
    animation-delay: 0.2s
}
@keyframes rHover {
  50% {box-shadow: 10px 20px 20px blue;
        translate: 0 -10px;}
}
/*
.r_article .desc_text {
    background-color: #7CB9E8;
    box-shadow: 0 5px 3px 0 darkblue;
}
*/
.r_article .desc_text .button{
    border: 3px solid darkblue;
    color: darkblue;
}
.sql_article:hover{
    animation: sqlHover 3s infinite;
    animation-delay: 0.2s
}
@keyframes sqlHover {
  50% {box-shadow: 10px 20px 20px orange;
        translate: 10px -10px;}
}
/*
.sql_article .desc_text {
    background-color: #FFA07A;
    box-shadow: 0 5px 3px 0 darkorange;
}
*/
.sql_article .desc_text .button{
    border: 3px solid darkorange;
    color: darkorange;
}

/*****/

.section-flex-wrapper > iframe{
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 550px;
}

/*****/

#main-footer{
    background-color: #FAF9F6;
}

.footer-flex-wrapper{
    display: flex;
    justify-content: center;
    padding: 30px;
}
.footer-flex-list{
    flex-basis: 25%;
    justify-content: space-evenly;
    padding: 15px 20px;
    font-weight: 500;
    font-size: 20px;
    text-align: center;
}
.footer-flex-list h4{
    margin-block: 15px; 
    font-size: 1.3em;
}
.footer-flex-list ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex: 1;
    flex-direction: column;
}
.footer-flex-list li a{
    display: flex;
    justify-content: center;
    text-decoration: none;
}
.footer-flex-list li a:hover{
    background-color: #36454F;
    color: white;  
    transition: 0.3s;
}
.footer-info{
    padding: 10px 30px;
    text-align: center;
}
.footer-end{
    border-block: 2px solid black;
    padding: 0;
    text-align: center;
}
.footer-end h4{
    margin: 0;
    padding: 10px;
}

/*media query*/
@media only screen and (max-width: 720px) {
    #main-header{
        padding: 20px;
        flex-direction: column;
        justify-content: center;
    }
    #main-header h1{
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #navbar{
        padding: 0;
    }
    #navbar ul{
        padding: 0;
        flex-direction: column;
    }
    #navbar li a{
        display: flex;
        flex: 1;
        padding: 5px;
        justify-content: center;
        align-items: center;
    }
    .section-flex-wrapper{
        padding: 15px;
        flex-direction: column;
    }
    .footer-flex-wrapper{
        padding: 15px;
        flex-direction: column;
    }
}

@media only screen and (min-width: 2500px){
    html,body{
        margin: auto;
        width: 50%;
        max-width: 50%;
    }
    .section-flex-wrapper{
        margin: auto;
        max-width: 80%;
        padding: 30px;
        flex-direction: column;
    }
    article .desc_pic img{
        margin-left: 25%;
        margin-right: 25%;
        max-width: 50%;
        height: auto;
    }
    .footer-flex-wrapper{
        padding: 15px;
        flex-direction: column;
    }
}