@charset "UTF-8";

.content {
    display: flex;
    height: 100vh;
}

.left-content {
    order: 1;
    width: 20%;
    /* background-color: red; */
    margin: 0.5%;
    padding: 0.5%;
}

.center-content {
    order: 2;
    width: 60%;
    text-align: center;
}
.right-content {
    order: 3;
    width: 20%;
    /* background-color: red; */
    margin: 0.5%;
    padding: 0.5%;
}

/* 角を丸くするclass */
.round {
    border-radius: 10px 10px 10px 10px;
}

.top {
    height: 20%;
}

#question {
    background-color: rgb(125, 209, 248);
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    font-size: 30px;
    color: rgb(0, 110, 255);
    height: auto;
}

.answers {
    margin-top: 20px;
    text-align: center;
}
.btn {
    margin-right: 1%;
    margin-left: 1%;
    height: 100px;
    width: 20%;
    font-size: 15px;
    border: none;
    outline: none;
}
.btn {  /* ボタンを押した時に立体感を出す */
    box-shadow: 0 3px rgb(156, 156, 156);
    transform: translateY(-3px);
    transition: 0.175s all;
}
.btn:hover {
    box-shadow: 0 1px rgb(156, 156, 156);
    top: 1px;
    transform: translateY(3px);
}

.right-content {
    padding-top: 3%;
}