:root {
    --lightgrey: #ccc;
    --main-text: #868686;
    --accent-color: #33C481;
    --accent-contrast: #fff;
    --accent-fg: #21A366;
    --header-color: #10A05D;
    /*
    --grade-A: #349A47;
    --grade-B: #51B84B;
    --grade-C: #CADB2A;
    --grade-D: #F6EB15;
    --grade-E: #FECD06;
    --grade-F: #F99839;
    --grade-G: #ED2124;
    */
    --grade-A: #349A47;
    --grade-B: #80b84b;
    --grade-C: #dbcb2a;
    --grade-D: #f6bd15;
    --grade-E: #F99839;
    --grade-F: #fe8e06;
    --grade-G: #ED2124;

    --grade-A-bg: #349A4750;
    --grade-B-bg: #51B84B50;
    --grade-C-bg: #CADB2A50;
    --grade-D-bg: #F6EB1550;
    --grade-E-bg: #FECD0650;
    --grade-F-bg: #F9983950;
    --grade-G-bg: #ED212450;

    --water: #35C1F1;
    --water-bg: #35C1F130;
    --co2: #C866E9;
    --co2-bg: #C866E930;
    --tree: #33C481;
    --tree-bg: #33C48130;
    --watts: #2196F3;
    --watts-bg: #35C1F130;

    --cpu: #EB7900;
    --cpu-bg: #EB790030;
    --ram: #F55376;
    --ram-bg: #F5537630;
    --hdd: #CF852E;
    --hdd-bg: #CF852E30;
    --network: #6C19FF;
    --network-bg: #6C19FF30;
}
* { box-sizing: border-box;}
*[hidden] { display: none!important; }

img {
	max-width: 100%;
}

body {
    padding: 0;
    margin: 0;
    color: var(--main-text);
    background-color: #fff;
    display: grid;
    grid-template-areas:
        "header header"
        "menu form"
        "menu content";
    grid-auto-columns: 115px auto;
    grid-auto-rows: 65px 5em calc( 100vh - 65px - 5em);
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    max-height: 100vh;/*.danger*/
    overflow: hidden;
}
body.intro {
    background-color: #FBFBFB;
    grid-template-areas:
        "header"
        "content";
    grid-auto-columns: auto;
    grid-auto-rows: 65px calc( 100vh - 65px );

}

h1,h2,h3,h4,h5, nav {
    font-family: 'Open Sans', sans-serif;
}

a {
    color: var(--accent-fg);
    fill: var(--accent-fg);
    text-decoration: none;
    font-weight: 600;
}
svg {
vertical-align: middle;
}

.grade-A { color: var(--grade-A); }
.grade-B { color: var(--grade-B); }
.grade-C { color: var(--grade-C); }
.grade-D { color: var(--grade-D); }
.grade-E { color: var(--grade-E); }
.grade-F { color: var(--grade-F); }
.grade-G { color: var(--grade-G); }

.boxed-results {
    /*
    border: 1px solid var(--lightgrey);
    border-radius: 10px;
    */
    padding: 2em;
    margin: 1em 0;
    width: 100%;
}

header#main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2em;
    grid-area: header;
}
body:not(.intro) header#main-header {
  border-bottom: 1px solid var(--lightgrey);
}

h1 {
    margin: 0;
}
h3 {
    text-align: left;
    text-transform: uppercase;
    font-size: 1.1em;
    margin: 3em 0 2em;
}
h4 {
    text-align: left;
    font-weight: 400;
    font-size: 1.2em;
}

nav#menu a {
    color: var(--main-text);
    font-weight: 300;
    padding: 0.5em;
    border-radius: 50px;
}
nav#menu a.cta {
    color: #fff;
    background-color: var(--accent-fg);
}

nav#main-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding-top: 70px;
    grid-area: menu;
    font-size: 0.9em;
}

nav#main-menu .menu-item {
    margin: 1em 0;
    text-align: center;
    padding: 0 1em;
    color: var(--main-text);
    font-weight: 300;
}
nav#main-menu img {
    display: block;
    margin: 0.4em auto;
    height: 1.8em;
    filter: grayscale(100);
    transition: filter 0.2s ease-in-out;
}
nav#main-menu .menu-item:hover {
    color: var(--accent-color);
}
nav#main-menu .menu-item:hover img {
    filter: grayscale(0);
}

@keyframes spinner {
    0%   { transform: rotate(  0deg); }
    100% { transform: rotate(360deg); }
}

.loading-animation {
    margin: 0;
    border: 2px solid var(--lightgrey);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    width: 1em;
    height: 1em;
    animation: spinner 0.6s linear infinite;
    vertical-align: middle;
    display: inline-block;
}
.loading-animation + p {
    display: inline-block;
}
div#loading {
  text-align: center;
}


.framed-message {
    border-radius: 10px;
    background-color: #FAC64410;
    padding: 4em;
    display: flex;
    text-align: left;
    margin: 40px 0;
    width: 100%;
}
.framed-message img {
    margin-right: 4em;
}
.framed-message a.cta {
    font-weight: 700;
}

/**
 * Circular percentage gauges
 */
.hasCircle {
    position: relative;
    width: 4em;
    height: 4em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    z-index:1;
}
.hasCircle svg {
    position: absolute;
    width: 120%;
    height: 120%;
    z-index: -1;
}
/* We need to add color variations depending on grade, to come */
.hasCircle svg path {
    stroke-width: 5%;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}

@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}

#urlForm:not(.intro) { 
  max-height: 4em;
}

#ecodesign {
    text-align: center;
    width: 100%;
    overflow: auto;
    padding: 1em 4%;
    margin: 0 auto;
    border-left: 1px solid #DEE1E5;
    grid-area: content;
    background-color: #FBFBFB;
}
#ecodesign.intro {
    border-left: none;
    padding: 0;
    background: none;
}
#ecodesign.intro #presentation {
    padding: 1em 0;
    min-height: calc( 100vh - 65px );
    max-width: 960px;
    width: calc(100% - 32px);
    text-align: left;
    line-height: 2em;
    margin: 0 auto;
}
#ecodesign.intro h1,
#ecodesign.intro h2 {
  /*color: var(--header-color);*/
  font-size: 1.5rem;
  line-height: 1em;
  font-weight: 400;
}

#ecodesign > div {
    max-width: 1700px;
    width: calc(100% - 32px);
    margin: 0 auto;
}

#ecodesign.intro strong {
    color: #000;
}

#ecodesign.intro #article {
  background-color: #fff;
  padding: 53px 65px;
  text-align: left;
  align-items: stretch;
  max-width: 100vw;
  padding: max( calc(50vw - 785px), 65px);
}
#ecodesign.intro #article .column:nth-child(2n+1) {
  width: 30%;
  border-bottom: 1px solid var(--header-color);
  padding: 53px 0;
}
#ecodesign.intro #article .column:nth-child(2n) {
  width: 60%;
  padding: 53px 0;
}
#ecodesign.intro #article h2 {
  font-size: 26px;
  color: inherit;
}
#ecodesign.intro #article .column:nth-child(4n+1) h2 {
  color: var(--header-color);
}
#ecodesign.intro #article h1,
#ecodesign.intro #article h2,
#ecodesign.intro #article p {
  margin-block-start: 1rem;
}
#ecodesign.intro #article {
  line-height: 2em;
}
#ecodesign.intro #article .quote {
  background-color: #F4F4F4;
  padding: 40px 50px;
  border-radius: 8px;
  color: #5C5C5C;
}
#ecodesign.intro #article section.column {
  margin-bottom: 2em;
}

form {
    width: 100%;
    padding: 0.5em 0em 0.5em 2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    margin: 0;
    grid-area: form;
    background-color: #EFEFEF;
}
form.intro {
    margin: 5em 0 calc(5em + 28px) 0;
    padding: 0;
    justify-content: center;
    background: none;
    font-size: 1em;
}
form.intro .actual-form {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 1.2em;
}
form.intro #date-label,
form.intro #download-report {
    display: none;
    max-width: 0;
    padding: 0;
}
form.intro #url {
    border: 1px solid var(--accent-fg);
    width: 100%;
    margin-right: 10px;
}
form.intro #initButton {
    min-width: 100px;
}
form.intro #url,
form.intro #initButton{
    border-radius: 50px;
    padding: 1em;
}
form #date-label {
    font-weight: 600;
}
#url {
    width: 25em;
    padding: 0.7em;
    border: 1px solid var(--lightgrey);
    color: var(--main-text);
    border-radius: 50px;
    text-align: center;
}
button {
    cursor: pointer;
    background-color: var(--accent-color);
    color: var(--accent-contrast);
    padding: 0.7em;
    border-radius: 50px;
    border: none;
    box-shadow: none;
}
form #download-report {
    border-left: 1px solid var(--lightgrey);
    display: flex;
    padding: 0.5em 2em;
}
#presentation .column:first-child {
    width: 60%;
}
#presentation .column:last-child {
    width: 40%;
}
.columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}
.column {
    width: 50%;
}

.mainPage {}

.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#ecoIndexView {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}
#result #ecoIndexRound {
    font-size: 2em;
    padding: 1em;
    margin: 0 auto;
    width: 2em;
    height: 2em;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
}
#result {
    width: 40%;
    padding: 4rem;
}
#result + .column {
    width: 60%;
}
#page {
  max-width: 40vw;
  margin: 0 auto;
}
#page-screenshot {
  max-width: 100%;
}
#grade .grade.A { color: var(--grade-A); }
#grade .grade.B { color: var(--grade-B); }
#grade .grade.C { color: var(--grade-C); }
#grade .grade.D { color: var(--grade-D); }
#grade .grade.E { color: var(--grade-E); }
#grade .grade.F { color: var(--grade-F); }
#grade .grade.G { color: var(--grade-G); }

#ecoIndexBlock {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    margin: 2em 0;
}
#ecoIndexBlock #grade { margin-right: 2em; }
#ecoIndexBlock .rest {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#ecoIndexBlock .rest h4,
#ecoIndexBlock .rest p {
    margin: 0;
}

#ecoIndexBlock .bar {
    width: 100%;
    padding-top: 1.5em;
}
#ecoIndexBlock .letters {
    display: flex;
    list-style: none;
    width: 100%;
    justify-content: end;
    margin: 0;
    padding: 0.4em 0;
    font-weight: 700;
    font-size: 1.8em;
    /*padding-right: 5%;*/
}
ul.letters li {
    width: 15%;
    text-align: center;
}

#ecoIndexBlock .bar .bar {
    position: relative;
    height: 1em;
    background: linear-gradient(90deg, #34BC6E 0%, #F7ED00 43.23%, #F01C16 100%);
    border-radius: 50px;
}
#ecoIndexBlock .bar .bar .marker {
    position: absolute;
    top: 0.5em;
    right: var(--val);
    text-align: center;
}
#ecoIndexBlock .bar .bar .marker div {
    font-size: 3em;
    font-weight: 700;
}

#result div {
    font-size: 0.9em;
}

#domAnalysis {
  display: flex;
  flex-wrap: wrap
}
#domAnalysis h2 { width: 100%; }

#chartContainer {
  width: 50%;
  min-height: 90vh;
  padding-right: 2em;
}
#chartContainer ul {
  padding-left: 1em;
}
ul#dom-list {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0;
}
ul#dom-list #list-header {
  position: sticky;
  top: 0;
  font-weight: 600;
}
ul#dom-list #list-header label {
  align-items: stretch;
}
ul#dom-list #list-header label:before {
  visibility: hidden;
}
ul#dom-list #list-header .main-text {
  border: none;
}
ul#dom-list #list-header .size-number {
  color: inherit;
}

#dom-list ul {
  display: none;
  width: 100%;
}
#dom-list li {
  margin-top: 2px;
}
#dom-list input {
  display: none;
}
#dom-list label:before {
  display: inline-block;
  content: " ";
  height: 100%;
  padding: 0.4em 0.2em;
  margin-right: 0.2em;
  text-align: center;
  align-content: center;
  border-left: 2px solid #75acfe;
  font-weight: 600;
}
#dom-list input + label:before {
  content: "+";
}
#dom-list input:checked + label:before {
  content: "–";
}
#dom-list input:checked + label + ul {
  display: block;
  list-style: none;
}
#dom-list label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  background-color: #eeeeee;
  width: 100%;
  cursor: pointer;
}
#dom-list label span {
  padding: 0.4em 2em;
  color: #666;
  width: 15em;
  border-left: 1px solid #fff;
}
#dom-list label .main-text {
  width: 100%;
  flex: 4;
}
#dom-list li .size-number {
  padding: 0.4em 1em;
  color: #fff;
  width: 7em;
  text-align: center;
  border-left: 2px solid #fff;
}
#dom-list .size-huge   .size-number { background-color: #d6325c; }
#dom-list .size-big    .size-number { background-color: #f4ab44; }
#dom-list .size-large  .size-number { background-color: #f4d244; color: #333;}
#dom-list .size-medium .size-number { background-color: #c6f48a; color: #333}
#dom-list .size-small  .size-number { background-color: #00cc66; }
#dom-list .size-leaf   .size-number { background-color: #cccccc; color: #333;}

#iframeWrap {
    max-width: 50%;
    width: 50vw;
    height: 90vh;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--lightgrey);
    position: sticky;
    top: 0em;
}
#iframeWrap:after {
    display: block;
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#iframeId {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: 0 0;
    border: none;
}
#main-results {
    display: flex;
    justify-content: space-evenly;
}
#main-results div {
    flex: 1;
    padding: 0.5em;
    display: flex;
    flex-direction: column;
}
#main-results div.hasCircle {
   min-height: 4em;
   min-width: 4em;
   flex: 0;
}
#main-results h4 {
    text-align: center;
}
#main-results p {
    font-size: 0.8em;
    flex: 0;
}
#main-results div p:last-child {
   justify-self: flex-end;
   flex: 2;
   align-content: end;
   text-decoration: underline;
}
#main-results p.color {
    text-shadow: 0 0 0px #666;
}
#results {
    width: 100%;
    column-count: 2;
    text-align: left;
}

#view-results .form {
    font-size: 1.8em;
}
#viewsModifier {
    display: inline-flex;
    background: #fff;
    color: #333;
    border-radius: 50px;
    border: 1px solid var(--lightgrey);
}
#viewsModifier button {
    background: transparent;
    color: var(--lightgrey);
}
#viewsModifier input {
    background: transparent;
    border: none;
    color: var(--watts);
    max-width: 5em;
    text-align: center;
    font-weight: 600;
}

.gauge-list {
    display: flex;
}
.gauge-list .column {
    margin: 0 1em;
    font-size: 0.9em;
}
.gauge-list .hasCircle {
    margin-bottom: 1em;
}

.gauge-list .title {
    font-weight: 600;
    font-size: 1.5em;
}
.gauge-list .column p {
    margin: 0;
    text-align: center;
}

#waterBlock .title { color: var(--water); }
#waterRatingCircle path {
    stroke: var(--water);
    fill: var(--water-bg);
}
#co2Block .title { color: var(--co2); }
#co2RatingCircle path {
    stroke: var(--co2);
    fill: var(--co2-bg);
}
#treeBlock .title { color: var(--tree); }
#treeRatingCircle path {
    stroke: var(--tree);
    fill: var(--tree-bg);
}
#wattsBlock .title { color: var(--watts); }
#wattsRatingCircle path {
    stroke: var(--watts);
    fill: var(--watts-bg);
}

#cpuBlock .title { color: var(--cpu); }
#cpuRatingCircle path {
    stroke: var(--cpu);
    fill: var(--cpu-bg);
}
#ramBlock .title { color: var(--ram); }
#ramRatingCircle path {
    stroke: var(--ram);
    fill: var(--ram-bg);
}
#hddBlock .title { color: var(--hdd); }
#hddRatingCircle path {
    stroke: var(--hdd);
    fill: var(--hdd-bg);
}
#netBlock .title { color: var(--network); }
#netRatingCircle path {
    stroke: var(--network);
    fill: var(--network-bg);
}

#pagespeedLoading p {
    margin-left: 1em;
}
#pagespeedBlock .column {
    width: 25%;
    font-weight: bold;
    margin: 2em 0;
    padding: 0.5em;
}
#pagespeedBlock .column .hasCircle {
    margin-bottom: 1em;
}

#pagespeedBlock .column .title{
    text-shadow: 0 0 #666;
    font-weight: 600;
}
#pagespeedBlock .column .description{
    font-weight: lighter;
    font-size: 0.8em;
}

.column.hasLine {
    padding: 2em 1em;
}
.hasLine .gauge {
    margin: 0 auto;
    width: 80%;
    height: 0.5em;
    border-radius: 50px;
    background-color: var(--grade-F);
}
.hasLine .filler {
    height: 100%;
    background-color: var(--grade-A);
    border-radius: 50px;
}

#bestPracticesView {
    width: 100%;
    border: 1px solid var(--lightgrey);
    border-radius: 20px;;
}
#bestPracticesView h2 {
    margin-top: 0;
    text-align: left;
    text-transform: uppercase;
    font-size: 1.1em;
    margin: 1em 0;
}

#bestPracticesView table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1em;
    table-layout: fixed;
    text-align: start;
}

#bestPracticesTable td:first-child,
#bestPracticesTable td:last-child {
    width: 20px;
}
#bestPracticesTable td:nth-child(3) {
    width: 150px;
}

#bestPracticesTable a {
    color: inherit;
    line-height: 2em;
}
#bestPracticesTable .status-text {
    display: inline-flex;
    border-radius: 50px;
    padding: 0.5em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}
#bestPracticesTable .status-text.grade-B {
    background-color: var(--grade-F);
    color: #fff;
}
#bestPracticesTable .status-text.grade-C {
    background-color: var(--grade-G);
    color: #fff;
}
#bestPracticesTable a.detailCommentLink {
    font-size: 0px;
}
#bestPracticesTable a.detailCommentLink:not(.active)::before {
    content: ' ';
    width: 1em;
    height: 1em;
    background-image: url(../icons/deploy.svg);
    font-size: 1rem;
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
#bestPracticesTable a.detailCommentLink.active::before {
    content: ' ';
    width: 1em;
    height: 1em;
    background-image: url(../icons/collapse.svg);
    font-size: 1rem;
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
p.bestPracticeDetail,
p.bestPracticeDetailComment {
    font-size: 0.9em;
    text-align: left;
}
p.bestPracticeDetailComment {
    margin: 0.5em 0;
    border-bottom: 1px solid var(--lightgrey);
    overflow: hidden;
    text-overflow: ellipsis;
}
p.bestPracticeDetailComment .comment-title {
    font-weight: 600;
}

#effectsBlock {
    display: flex;
    position: sticky;
    top: -1em;
    background-color: #FBFBFB;
    padding: 5px 0;
}
#effectsBlock .title {
    text-align: center;
}
#effectsBlock .title .values {
    margin-left: 1em;
}
#bestPracticesList {
    text-align: left;
}
#bestPracticesList h2 .i {
  font-style: italic;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  border: 2px solid;
  border-radius: 50em;
  text-align: center;
  cursor: pointer;
  font-size: 1rem;
}
#bestPracticesList h2 .i  .sub-i {
  display: none;
  position: absolute;
  background: #FBFBFB;
  padding: 0.5em;
  border: 1px solid;
  border-radius: 0.2em;
  font-weight: 400;
  margin: 0;
}
#bestPracticesList h2 .i:hover  .sub-i {
  display: block;
}
#bestPracticesList .articles {
    list-style: none;
}
#bestPracticesList .articles input {
    width: 1.5em;
    height: 2em;
    vertical-align: middle;
}
#bestPracticesList .articles label {
    margin-right: 1em;
}

/**
 * Related to the DOM Analysis
 */
/* First: let's change how the whole head block is shown */
#ecodesign.domAnalysis {
  padding: 0;
}
#dom-overlay {
    position: absolute;
    background: #6798ff78;
    pointer-events: none;
}
#domView {
    text-align: left;
    max-height: 100%;
    overflow: auto;
}
#domView ul {
    list-style: none;
    padding: 0;
}
#domView li ul li {
    margin-left: 1em;
}
#domView a {
    cursor: pointer;
    color: inherit
}
#domView a::before {
    content: '+';
    display: inline-block;
    margin-right: 0.5em;
}
#domView a.active::before {
    content: '-';
}
#domView li ul { display: none; }
#domView li a.active + ul { display: block; }

#popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
#popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: #00000050;
}
#popup-content {
    z-index: 101;
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 20px 10px #6c6c6c;
    padding: 2em;
    border-radius: 22px;
    min-width: 50%;
}

#popup-content form {
    background: none;
    padding: 0;
}
#popup-content form input {
    padding: 0.5em;
    border-radius: 40px;
    border: 1px solid green;
    outline: none;
}
button#popup-close {
    position: absolute;
    top: -1rem;
    right: -1rem;
    height: 2rem;
    width: 2rem;
    padding: 0;
    font-size: 1.5em;
    background-color: #666;
}

/**
 * Anti CDiscount privacy popup that somehow shows up outside its iframe
 * I must found the actual reason and block it, but for now it's the only site I've found with this so this will work
 */
#tc-privacy-wrapper  { display: none; }







.dangers_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    width: auto;
}

.danger {
    background-color: #fff;
    border: 1px solid #cccccc;
    border-radius: 5px;
    display: inline-block;
    width: 170px;
    height: 150px;
    transition: all .4s ease;
    -webkit-transition: all .4s ease;
    text-align: center;
    margin: 10px 10px 10px 0;
}

.danger:hover {
    cursor: pointer;
}

.danger p {
    margin: 0;
    font-size: 1em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.danger img {
    width: 100%;
    height: 110px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    object-fit: cover;
}


@media (max-width: 768px) {
    body {
        grid-template-areas: "header"
                         "menu"
                         "form"
                         "content";
        grid-auto-rows: calc(55px + 2em) 55px 50px auto;
        grid-auto-columns: auto;
        overflow: auto;
    }
    nav#main-menu {
      flex-direction: row;
      padding: 0;
      margin-bottom: 1em;
    }
    nav#main-menu .menu-item {
      width: 20%;
    }
    .columns {
      flex-direction: column;
    }
    .column, 
    #ecodesign.intro #article .column:nth-child(2n+1),
    #ecodesign.intro #article .column:nth-child(2n) {
      width: 100%;
    }
    #date-label { display: none; }
    form .actual-form { width: 100%; }
    #url { width: 60%; }
    #initButton { width: 30%; }
    #presentation .column {
      text-align: center;
    }
    #presentation form.intro {
      align-items: center;
    }
    #result, #result + .column {
      width: 100%;
    }
    .framed-message {
      flex-direction: column;
    }
    #pagespeedBlock .columns {
      flex-direction: row;
    }
    #statsBlock {
      width: 100%;
      flex-wrap: wrap;
    }
    #pagespeedBlock .column,
    #statsBlock .column
    {
      width: 50%;
      margin: 1em 0;
    }
}