@import url('start.css');

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    
    background: #e0f0f0;
    color: #000000;
    
    margin: 0;
    padding: 0;
    
    font: 1.0rem Lato, sans-serif;

}

body > div {
    max-width: 960px;
    margin: 0 auto;
}

header {
    position: relative;
}

header > h1 {
    
    display: block;
    width: fit-content;
    margin: 0 auto 4px auto;
    
    color: #b01808;
    
    text-align: center;
    
    font-family: "Bebas Neue", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 4.0rem;
    
}

main > div {
    margin: 0 auto 4px auto;
}

footer {
    margin: 0 auto 4px auto;
    text-align: center;
    font-size: 0.8rem;
}

a#back_to_top {
    display: block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 8px;
    right: 8px;
    z-index: 99;
    text-align: center;
    text-decoration: none;
    border: none;
    outline: none;
    background: #000000;
    color: #ffffff;
    cursor: pointer;
    border: 2px solid #ffffff;
    border-radius: 20px;
    
    background-color: #20A0FF;
    opacity: 0.8;    
    
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../images/icons/up.png'); 
}
a#back_to_top:hover {
    opacity: 1.0;   
}

@media only screen and (width < 960px) {
    
    header > h1 {
         font-size: 2.0rem;
    }
    
    main > div {
        overflow-x: clip;
    }

}