/* Global CSS */
/** Root Elements CSS **/
:root {
	--main-bg-color: #61122f;
	--main-text-color: #212529;
	--second-text-color: #fff;
	--third-text-color: #557c3e;
	--fourth-text-color: #61122f;
	--hover-anchor-color: #E7E7E7;
	--header-bg-color: #f6b319;
	--main-font-family: 'Oxygen', sans-serif;
	--second-font-family: 'Lora', serif;
}

/* ========================================================================== */
/** Main Doc Elements CSS **/
body {
	font-size: 16px;
	font-family: var(--main-font-family);
	color: var(--second-text-color);
	background: var(--main-bg-color);
}

/** Headings **/
/* ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
	font-family: 'Nunito', sans-serif;
}

/* Custom CSS */
/* ========================================================================== */
body {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: url("../images/main_bg.jpg");
}

main .container {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	height: 60vh;
	flex-wrap: wrap;
	text-align: center;
}

.website {
	text-align: center;
	width: 40%;
	background: white;
	height: 200px;
}

.website img {
	max-width: 80%;
	width: 100%;
	height: auto;
}

.thetiko {
	padding: 20px;
}

.thetiko:hover a, .thetiko:hover {
	color: red;
}

.theoritiko {
	padding: 20px;
}

.theoritiko:hover a,  .theoritiko:hover{
	color: purple;
}

p,
a {
	text-align: center;
}

/** Media Query **/
/* ========================================================================== */

/****************** Large Devices Only ******************/
@media (min-width: 1200px) {}

/***************** Medium Devices Only ******************/
@media (min-width: 992px) and (max-width: 1199px) {}

/****************** Small Devices Only ******************/
@media (min-width: 657px) and (max-width: 991px) {
    .thetiko {width: 100%; 	border-bottom: 1px solid black}
.theoritiko {width: 100%;}
}

/***************** Extra Small Devices Only *****************/
@media (max-width: 656px) {
main .container {
	height: 80vh;
}

.thetiko { width: 100%; 	border-bottom: 1px solid black}
.theoritiko {width: 100%;}
    
}

/* ========================================================================== */