/**
 * Style pour la page d'accueil du site du club Calliopé.
 **/

/*
 * Arrière plan de la page.
 */

html {
	background-attachment:fixed;
	background-color:#0099ff;
	/*background-image:url("./background.jpg"); /* Image de nuages blancs sur fond bleu. */
	/*background-image:url("./italy-1912728_1920.jpg"); /* https://pixabay.com/fr/italie-c%C3%B4te-montagnes-mer-ciel-1912728/ */
	background-image:url("./fantasy-landscape-1481184_1280.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	height:100%;
}

body {
	height:100%;
	margin:0px;
}

/*
 * Zone principale de la page.
 */

section {
	margin:0px auto;
	min-height:100%;
	width:70%;
}

article > header {
	font-weight:bold;
	padding:10px 15px 5px 15px;
	text-align:center;
}

/*
 * Bannière verticale du club.
 */

.banner-vertical {
	background-image: url('./banner-vertical.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 100vh;
	overflow: hidden;
}

/*
 * Zone blanche semi-transparente avec les coins ronds.
 */

.cloud {
	background-color:rgba(255, 255, 255, 0.8);
	border-radius:5px;
	overflow:hidden;
}

/*
 * Répartition en trois colonnes.
 */

.multicolumn-3 {
	align-items:center;
	display:flex;
	position:relative;
}

.multicolumn-3 > * {
	display:block;
	width:calc(100% / 3);
}

/*
 * Liste.
 */

ul.nostyle {
	list-style-type:none;
	margin:0px;
	padding:0px;
}

.line {
	background-color:rgba(255, 255, 255, 0.5);
	border-radius:5px;
	display:flex;
	margin:5px;
}

.line > * {
	flex-grow:1;
	padding:5px 10px;
}

.line > :last-child {
	font-size:10px;
	font-weight:normal;
	text-align:right;
}

/*
 * Liens.
 */

a {
	color:#000000;
	font-weight:bold;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}