/* TYPO */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

/* CSS */

/* GENERAL */
* {
    margin:0;
    padding:0;
}
body {
    background-image: url("../assets/background-notre-dame-1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    background-position: center;
    color: #000;
}
.text-dark,
a.text-dark:hover,
a.text-dark:focus,
a.text-dark:active{
    color: #000!important;
}
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 115px;
}
/* FOOTER */
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 115px;
line-height: 110px; /* Vertically center the text there */
background-color: #ffe461;
text-align: center;
}
.footer span {
    margin-left: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}
.footer a {
    font-weight: bold;
}
/* HEADER */
.logoquiz {
    margin-top: 150px;
}
#accroche {
    font-size: 40px;
    font-family: 'Poppins', sans-serif;;
    margin: auto;
    background-color: white;
    font-weight: bolder;
    font-style: italic;
    padding: 0 20px;
    -webkit-box-decoration-break: clone;
    line-height: 1.8em;
    left: -10px;
    position: relative;
    color: #000;
}

.mainText {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 22px;
    margin: auto;
    max-width: 100%;
    width: 600px;
        padding: 0 20px
}

.underline{
	position:relative;	
}

.underline:after {
	content: " ";
    height: 10px;
    background-color: #ffe461;
    position: absolute;
    width: calc(100% + 7px);
    left: -3px;
    z-index: -1;
    top: 65%;
}

button{
		outline: none!important;
}

.button {
    border-radius: 20px;
    padding: 12px 40px 11px 40px;
    font-family: 'Fredoka One', cursive;
    background-color: #ffe461;
    font-size: 30px;  
	-webkit-transition: all 150ms ease-in-out;
	-moz-transition: all 150ms ease-in-out;
	-ms-transition: all 150ms ease-in-out;
	-o-transition: all 150ms ease-in-out;
	transition: all 150ms ease-in-out;    
	cursor:pointer;
	border:2px solid #ffe461;
	outline: none!important;
}

.button:hover{
    background:none;
	border:2px solid #000;
	text-decoration:none;
	color: black;
}

.button {
    color: black;
}

.mainContent{
	margin-bottom: 250px;
}

.sunny{
	margin: -2px -10px 2px 10px;
    width: 55px;
}

/* Format Tablettes */
@media screen and (max-width: 1100px) {
    body {
    background-image: unset;
    background-color: #83C1CC;
    }
    .footer {
        display: flex;
        flex-direction: column;
        height: 90px;
        line-height: 85px; /* Vertically center the text there */
    }
    .footer span {
        display: none;

    }
    .logoquiz > img {
        width: 400px;
    }
    #accroche {
        font-size: 35px;
    }

}


/* Format Mobile */
@media screen and (max-width: 450px) {
	.sunny{
	    width: 40px;
	}
    .logoquiz {
        margin-top: 50px;
    }
    .mainContent{
    	margin-bottom:150px;
    }
    .footer {
        height: 60px;
        line-height: 55px; /* Vertically center the text there */
    }
    .footer img {
        width: 150px;
    }
    .logoquiz > img {
        width: 300px;
    }
    #accroche {
        font-size: 26px;
    }
    .mainText {
        font-size: 18px;
    }
    button {
        font-size: 20px;
    }

}