.main {
     display: flex;
     justify-content: space-between;
     align-items: center;
} 
/* Hero section */
.hero{
     font-family: 'Play', sans-serif;
     text-align: center;
     background: url('img/banner.jpg') no-repeat;
     background-size: cover;
     padding: 11vw 6vw;
     margin: 1.5vw 0.7vw 1.5vw 0.7vw;
}
.hero p{
     margin-top: -1vw;
     color: #ffffff;
     font-size: 1.2em;
}
h1{
     font-size: 2.8em;
}
/* Body */
body{
     background-color: #1F1F38;
     color: #ffffff;
     margin: 0vw;
}
img{
     max-width: 100%;
}

h2{
     font-size: 1.6em;
     font-family: 'Play', sans-serif;
}
h3{
    font-size: 1.3em; 
    font-family: 'Play', sans-serif;
    margin-bottom: -0.7vw;
}
ul{
     line-height: 1.7;
}
.text{
     font-size: 1.3em;  
     font-family: 'IBM Plex Serif', serif;
}
/* Buttons */
.backtotop{
     position:fixed;
     bottom: 2em;
     right: 2em;
     padding: 0.4em;
     border-radius: 3px;
     background-color: #00ACF1;
     color: #ffffff;
     font-family: 'Play', sans-serif;
     box-shadow: 0 5px #555;
}
html, body{
     scroll-behavior: smooth;
}
.backtotop:active,.about:active,.creator:active,.notations:active{
     box-shadow: 0 3px #777;
     transform: translateY(4px);
}
.button{
     padding: 0.8em;
     border-radius: 3px;
     background-color: #00ACF1;
     display: inline-block;
     color: #000141;
     text-decoration: none;
     font-size: 1.2em;
     margin-bottom: -30;
}
.about,.creator,.notations{
     padding: 0.6em;
     border-radius: 3px;
     background-color: #00ACF1;
     display: inline-block;
     color: #000141;
     text-decoration: none;
     font-size: 1.2em;
     font-family: 'Play', sans-serif;
     box-shadow: 0 4.5px #555;
}
.navigation{
     text-align: center;
}
.button:hover, .backtotop:hover,.about:hover,.creator:hover,.notations:hover{
     background-color:#ffffff;
     color: #000141;
}

/* Sections/rows */
.row{
     align-items: center;
     display: flex;
}

/* Section one */
 .row.one{
     padding: 3vw 8vw;
}

/* Section two */
.image.two{
     margin-right: 4vw;
     flex-basis: 55%;
}
.row.two{
     margin-bottom: 4vw;
}

/* Section three */
.row.three{
     padding-top: 0;
     margin-bottom: 4vw;
     margin-top: 4vw;
}
.image.three{
     margin-top: 2.5vw;
}
.link{
     color:#ffffff;
}

/* Media querie */
@media screen and (min-width: 768px){
     .row {
          display: flex;
          justify-content: space-between;
          max-width: 1000px;
          margin: 0 auto;
     }
     .row.one, .image {
          order: -1;
     }
     .image, .text {
     flex-basis: 46%;
}
.row.three, .row.one{
     display: flex;
     flex-direction: row-reverse;
}
.image.three, .image.one{
     flex-basis: 55%;
}
}
@media screen and (max-width: 770px){
     .row {
          display: flex;
          justify-content: space-between;
          max-width: 1000px;
          margin: 0 auto;
     }
     .row.one, .image {
          order: -1;
     }
     .image, .text {
     flex-basis: 46%;
}
.row.three, .row.one, .row.two{
     display: flex;
     flex-direction: column;
}
.row.two {
     margin-left: 3vw;
}
.image.three {
     margin: 5vw;
}
.image.three, .image.one{
     flex-basis: 55%;
}
}