@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');

body {
    background-color: #111827;
}

.navigation {
    background-color: #9D174D;
    border-radius: 2rem 4rem 2rem 4rem;
    margin-top: -1.5rem;
}

.nav-head {
    padding: 1.2rem;
    font-size: 2.5rem;
    color: #111827;
    font-family: 'ZCOOL KuaiLe', cursive;
}

.navigation ul {
    text-align: right;
    padding: 1rem;
    margin-top: -4rem;
}

.nav-list {
    display: inline;
    padding: 0.5rem;  
}

.link:hover {
    color : #EC4899;
}

.link {
    text-decoration: none;
    padding: 0.5rem 0.3rem;
    color : #111827;
}

.active-link {
    font-weight: bold;
}

.quiz-main, .isTriangle-main, .hypotenuse-main, .area-main {
    text-align: center;
    color: #9CA3AF;
}

.radio-link:hover {
    color: #EC4899;
}

.isTriangle-label, .hypotenuse-label, .area-label, .sides, .angles-input, 
.btn-isTriangle, .btn-quiz, .btn-hypotenuse, .btn-area {
    display: block;
    margin: 1rem auto;
    font-size: 1.5rem;
}    

.angles-input, .sides {
    border-radius: 2rem;
    padding: 0.5rem;
    text-align: center;
}

.btn-quiz, .btn-isTriangle, .btn-hypotenuse, .btn-area {
    padding: 0.7rem;
    background-color: #BE185D;
    cursor: pointer;
}
.quiz-table {
    margin-left: auto;
    margin-right: auto;
    width: 80%; 
    text-align: left;
}

td {
    padding: 0 20px;
}

.quiz-options {
    text-align: left;
    display: block;
}

input[type=radio] {
    width: 5%;
}

.outputQuiz, .outputIsTriangle, .outputHypotenuse, .outputArea {
    font-size: 2rem;
}

.footer {
    background-color: #9D174D;
    border-radius: 2rem 4rem 2rem 4rem;
    text-align: center;
    margin-bottom: -1rem;
}

.footer ul {
    padding-inline-start: 0rem;
}

.footer-head {
    font-size: 1.5rem;
    padding: 0.5rem
}

.social-links {
    display: inline;
    padding: 0.5rem;
}