/*
Theme Name:  Child for Twenty Twenty One
Theme URI:  https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush.
Author:  George Chond
Author URI:  https://georgechond.com/
Textdomain: twentytwentyone
Template:  twentytwentyone
Version: 1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

/* Set the Same Font */
html, body {font-family: 'Open Sans', sans-serif;}

/* Set the Colours used */
html {
	--c-green: #38b349;
	--c-blue: #30379f;
	--c-gray: #707070;
	--c-overlay: #f9f9f9;
	--c-black: #191919;
	--c-white: #ffffff;
}

/* Main Text Colour and Background Colour */
body {color: var(--c-gray); background: var(--c-white);overflow-x:hidden;}

/* Custom CSS */
.container {max-width: 1240px;width: 100%;margin-left: auto;margin-right: auto;}
.relative {position: relative;}
.d-none {display: none;}
.hidden {visibility: hidden; opacity: 0;}

.gray {background: var(--c-gray);}
.green {background: var(--c-green);}
.blue {background: var(--c-blue);}

/* Home Page */
.wave {position: absolute;left: 0;top: 0;right:0;width: 100%;max-width: 100%;height: 680px;z-index: -1;display: block;overflow: hidden;}

#home h2, #home h3 {font-weight: 600;}
#home a {text-decoration: none;color:var(--c-gray);}
#home .rounded-title {color: var(--c-white);display: inline-block;border-radius: 50px;padding: 8px 42px 10px;}

#home .intro {text-align: center;display: flex;flex-wrap:wrap;justify-content:center;align-items: center;overflow: hidden;padding:0 20px;}
#home .intro h1 {margin: 4rem 0;font-size: 1.8rem;}
#home .intro img {max-height: 540px;width: 100%;display: flex;z-index: -1;}

#home .bioflex {display: flex;flex-wrap: wrap;gap: 3rem;justify-content: space-between;margin-top:4rem;padding:0 20px;}
#home .bioflex .bio .author {display: block;position: relative;font-weight: 800;font-size: 1.4rem;padding: 0px 8px 4px;}
#home .bioflex .bio .author::before {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;background: var(--c-gray);z-index: 1;}
#home .bioflex .bio .author::after {content: '';position: absolute;top: 0px;right: 0px;width: 50px;height: 40px;z-index: 1;}
#home .bioflex .bio:nth-child(1) .author::after {background: url('/wp-content/uploads/2022/09/FR-flag.png') center / contain no-repeat;}
#home .bioflex .bio:nth-child(2) .author::after {background: url('/wp-content/uploads/2022/09/ΙΤ-flag.png') center / contain no-repeat;}
#home .bioflex .bio .author-vitals {font-size: 13px;font-weight: 600;display: flex;line-height: 20px;max-width: 100%;padding: 4px 8px 4px;margin-bottom: 2.5rem;}
#home .bioflex .bio > h3 {font-size: 1.5rem;margin-bottom: 2rem;}
#home .bioflex .bio > p {font-size: 14px;margin-bottom: 1rem;}

#home .info {background: url('/wp-content/uploads/2022/09/wave2.png') right bottom / auto 350px repeat-x;padding: 6rem 0 4rem;display: flex;align-items: center;}
#home .info .container {padding: 0 20px;}
#home .info .title {text-align:center;margin-bottom: 8rem;}
#home .info .title h2 {font-size: 2rem;}
#home .info .title .box {margin-top:2rem;display:flex;flex-direction:column;align-items:center;}
#home .info .title .box a {font-weight: 600;}
#home .info .content {display: flex;flex-wrap:wrap;gap: 24px;font-weight:600;text-align: center;}
#home .info .content .box {display: flex;flex-direction: column;align-items: center;flex: 1;}
#home .info .content .box h3 {margin-bottom: 2rem;font-size: 1.5rem;}

/* Footer */
footer {background: var(--c-gray);color: #fff;padding: 3rem 20px;text-align: center;}

@media screen and (min-width: 1240px){
	#home .intro {flex-wrap: nowrap;justify-content:unset;text-align:unset;}
	#home .intro img {margin-left:-100px;}
	#home .bioflex .bio {flex: 1;}
}

@media screen and (min-width: 840px){
	#home .intro img {width: auto;}
}

@media screen and (min-width: 640px){
	#home .intro h1 {font-size: 3rem;}
	#home .bioflex {margin-top:10rem;}
	#home .bioflex .bio .author::before {width: calc(100% - 140px);}
	#home .bioflex .bio .author::after {width: 125px;height: 101px;top: -5px;right: 20px;}
	#home .bioflex .bio .author-vitals {max-width: calc(100% - 110px);}
}