Template:Open Science Global/subpage-css

<style> @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); body {

 margin: 0;
 background-color: #E5E5E5;

}

html {

 scroll-behavior: smooth;

}

.container {

 height: auto;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -ms-flex-pack: distribute;
     justify-content: space-around;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 -webkit-column-gap: 18px;
         column-gap: 18px;

}

.top-banner {

 height: 220px;
 top: 16px;
 background: #FF8552;

}

.Title {

 font-family: Roboto;
 text-transform: uppercase;
 font-weight: bold;
 font-size: 2.5vw;
 -ms-flex-item-align: center;
     -ms-grid-row-align: center;
     align-self: center;
 top: 48.5%;
 left: 50%;
 position: absolute;

}

.Subtitle {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 gap: 28vw;
 height: 20vh;

}

.Subtitle .mini-subtitle {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 gap: 50px;
 margin-left: 20px;

}

.Subtitle .mini-subtitle .main-subtitle {

 font-family: Roboto;
 font-style: normal;
 font-weight: bold;
 font-size: 1.3vw;

}

.Subtitle .mini-subtitle .line {

 width: 2px;
 height: 26px;
 background: #000000;

}

.Subtitle .mini-subtitle .subtopic {

 font-family: Roboto;
 font-style: normal;
 font-weight: bold;
 font-size: 1vw;

}

.subsite-container {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 font-family: Roboto;
 font-weight: bold;
 -webkit-box-ordinal-group: 2;
     -ms-flex-order: 1;
         order: 1;
 -webkit-box-flex: 2;
     -ms-flex-positive: 2;
         flex-grow: 2;
 width: 100px;
 height: 250px;
 -ms-flex-negative: 1;
     flex-shrink: 1;
 margin-left: 7px;

}

.subsite-container .submenu-title {

 font-size: 1.3vw;
 margin-bottom: 7px;

}

.subsite-container .index-box {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 width: 100%;
 height: 100%;
 font-size: 1.1vw;
 background: #F8F8F8;
 border-radius: 15px;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -webkit-box-pack: space-evenly;
     -ms-flex-pack: space-evenly;
         justify-content: space-evenly;
 border-radius: 15px;

}

.subsite-container .index-box a {

 text-decoration: none;
 text-transform: uppercase;
 color: black;
 width: 80%;
 border-bottom: 0.5px solid #DCDCDC;
 text-align: center;

}

.nav-menu {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 font-family: Roboto;
 font-weight: bold;
 -webkit-box-ordinal-group: 4;
     -ms-flex-order: 3;
         order: 3;
 -webkit-box-flex: 2;
     -ms-flex-positive: 2;
         flex-grow: 2;
 -ms-flex-negative: 1;
     flex-shrink: 1;
 width: 100px;
 height: 250px;
 margin-right: 7px;

}

.nav-menu .submenu-title {

 font-size: 1.3vw;
 text-align: center;
 text-transform: uppercase;
 margin-bottom: 7px;

}

.nav-menu .submenu-content {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 width: 100%;
 height: 100%;
 background: #F8F8F8;
 border-radius: 15px;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -webkit-box-pack: space-evenly;
     -ms-flex-pack: space-evenly;
         justify-content: space-evenly;
 border-radius: 15px;

}

.nav-menu .submenu-content a {

 text-decoration: none;
 color: black;
 font-family: Roboto;
 font-size: 1.1vw;
 font-weight: bold;
 width: 80%;
 border-bottom: 0.5px solid #DCDCDC;
 text-align: center;
 text-transform: uppercase;

}

.text-container {

 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 width: 400px;
 height: auto;
 padding-bottom: 2%;
 padding-top: 2%;
 background: #F9F9F9;
 border-radius: 38px;
 -webkit-box-shadow: 0px 11px 15px 1px rgba(0, 0, 0, 0.65);
         box-shadow: 0px 11px 15px 1px rgba(0, 0, 0, 0.65);
 -webkit-box-align: start;
     -ms-flex-align: start;
         align-items: flex-start;
 overflow: hidden;
 -webkit-box-ordinal-group: 3;
     -ms-flex-order: 2;
         order: 2;
 -webkit-box-flex: 4;
     -ms-flex-positive: 4;
         flex-grow: 4;
 -ms-flex-negative: 0.5;
     flex-shrink: 0.5;

}

.text-container h2 {

 -ms-flex-item-align: start !important;
     align-self: flex-start !important;
 font-family: Roboto;
 font-weight: bold;
 font-size: 2.5vw;
 height: 5vw;
 width: 39vw;
 letter-spacing: 0.01em;
 text-decoration: none !important;
 color: #000000;
 margin-left: 40px;
 margin-top: 35px;
 margin-bottom: 35px;
 border-bottom: 2.5px solid #000000;

}

.text-container .text {

 font-family: Roboto;
 font-weight: normal;
 font-size: 1.3vw;
 letter-spacing: 0.01em;
 color: #000000;
 text-align: justify;
 margin-right: 40px;
 margin-left: 40px;

}

footer {

 height: 300px;
 width: 100vw;
 bottom: 0;
 background: #1E2833;
 -ms-flex-item-align: end;
     align-self: flex-end;
 -webkit-box-ordinal-group: 5;
     -ms-flex-order: 4;
         order: 4;
 padding-top: 2%;
 margin-top: 5%;

}

@media screen and (max-width: 900px) {

 .Title {
   font-size: 3vw;
 }
 .Subtitle .mini-subtitle .main-subtitle {
   font-size: 2.5vw;
 }
 .Subtitle .mini-subtitle .subtopic {
   font-size: 2vw;
 }
 .nav-menu {
   display: none;
 }
 .subsite-container {
   display: none;
 }
 .text-container {
   margin-left: 20px;
   margin-right: 20px;
 }
 .text-container .text {
   font-size: 2vw;
 }
 h2 {
   font-size: 4vw;
 }

}

@media screen and (max-width: 600px) {

 .Title {
   font-size: 4vw;
 }
 .Subtitle .mini-subtitle .main-subtitle {
   font-size: 2.5vw;
 }
 .Subtitle .mini-subtitle .subtopic {
   font-size: 2vw;
 }
 .nav-menu {
   display: none;
 }
 .subsite-container {
   display: none;
 }
 .text-container {
   margin-left: 20px;
   margin-right: 20px;
 }
 .text-container .text {
   font-size: 3vw;
 }
 h2 {
   font-size: 6vw;
 }

} </style>