index.css

/* CSS library from GitHub */
/* link to the ropository: https://github.com/Dominik-developer/BaseFrame_CSS_library */


/* Some features have just been introduced and may not work or cause problems. Any problems or bugs should be reported as soon as possible so that they can be fixed. You can report them by opening a new issue in the library repository. Link to the ropository: https://github.com/Dominik-developer/css_library */

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100vw;
    background-color: #fff;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    text-align: left;
    letter-spacing: 0.5px;
    color: #333;
    cursor: default;
    display: block;  
    overflow-y: auto; 
    overflow-x: hidden;  
}


/* HEADER */
header {
    display: block;
    box-sizing: border-box;
    background-color: #fff;
    width: 100vw;
}
  
@media (min-width: 1201px) {
    header {
        width: 100%;
        margin: 0 auto; 
    }
}

@media (max-width: 1200px) {
    header {
        width: 100%;
        margin: 0 auto; 
    }
}
    
@media (max-width: 768px) {
    header {
        width: 100%;
        margin: 0 auto; 
    }
}
    
@media (max-width: 480px) {
    header {
        width: 100%;
        margin: 0 auto; 
    }
}


/* MAIN */
main {
    display: block;
    box-sizing: border-box;
    background-color: #fff;
    width: 100vw;
}
  
@media (min-width: 1201px) {
    main {
        width: 100%;
        margin: 0 auto; 
    }
}

@media (max-width: 1200px) {
    main {
        width: 100%;
        margin: 0 auto; 
    }
}
    
@media (max-width: 768px) {
    main {
        width: 100%;
        margin: 0 auto; 
    }
}
    
@media (max-width: 480px) {
    main {
        width: 100%;
        margin: 0 auto; 
    }
}


/* FOOTER */
footer {
    display: block;
    box-sizing: border-box;
    background-color: #fff;
    width: 100vw;
}
  
@media (min-width: 1201px) {
    footer {
      width: 100%;
        margin: 0 auto; 
    }
}

@media (max-width: 1200px) {
    footer {
        width: 100%;
        margin: 0 auto; 
    }
}

@media (max-width: 768px) {
    footer {
        width: 100%;
        margin: 0 auto; 
    }
}
  
@media (max-width: 480px) {
    footer {
        width: 100%;
        margin: 0 auto; 
    }
}

  
/* CENTERING ELEMENT CLASSES */
.centerOutside {
    display: flex; 
    justify-content: center;
    align-items: center; 
    height: 100vh; /* basics height of outer element, here height of the browser  */
}

.centerInside {
    width: 50%; /* basics width for inner element */
    height: 50%; /* basics height for inner element */
    background-color: lightblue; /* basics background color for inner element so its visible  */
}


/* This class add nice styling of margins and width to website */
body.reader {}

/* HEADER class: reader */
body.reader header {}
  
@media (min-width: 1201px) {
    body.reader header {
        width: 90vw;
        padding: 20px;
    }
}

@media (max-width: 1200px) {
    body.reader header {
        width: 90vw;
        padding: 10px;
    }
}
    
@media (max-width: 768px) {
    body.reader header {
        width: 90vw;
        padding: 10px;
    }
}
    
@media (max-width: 480px) {
    body.reader header {
        width: 90vw; 
        padding: 10px; 
    }
}


/* MAIN class: reader */
body.reader main {}
  
@media (min-width: 1201px) {
    body.reader main {
        width: 90vw;
        padding: 20px;
    }
}

@media (max-width: 1200px) {
    body.reader main {
        width: 90vw;
        padding: 10px;
    }
}
    
@media (max-width: 768px) {
    body.reader main {
      width: 90vw;
      padding: 10px;
    }
}
    
@media (max-width: 480px) {
    body.reader main {
        width: 90vw;
        padding: 10px; 
    }
}


/* FOOTER class: reader */
body.reader footer {}
  
@media (min-width: 1201px) {
    body.reader footer {
        width: 90vw; 
        padding: 20px; 
    }
}

@media (max-width: 1200px) {
    body.reader footer {
        width: 90vw;
        padding: 10px;
    }
}

@media (max-width: 768px) {
    body.reader footer {
        width: 90vw; 
        padding: 10px
    }
}
  
  @media (max-width: 480px) {
    body.reader footer {
        width: 90vw; 
        padding: 10px; 
    }
}