.bio { grid-area: aside; background-color: #14213d; opacity: 90%; border-top-left-radius: 10em; border-bottom-left-radius: 10em; text-align: center; } .bio > h1 { margin: 0; } .bio > p { margin: 0; } .profileImg { content: url("../assets/images/profileImage.png"); max-height: 20em; border: solid #f29602; border-radius: 1000%; } .monikers { font-family: bio; font-size: x-large; color: #E5E5E5; } .monikers > h1 { margin-bottom: 0; } .monikers > p { margin-top: 0; } .generalInfo { text-align: left; margin-left: 6em; color: #E5E5E5; } .generalInfo > span { display: flex; align-items: center; font-size: x-large; margin-top: -2em; } .title { color: #E5E5E5; font-family: bio; font-size: xx-large; } .dropdown > span { display: flex; } .dropdown > span > a > h2 { margin-top: 0.5em; margin-left: 0.25em; } .dropdown > span > a { margin: 0; text-decoration: 0; color: #E5E5E5; } .dropdown > ul > li { margin-left: 1em; font-family: bio; list-style: none; } .generalInfo > span > p { margin-left: 0.5em; } @font-face { font-family: bio; src: url(../assets/fonts/RafflesBryantRegular.woff); } .langList { margin-top: -1em; display: none; pointer-events: none; } .close { display: none; font-family: bio; } #langDrop:target .langList { display: flex; pointer-events: all; } #langDrop:target .close { display: block; } .qualList { display: none; pointer-events: none; margin-top: -1em; } .qualList > li { font-size: larger; } #qualDrop:target .qualList { display: block; pointer-events: all; } #qualDrop:target .close { display: block; } main { color: #E5E5E5; font-size: large; background-color: rgba(0, 0, 0, 0.75); border-top-right-radius: 10em; border-bottom-right-radius: 10em; } main > h1 { max-width: 20em; }