@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%;
}
.another-quiz {
    font-size: 30px;
}
.link {
    font-size: 25px;
}

/* 解説画面 */
.judge {
    margin: 0% 5% 0% 5%;
    text-align: center;
    font-size: 40px;
    color: red;
    height: auto;
}

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

#explanation {
    margin-top: 3%;
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    font-size: 25px;
    color: rgb(100, 100, 100);
    height: auto;
}

#btn-next {
    width: 10%;
    margin-top: 5%;
    margin-left: auto;
    text-align: center;
    font-size: 15px;
    border: none;
    outline: none;
}
#btn-next {
    box-shadow: 0 2px rgb(156, 156, 156);
    transform: translateY(-2px);
    transition: 0.175s all;
}
#btn-next:hover {
    box-shadow: 0 0.5px rgb(156, 156, 156);
    top: 0.5px;
    transform: translateY(2px);
}

/* 結果画面 */
#result {
    height: auto;
    padding-bottom: 5%;
    font-size: 30px;
}

#restart {
    width: 20%;
    height: 5%;
    outline: none;
    border: none;
    background-color:rgb(212, 212, 212);
    color: black;
}
#restart:hover {
    background-color:rgb(100, 100, 100);
    color: rgb(255, 255, 255);
}