(Prototype team template page) |
|||
Line 796: | Line 796: | ||
<div class="clear extra_space"></div> | <div class="clear extra_space"></div> | ||
<div class="clear extra_space"></div> | <div class="clear extra_space"></div> | ||
+ | |||
+ | |||
+ | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | ||
+ | |||
+ | /* Clear the default wiki settings */ | ||
+ | |||
+ | /********************************** DEFAULT WIKI SETTINGS *********************************/ | ||
+ | |||
+ | top_menu_inside #bars_item { | ||
+ | position: absolute; | ||
+ | top: -30px !important; | ||
+ | left: -100px !important; | ||
+ | z-index: -1 !important; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | sideMenu, | ||
+ | top_title { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | content { | ||
+ | padding: 0px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | |||
+ | background-color: white; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | bodyContent h1 { | ||
+ | font-weight: 300 !important; | ||
+ | } | ||
+ | |||
+ | bodyContent h1, | ||
+ | bodyContent h2, | ||
+ | bodyContent h3, | ||
+ | bodyContent h4, | ||
+ | bodyContent h5 { | ||
+ | margin-bottom: 0px; | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | |||
+ | bodyContent { | ||
+ | padding-right: 0px; | ||
+ | } | ||
+ | |||
+ | globalWrapper { | ||
+ | font-size: 100%; | ||
+ | padding: 0px; | ||
+ | margin: -10px -20px -20px -20px; | ||
+ | } | ||
+ | |||
+ | .navbar-collapse { | ||
+ | |||
+ | padding-left: 0px; | ||
+ | } | ||
+ | |||
+ | banner { | ||
+ | margin-top: 50px; | ||
+ | } | ||
+ | |||
+ | sideMenu { | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | |||
+ | .navbar-nav .dropdown-menu, .navbar .dropdown-menu { | ||
+ | |||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | /**************************************************************** MENU ***************************************************************/ /* Wrapper for the menu */ .igem_2017_menu_wrapper { | ||
+ | |||
+ | width: 15%; | ||
+ | height: 100vh; | ||
+ | position: fixed; | ||
+ | right: 0%; | ||
+ | padding: 0px; | ||
+ | float: right; | ||
+ | border-left: 1px solid #d3d3d3; | ||
+ | background-color: #dddddd; | ||
+ | text-align: left; | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | overflow-y: auto; | ||
+ | overflow-x: hidden; | ||
+ | } | ||
+ | |||
+ | /* this hides the scrollbar to keep view consistency */ .igem_2017_menu_wrappe::-webkit-scrollbar { | ||
+ | |||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | /* styling for links in the menu, removes the line under text */ .igem_2017_menu_wrapper a { | ||
+ | |||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /* styling for the images in the menu */ .igem_2017_menu_wrapper img { | ||
+ | |||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | /* styling for the menu buttons */ .igem_2017_menu_wrapper .menu_button { | ||
+ | |||
+ | width: 100%; | ||
+ | padding: 10px 0px 10px 15px; | ||
+ | float: left; | ||
+ | border-bottom: 1px solid #d3d3d3; | ||
+ | font-size: 12px; | ||
+ | font-weight: bold; | ||
+ | color: #5e5f5f; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .igem_2017_menu_wrapper .menu_bottom_padding { | ||
+ | |||
+ | width: 100%; | ||
+ | height: 30px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .menu_button.direct_to_page { | ||
+ | |||
+ | padding-left: 36px; | ||
+ | } | ||
+ | |||
+ | .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { | ||
+ | |||
+ | width: 10%; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before { | ||
+ | |||
+ | content: "+"; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* styling for the menu buttons on hover */ .igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover, .submenu_button.current_page:hover { | ||
+ | |||
+ | background-color: #3399ff; | ||
+ | text-decoration: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | |||
+ | /* styling for the menu button when it is the current page */ .current_page { | ||
+ | |||
+ | background-color: #7fc1f7 !important; | ||
+ | color: #5e5f5f !important; | ||
+ | } | ||
+ | |||
+ | /* styling for the submenu buttons */ .igem_2017_menu_wrapper .submenu_button { | ||
+ | |||
+ | width: 100%; | ||
+ | padding: 10px 0px 10px 34px; | ||
+ | float: left; | ||
+ | background-color: #f2f2f2; | ||
+ | border-bottom: 1px solid #d3d3d3; | ||
+ | font-size: 12px; | ||
+ | color: #5e5f5f; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | /* wrapper for the submenu items, they are hidden by default*/ .igem_2017_menu_wrapper .submenu_wrapper { | ||
+ | |||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | /* when the page size is bigger than 800px, this show/hide control is hidden by default */ .igem_2017_menu_wrapper #display_menu_control { | ||
+ | |||
+ | display: none; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | /***************************************************** CONTENT OF THE PAGE ****************************************************/ | ||
+ | |||
+ | /* Wrapper for the content */ .igem_2017_content_wrapper { | ||
+ | |||
+ | width: 81%; | ||
+ | margin: 2%; | ||
+ | display: block; | ||
+ | float: left; | ||
+ | background-color: white; | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | |||
+ | /********************************* HTML STYLING *********************************/ | ||
+ | |||
+ | /* styling for the titles h1 h2 */ .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 { | ||
+ | |||
+ | padding: 5px 15px; | ||
+ | border-bottom: 0px; | ||
+ | color: #3399ff; | ||
+ | } | ||
+ | |||
+ | /* styling for the titles h3 h4 h5 h6*/ .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 { | ||
+ | |||
+ | padding: 5px 15px; | ||
+ | border-bottom: 0px; | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | /* font and text */ .igem_2017_content_wrapper p { | ||
+ | |||
+ | padding: 0px 15px; | ||
+ | font-size: 13px; | ||
+ | } | ||
+ | |||
+ | /* Links */ .igem_2017_content_wrapper a { | ||
+ | |||
+ | font-weight: bold; | ||
+ | text-decoration: underline; | ||
+ | text-decoration-color: #3399ff; | ||
+ | color: #3399ff; | ||
+ | -webkit-transition: all 0.4s ease; | ||
+ | -moz-transition: all 0.4s ease; | ||
+ | -ms-transition: all 0.4s ease; | ||
+ | -o-transition: all 0.4s ease; | ||
+ | transition: all 0.4s ease; | ||
+ | } | ||
+ | |||
+ | /* hover for the links */ .igem_2017_content_wrapper a:hover { | ||
+ | |||
+ | text-decoration: none; | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | /* non numbered lists */ .igem_2017_content_wrapper ul { | ||
+ | |||
+ | padding: 0px 20px; | ||
+ | font-size: 13px; | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | |||
+ | /* numbered lists */ .igem_2017_content_wrapper ol { | ||
+ | |||
+ | padding: 0px; | ||
+ | font-size: 13px; | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | |||
+ | /* Table */ .igem_2017_content_wrapper table { | ||
+ | |||
+ | width: 97%; | ||
+ | margin: 15px 10px; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | |||
+ | /* table cells */ .igem_2017_content_wrapper td { | ||
+ | |||
+ | padding: 10px; | ||
+ | vertical-align: text-top; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | |||
+ | /* table headers */ .igem_2017_content_wrapper th { | ||
+ | |||
+ | padding: 10px; | ||
+ | vertical-align: text-top; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | background-color: #f2f2f2; | ||
+ | } | ||
+ | |||
+ | /**********************************LAYOUT CLASSES **********************************/ | ||
+ | |||
+ | /* general class for column divs */ .igem_2017_content_wrapper .column { | ||
+ | |||
+ | padding: 10px 0px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | /* class for a full width column */ .column .full_size { | ||
+ | |||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | /* styling for images in a full width column*/ .column.full_size img { | ||
+ | |||
+ | width: 97%; | ||
+ | padding: 10px 15px; | ||
+ | } | ||
+ | |||
+ | /* class for a half width column */ .column.half_size { | ||
+ | |||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | /* styling for images in a half width column*/ .column.half_size img { | ||
+ | |||
+ | width: 94.5%; | ||
+ | padding: 10px 15px; | ||
+ | } | ||
+ | |||
+ | /********************************* SUPPORT CLASSES ********************************/ | ||
+ | |||
+ | /* class that clears content below*/ .igem_2017_content_wrapper .clear { | ||
+ | |||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | /* adds extra spacing when clearing content */ .igem_2017_content_wrapper .clear.extra_space { | ||
+ | |||
+ | height: 30px; | ||
+ | } | ||
+ | |||
+ | /* highlight class, makes content slightly smaller */ .igem_2017_content_wrapper .highlight { | ||
+ | |||
+ | margin: 0px 15px; | ||
+ | padding: 15px 0px; | ||
+ | } | ||
+ | |||
+ | /* highlight class, adds a gray background */ .igem_2017_content_wrapper .highlight.gray { | ||
+ | |||
+ | background-color: #f2f2f2; | ||
+ | } | ||
+ | |||
+ | /* highlight with decoration blue line on top */ .igem_2017_content_wrapper .highlight.blue_top { | ||
+ | |||
+ | border-top: 4px solid #3399ff; | ||
+ | } | ||
+ | |||
+ | /* highlight with a full blue border decoration */ .igem_2017_content_wrapper .highlight.blue_border { | ||
+ | |||
+ | border: 4px solid #3399ff; | ||
+ | } | ||
+ | |||
+ | /* button class */ .igem_2017_content_wrapper .button { | ||
+ | |||
+ | max-width: 35%; | ||
+ | margin: 30px auto; | ||
+ | padding: 12px 10px; | ||
+ | background-color: #3399ff; | ||
+ | text-align: center; | ||
+ | color: #ffffff; | ||
+ | -webkit-transition: all 0.4s ease; | ||
+ | -moz-transition: all 0.4s ease; | ||
+ | -ms-transition: all 0.4s ease; | ||
+ | -o-transition: all 0.4s ease; | ||
+ | transition: all 0.4s ease; | ||
+ | } | ||
+ | |||
+ | /* styling for button on hover */ .igem_2017_content_wrapper .button:hover { | ||
+ | |||
+ | background-color: #3399ff; | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | /***************************************************** RESPONSIVE STYLING ****************************************************/ | ||
+ | |||
+ | /* IF THE SCREEN IS LESS THAN 1200PX */ @media only screen and (max-width: 1200px) { | ||
+ | |||
+ | #content { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .igem_2017_menu_wrapper { | ||
+ | width: 15%; | ||
+ | right: 0; | ||
+ | } | ||
+ | .highlight { | ||
+ | padding: 10px 0px; | ||
+ | } | ||
+ | .igem_2017_menu_wrapper #display_menu_control { | ||
+ | display: none; | ||
+ | } | ||
+ | #menu_content { | ||
+ | display: block; | ||
+ | } | ||
+ | .menu_button.direct_to_page { | ||
+ | padding-left: 17px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* IF THE SCREEN IS LESS THAN 800PX */ @media only screen and (max-width: 800px) { | ||
+ | |||
+ | .igem_2017_menu_wrapper { | ||
+ | width: 100%; | ||
+ | height: 15%; | ||
+ | position: relative; | ||
+ | left: 0%; | ||
+ | } | ||
+ | .igem_2017_content_wrapper { | ||
+ | width: 100%; | ||
+ | margin-left: 0px; | ||
+ | } | ||
+ | .column.half_size { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .column.full_size img, .column.half_size img { | ||
+ | width: 100%; | ||
+ | padding: 10px 0px; | ||
+ | } | ||
+ | .highlight { | ||
+ | padding: 15px 5px; | ||
+ | } | ||
+ | .igem_2017_menu_wrapper #display_menu_control { | ||
+ | display: block; | ||
+ | } | ||
+ | #menu_content { | ||
+ | display: none; | ||
+ | } | ||
+ | .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { | ||
+ | width: 5%; | ||
+ | } | ||
+ | .menu_bottom_padding { | ||
+ | display: none; | ||
+ | } | ||
+ | .menu_button.direct_to_page { | ||
+ | padding-left: 36px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* special class that the system uses to make sure the team wants a page to be evaluated */ .judges-will-not-evaluate { | ||
+ | |||
+ | width: 96.6%; | ||
+ | margin: 5px 15px; | ||
+ | display: block; | ||
+ | border: 4px solid #3399ff; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .content_wrapper { | ||
+ | |||
+ | width: 100%; | ||
+ | height: 100vh; | ||
+ | } |
Revision as of 12:24, 25 September 2018
/***************************************************** DEFAULT WIKI SETTINGS ****************************************************/
/* Clear the default wiki settings */
/********************************** DEFAULT WIKI SETTINGS *********************************/
top_menu_inside #bars_item {
position: absolute;
top: -30px !important;
left: -100px !important;
z-index: -1 !important;
cursor: pointer;
}
sideMenu,
top_title {
display: none;
}
content {
padding: 0px;
width: 100%;
}
body {
background-color: white;
margin: 0px;
}
bodyContent h1 {
font-weight: 300 !important;
}
bodyContent h1,
bodyContent h2,
bodyContent h3,
bodyContent h4,
bodyContent h5 {
margin-bottom: 0px;
border-bottom: none;
}
bodyContent {
padding-right: 0px;
}
globalWrapper {
font-size: 100%;
padding: 0px;
margin: -10px -20px -20px -20px;
}
.navbar-collapse {
padding-left: 0px;
}
banner {
margin-top: 50px;
}
sideMenu {
margin-top: 10px;
}
.navbar-nav .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
/**************************************************************** MENU ***************************************************************/ /* Wrapper for the menu */ .igem_2017_menu_wrapper {
width: 15%;
height: 100vh;
position: fixed;
right: 0%;
padding: 0px;
float: right;
border-left: 1px solid #d3d3d3;
background-color: #dddddd;
text-align: left;
font-family: Tahoma, Geneva, sans-serif;
overflow-y: auto;
overflow-x: hidden;
}
/* this hides the scrollbar to keep view consistency */ .igem_2017_menu_wrappe::-webkit-scrollbar {
display: none;
}
/* styling for links in the menu, removes the line under text */ .igem_2017_menu_wrapper a {
text-decoration: none;
}
/* styling for the images in the menu */ .igem_2017_menu_wrapper img {
width: 100%;
}
/* styling for the menu buttons */ .igem_2017_menu_wrapper .menu_button {
width: 100%;
padding: 10px 0px 10px 15px;
float: left;
border-bottom: 1px solid #d3d3d3;
font-size: 12px;
font-weight: bold;
color: #5e5f5f;
cursor: pointer;
}
.igem_2017_menu_wrapper .menu_bottom_padding {
width: 100%;
height: 30px;
float: left;
}
.menu_button.direct_to_page {
padding-left: 36px;
}
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
width: 10%;
float: left;
}
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
content: "+";
}
/* styling for the menu buttons on hover */ .igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover, .submenu_button.current_page:hover {
background-color: #3399ff;
text-decoration: none;
color: #ffffff;
}
/* styling for the menu button when it is the current page */ .current_page {
background-color: #7fc1f7 !important;
color: #5e5f5f !important;
}
/* styling for the submenu buttons */ .igem_2017_menu_wrapper .submenu_button {
width: 100%;
padding: 10px 0px 10px 34px;
float: left;
background-color: #f2f2f2;
border-bottom: 1px solid #d3d3d3;
font-size: 12px;
color: #5e5f5f;
cursor: pointer;
}
/* wrapper for the submenu items, they are hidden by default*/ .igem_2017_menu_wrapper .submenu_wrapper {
display: none;
}
/* when the page size is bigger than 800px, this show/hide control is hidden by default */ .igem_2017_menu_wrapper #display_menu_control {
display: none;
text-align: center;
}
/***************************************************** CONTENT OF THE PAGE ****************************************************/
/* Wrapper for the content */ .igem_2017_content_wrapper {
width: 81%;
margin: 2%;
display: block;
float: left;
background-color: white;
font-family: Tahoma, Geneva, sans-serif;
}
/********************************* HTML STYLING *********************************/
/* styling for the titles h1 h2 */ .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
padding: 5px 15px;
border-bottom: 0px;
color: #3399ff;
}
/* styling for the titles h3 h4 h5 h6*/ .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
padding: 5px 15px;
border-bottom: 0px;
color: #000000;
}
/* font and text */ .igem_2017_content_wrapper p {
padding: 0px 15px;
font-size: 13px;
}
/* Links */ .igem_2017_content_wrapper a {
font-weight: bold;
text-decoration: underline;
text-decoration-color: #3399ff;
color: #3399ff;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/* hover for the links */ .igem_2017_content_wrapper a:hover {
text-decoration: none;
color: #000000;
}
/* non numbered lists */ .igem_2017_content_wrapper ul {
padding: 0px 20px;
font-size: 13px;
font-family: Tahoma, Geneva, sans-serif;
}
/* numbered lists */ .igem_2017_content_wrapper ol {
padding: 0px;
font-size: 13px;
font-family: Tahoma, Geneva, sans-serif;
}
/* Table */ .igem_2017_content_wrapper table {
width: 97%;
margin: 15px 10px;
border: 1px solid #d3d3d3;
border-collapse: collapse;
}
/* table cells */ .igem_2017_content_wrapper td {
padding: 10px;
vertical-align: text-top;
border: 1px solid #d3d3d3;
border-collapse: collapse;
}
/* table headers */ .igem_2017_content_wrapper th {
padding: 10px;
vertical-align: text-top;
border: 1px solid #d3d3d3;
border-collapse: collapse;
background-color: #f2f2f2;
}
/**********************************LAYOUT CLASSES **********************************/
/* general class for column divs */ .igem_2017_content_wrapper .column {
padding: 10px 0px;
float: left;
}
/* class for a full width column */ .column .full_size {
width: 100%;
}
/* styling for images in a full width column*/ .column.full_size img {
width: 97%;
padding: 10px 15px;
}
/* class for a half width column */ .column.half_size {
width: 50%;
}
/* styling for images in a half width column*/ .column.half_size img {
width: 94.5%;
padding: 10px 15px;
}
/********************************* SUPPORT CLASSES ********************************/
/* class that clears content below*/ .igem_2017_content_wrapper .clear {
clear: both;
}
/* adds extra spacing when clearing content */ .igem_2017_content_wrapper .clear.extra_space {
height: 30px;
}
/* highlight class, makes content slightly smaller */ .igem_2017_content_wrapper .highlight {
margin: 0px 15px;
padding: 15px 0px;
}
/* highlight class, adds a gray background */ .igem_2017_content_wrapper .highlight.gray {
background-color: #f2f2f2;
}
/* highlight with decoration blue line on top */ .igem_2017_content_wrapper .highlight.blue_top {
border-top: 4px solid #3399ff;
}
/* highlight with a full blue border decoration */ .igem_2017_content_wrapper .highlight.blue_border {
border: 4px solid #3399ff;
}
/* button class */ .igem_2017_content_wrapper .button {
max-width: 35%;
margin: 30px auto;
padding: 12px 10px;
background-color: #3399ff;
text-align: center;
color: #ffffff;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/* styling for button on hover */ .igem_2017_content_wrapper .button:hover {
background-color: #3399ff;
color: #000000;
}
/***************************************************** RESPONSIVE STYLING ****************************************************/
/* IF THE SCREEN IS LESS THAN 1200PX */ @media only screen and (max-width: 1200px) {
#content {
width: 100%;
}
.igem_2017_menu_wrapper {
width: 15%;
right: 0;
}
.highlight {
padding: 10px 0px;
}
.igem_2017_menu_wrapper #display_menu_control {
display: none;
}
#menu_content {
display: block;
}
.menu_button.direct_to_page {
padding-left: 17px;
}
}
/* IF THE SCREEN IS LESS THAN 800PX */ @media only screen and (max-width: 800px) {
.igem_2017_menu_wrapper {
width: 100%;
height: 15%;
position: relative;
left: 0%;
}
.igem_2017_content_wrapper {
width: 100%;
margin-left: 0px;
}
.column.half_size {
width: 100%;
}
.column.full_size img, .column.half_size img {
width: 100%;
padding: 10px 0px;
}
.highlight {
padding: 15px 5px;
}
.igem_2017_menu_wrapper #display_menu_control {
display: block;
}
#menu_content {
display: none;
}
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
width: 5%;
}
.menu_bottom_padding {
display: none;
}
.menu_button.direct_to_page {
padding-left: 36px;
}
}
/* special class that the system uses to make sure the team wants a page to be evaluated */ .judges-will-not-evaluate {
width: 96.6%;
margin: 5px 15px;
display: block;
border: 4px solid #3399ff;
font-weight: bold;
}
.content_wrapper {
width: 100%;
height: 100vh;
}