@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Code+Latin&family=Manrope&display=swap');

*{
    margin: 0;
}

body{
    background-color: rgb(211, 228, 248);
    padding: 0;
    margin: 0;
    font-family:'Manrope', sans-serif;;
}
.main-container{
    background-color: white;
    display:flex;
    flex-direction: column;
    margin-left: 10%;
    margin-top: 5ch;
    width: 80%;
    padding: 10 ch;   
    border: 3px solid grey;
    border-radius: 3ch;
    box-shadow: 10px 10px 10px gray;
}

header{
    background-color: white;
    margin: 0;
    padding: 5ch;
    border-bottom: .5ch ridge grey;
    text-align: center;
}
img{
    max-height: 40%;
    max-width: 50%;
    margin: auto;
    border: .5ch inset lightgray;
    border-radius: 3ch;
    padding:0;
    margin-bottom: 10ch;
}
h2, p{
    margin: 5ch;
    text-align: center;
}
button{
    font-size: 1.5rem;
    background: none;
    margin: auto;
    margin-bottom: 2ch;
    padding: 1ch;
    border-radius: 2ch;
    border: 2px solid black;
    transition:ease-in-out, .25s;
}
button:hover{
    cursor: pointer;
    background-color: rgb(110, 110, 110);
    border-style:outset;
    color:white;
}
.selected{
    background-color: rgb(110, 110, 110);
    border-style:outset;
    color:white;
}

.answer{
    margin-left: 10%;
    margin-bottom: 1ch;
    align-self: center;
    width: 80%;
}

.question{
    display: flex;
    flex-direction: column;
}
.answers{
    display: flex;
    flex-direction: column;
}
progress{
    margin:auto;
    width: 100%;
    height: 5ch;
    margin-top: 0;
}
.question-header{
    margin:auto;
}
.question-header h2{
    margin-bottom: 0;
}
.question h2{
    margin-bottom: 3ch;
}

.button-holder{
    margin-top: 5ch;
    display: flex;
    flex-direction: row;
}