/*-------------------------------------*/ /* PAGES ------------------------------*/ .set-nav { display: flex; justify-content: space-between; flex-wrap: wrap; order: 2; width: 100%; margin-left: 5%; margin-right: 5%; background-color: #00000080; padding: 1em 1em; font-size: 0.7em; box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } .set-nav ul { display: flex; align-items: stretch; justify-content: space-evenly; width: 100%; margin-left: 5%; margin-right: 5%; padding: 0; } .set-nav li { display: block; flex: 0 1 auto; list-style-type: none; } .active { color: #F6F6F6 !important; font-weight: 700; } .set-nav a { color: #91B9D0; } .set-nav a:hover { color: #F6F6F6; transition: all 0.8s ease; } /*-------------------------------------*/ /*-------------------------------------*/ .set-nav2 { display: flex; position: relative; flex-wrap: wrap; order: 2; width: 100%; margin-left: 5%; margin-right: 5%; margin-top: 1em; background-color: #00000080; border-top-left-radius: 1em; border-top-right-radius: 1em; padding: 0.8em 0.8em; font-size: 0.7em; box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } .set-nav2 ul { display: flex; align-items: stretch; justify-content: space-evenly; width: 100%; margin-left: 10%; margin-right: 10%; padding: 0; } .set-nav2 li { display: block; flex: 0 1 auto; list-style-type: none; } .set-nav2 a { color: #91B9D0; } .set-nav2 a:hover { color: #F6F6F6; transition: all 0.8s ease; } hr { position: absolute; margin-bottom: 0; bottom: 0; left: 0; width: 80%; margin-left: 10%; color: #91b9d088; } /* CONTENT ----------------------------*/ .content { display: flex; flex-wrap: wrap; order: 3; width: 100%; margin-bottom: 1em; margin-left: 5%; margin-right: 5%; background-color: rgba(0, 0, 0, 0.30); padding: 1em 1em 1em 1em; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; font-size: 0.7em; box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } /* FORMS ------------------------------*/ .label { font-family: 'Montserrat', sans-serif; font-weight: 800; } #nickname { order: 1; width: 98%; } #name { order: 2; width: 98%; margin-top: 1em; } #homepage { order: 3; width: 98%; margin-top: 1em; } #bio { order: 4; width: 98%; margin-top: 1em; } #location { order: 5; width: 98%; margin-top: 1em; } #save { order: 6; margin-top: 1em; margin-left: auto; } input[type=text] { margin-top: 0.5em; width: 100%; background-color: rgba(0, 0, 0, 0.30); border-style: none; padding: 0.5em 0.5em; color: #F6F6F6; border-radius: 0.5em; font-size: 0.9em; }