@import url('./theme/dark.css');

body{
    padding: 0;
    margin: 0;
    height: 100%;
    size: 0px;
}
.homeHeader a {
    text-decoration: none;    
    color: var(--md-sys-color-on-primary);
}
.pageBanner a{
    color: var(--md-sys-color-on-secondary);
}
a{
    color: var(--md-sys-color-primary-fixed-dim);
}
input[type="radio"] {
    transform: scale(2);
    accent-color: var(--md-sys-color-surface-variant);
    margin-right: 10px;
    margin-top: 15px;
}
label {
    display:flex;
    align-items: flex-start;
    padding-bottom: 15px;
}

.homeHeader{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--md-sys-color-primary);
    width: 100%;
    height: 150px;
}
.homeFooter{
    flex: 1;
    align-items: center;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    height: 150px;
    font-size: 32px;
    text-align: center;
    place-items: center;
    padding-left: 10%;
    padding-right: 10%;
    
    text-align: justify;
    position: relative;
    bottom: 0;
    border-top-color: var(--md-sys-color-outline);
    border-top-width: 5px;
    border-top-style:solid;
}
.homeHeaderLogo{
    flex: 1;
    width: 20%;
}
.homeHeaderDiv{
    flex: 7;
    text-align: center;
    place-items: center;
    font-size: 38px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    
    color: var(--md-sys-color-on-primary);
    font-style: bold;
}
.pageTitle{
    flex: 1;
    text-align: center;
    place-items: center;
    font-size: 108px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    color: var(--md-sys-color-on-primary-container);
}
.pageSubTitle{
    flex: 1;
    text-align: center;
    place-items: center;
    font-size: 42px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
}
.pageTextHeader{
    flex: 1;
    
    text-align: center;
    place-items: center;
    font-size: 32px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    color: var(--md-sys-color-on-primary-container);
    
}
.pageTextBlock{
    flex: 1;
    padding-left: 10%;
    padding-right: 10%;
    text-align: left;
    place-items: center;
    text-align: justify;
    font-size: 26px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
}
.resultFamilyBox{
    flex: 1;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 20px;
    padding-bottom: 20px;
    width: 50%;
    
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-outline);
    border-width: 3px;
    border-style:solid;
    box-shadow: var(--md-sys-color-shadow) 0px 1px 5px;
}
.resultFamilyName{
    flex: 1;
    padding: 20px;
    text-align: center;
    font-size: 32px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
    border-bottom-color: var(--md-sys-color-outline);
    border-bottom-width: 5px;
    border-bottom-style:solid;
}
.resultControlName{
    flex: 1;
    justify-self: start;
    margin-left: 5%;
    padding-top: 50px;
    margin-bottom: 10px;
    text-align: center;
    place-items: left;
    text-align: justify;
    font-size: 22px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
    border-bottom-color: var(--md-sys-color-outline);
    border-bottom-width: 2px;
    border-bottom-style:solid;
}
.resultFamilyNameL2{
    flex: 1;
    padding: 20px;
    text-align: center;
    font-size: 32px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
    border-bottom-color: var(--md-sys-color-outline);
    border-bottom-width: 5px;
    border-bottom-style:solid;
}
.resultControlNameL2{
    flex: 1;
    justify-self: start;
    margin-left: 5%;
    padding-top: 50px;
    margin-bottom: 10px;
    text-align: center;
    place-items: left;
    text-align: justify;
    font-size: 22px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
    border-bottom-color: var(--md-sys-color-outline);
    border-bottom-width: 2px;
    border-bottom-style:solid;
}
.assessmentResultTextBlockL2{
    flex: 1;
    justify-self: start;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 3px;
    padding-top: 3px;
    text-align: left;
    place-items: left;
    text-align: justify;
    font-size: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
    
}
.controlAssessmentTextBlockL2{
    flex: 1;
    justify-self: start;
    padding-left: 15%;
    padding-right: 15%;
    padding-bottom: 3px;
    padding-top: 3px;
    text-align: left;
    place-items: left;
    text-align: justify;
    font-size: 16px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
    
}
.assessmentResultTextBlock{
    flex: 1;
    justify-self: start;
    padding-left: 5%;
    padding-right: 10%;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: left;
    place-items: left;
    text-align: justify;
    font-size: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
    
    
}
.controlAssessmentTextBlock{
    flex: 1;
    justify-self: start;
    padding-left: 10%;
    padding-right: 15%;
    padding-bottom: 3px;
    padding-top: 3px;
    text-align: left;
    place-items: left;
    text-align: justify;
    font-size: 16px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
    
}
.pageBanner{
    flex: 1;
    width: 100%;
    text-align: center;
    place-items: center;
    background: var(--md-sys-color-secondary);
    height: 100px;
    font-size: 42px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-secondary);
    box-shadow: var(--md-sys-color-shadow) 0px 5px 10px;
    border-top-color: var(--md-sys-color-outline);
    border-top-width: 5px;
    border-top-style:solid;
    border-bottom-color: var(--md-sys-color-outline);
    border-bottom-width: 5px;
    border-bottom-style:solid;
}

.bodyColumnContainer{
    flex:1 ; 
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
.bodyColumnWide{
    flex: 9;
    text-align: center;
    place-items: center;
    font-size: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: bold;
    min-height: 72vh;
    border-top-color: var(--md-sys-color-outline);
    border-top-width: 5px;
    border-top-style:solid;
}
.assessmentTitle{
    flex: 1;
    text-align: center;
    place-items: center;
    font-size: 48px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    color: var(--md-sys-color-on-primary-container);
}
.assessmentSubTitle{
    flex: 1;
    text-align: center;
    place-items: center;
    font-size: 42px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
}
.questionRadioContainer{
    flex: 1;
    padding-left: 20%;
    padding-right: 20%;
    text-align: justify;
    place-items: left;
    font-size: 38px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
}
.questionInstruction{
    flex: 1;
    text-align: center;
    align-items: center;
    font-size: 42px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    color: var(--md-sys-color-on-primary-container);
    padding-bottom: 30px;
}
.singleSubmit{
    flex: 1;
    text-align: center;
    place-items: center;
    font-size: 42px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
    padding-bottom: 10px;
}
.singleSubmit button{
    
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border: none;
    padding: 10px;
    font-size: 24px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--md-sys-color-shadow) 0px 7.5px 15px;
}
/* .search{
    display: inline-block;
}
.searchSubmit{
    display: inline-block;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
} */
/* .searchSubmit button{
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border: none;
    padding: 10px;
    font-size: 12px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--md-sys-color-shadow) 0px 7.5px 15px;
} */
.dictEntry{
    flex: 1;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 20px;
    padding:10px;
    width: 50%;
    
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-outline);
    border-width: 3px;
    border-style:solid;
    box-shadow: var(--md-sys-color-shadow) 0px 1px 5px;
}
.dictWord{
    text-align: left;
    font-size: 32px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.dictDef{
    color: var(--md-sys-color-primary-fixed-dim);
    text-align: left;
    padding-top: 15px;
}
.about{
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 20px;
    font-size: 26px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
}
.about img{
    width: 145px;
    height:262px;
    float: left;
    margin-right: 50px;
    border-radius: 20%;
    
}
.aboutText{
    text-align: justify;
    place-items: center;
    font-size: 26px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
}
.aboutTextSign{
    text-align: right;
    font-size: 26px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
    padding-bottom: 20px;
}
.assessmentStartText{
    flex: 1;
    text-align: center;
    place-items: center;
    font-size: 36px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--md-sys-color-on-primary-container);
}



details > summary {
  list-style: none;
  cursor: pointer;
}


progress {
  border-radius: 7px; 
  height: 12px;
  box-shadow: var(--md-sys-color-shadow) 0px 2px 3px;
}
progress::-webkit-progress-bar {
  background-color: var(--md-sys-color-on-primary-container);
  border-radius: 7px;
}
progress::-webkit-progress-value {
  background-color: var(--md-sys-color-on-primary);
  border-radius: 3px;
}