:root {
--wwf-grey: #e7e7e7;
--wwf-write-up-header: #107627;
--color-level0: rgb(130, 31, 130);
--color-level1: rgb(214, 14, 71);
--color-level2: rgb(239, 125, 0);
--color-level3: rgb(0, 133, 140);
--color-level4: rgb(16, 118, 39);
}
@font-face {
font-family: 'WWF';
src: url(//wwfplastictoolkit.com/wp-content/plugins/wwf-summary-generator/fonts/WWF.otf) format('opentype');
font-weight: 100;
font-size: normal;
}
.wwf-container {
width: 100%;
padding: 100px 0px 100px 0px;
}
@media (max-width: 800px) {
.wwf-container {
width: 90%;
margin-left: auto;
margin-right: auto;
}
} .score-header {
display: grid; grid-template-columns: 20% repeat(5, 1fr);
grid-gap: 10px;
padding: 20px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 800px) {
.score-header {
display: flex;
padding-top: 0;
}
}
.score-title {
font-family: 'WWF', 'Helvetica', sans-serif;
font-size: 40px;
padding: 0;
margin-top: -20px;
}
.score-header-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px 10px 0px 10px;
width: 80px;
height: 50px;
text-align: center;
}
@media screen and (max-width: 800px) {
.score-header-item {
display: none;
}
}
.score-header-item-level0 {
color: var(--color-level0);
}
.score-header-item-level1 {
color: var(--color-level1);
}
.score-header-item-level2 {
color: var(--color-level2);
}
.score-header-item-level3 {
color: var(--color-level3);
}
.score-header-item-level4 {
color: var(--color-level4);
}
.score-header-item-label {
font-family: 'WWF', 'Helvetica', sans-serif;
font-size: 20px;
padding: 0px;
margin: 0px;
}
.score-header-item-text {
font-family: 'Open Sans', 'Arial', sans-serif;
font-size: 14px;
padding: 0px;
margin: 0px;
}
.score-container {
display: grid; grid-template-columns: 20% repeat(5, 1fr);
grid-gap: 10px;
padding: 20px;
margin-top: 0px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
background-color: var(--wwf-grey);
border-radius: 50px;
align-items: center;
}
@media screen and (max-width: 800px) {
.score-container {
grid-template-columns: 60% 40%;
}
}
.score-description-container {
display: flex;
flex-direction: column;
justify-content: left;
align-items: left;
text-align: left;
padding: 10px;
font-family: 'Open Sans', 'Arial', sans-serif;
font-size: 16px;
}
.score-description-container-label {
font-family: 'WWF', 'Helvetica', sans-serif;
font-weight: 500;
font-size: 24px;
}
.score-item {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 80px;
height: 80px;
padding: 10px;
font-family: 'WWF', 'Helvetica', sans-serif;
font-weight: 600;
font-size: 38px;
text-align: center;
}
.score-item-level-null {
background-color: white;
color: white;
}
@media screen and (max-width: 800px) {
.score-item-level-null {
display: none;
}
}
.score-item-level0 {
background-color: var(--color-level0);
color: white;
}
.score-item-level1 {
background-color: var(--color-level1);
color: white;
}
.score-item-level2 {
background-color: var(--color-level2);
color: white;
}
.score-item-level3 {
background-color: var(--color-level3);
color: white;
}
.score-item-level4 {
background-color: var(--color-level4);
color: white;
} .summary {
display: flex;
justify-content: flex-end; margin-left: auto;
margin-right: auto;
padding: 0px;
}
.summary-container {
display: grid;
width:45%;
grid-template-columns: 50% 50%;
grid-template-rows: repeat(3, 100px); padding: 20px;
align-items: center;
font-family: 'WWF', 'Helvetica', sans-serif;
font-size: 36px;
background-color: var(--wwf-grey);
border-radius: 30px;
}
@media screen and (max-width: 800px) {
.summary-container {
width: 100%;
}
}
.summary-label {
display: flex;
margin-left: 20px;
text-align: left;
}
.summary-value {
display: flex;
padding: 10px 20px 10px 20px;
margin-right: 20px;
border-radius: 30px;
text-align: center;
justify-content: center;
background-color: white;
} .write-up-container {
display: flex;
flex-direction: column; margin-left: auto;
margin-right: auto;
text-align: left;
}
.write-up-rating {
margin-top: 30px;
font-family: 'WWF', 'Helvetica', sans-serif;
font-size: 38px;
font-weight: 600;
}
.write-up-heading {
margin-top: 30px;
font-family: 'WWF', 'Helvetica', sans-serif;
font-size: 28px;
font-weight: 600;
}
.write-up {
font-family: 'Open Sans', 'Arial', sans-serif;
font-size: 16px;
}