@charset "utf-8";
/* CSS Document */

/* || VARIABLES */
:root {
    /* FONT */
    --FF:"Nunito", sans-serif;
    --FS: 1.2em;
    --FS-XL: 2em;
  
    /* COLOR */
    --BGCOLOR: #475569;
    --DARK-COLOR: black;
    --FOOTER-COLOR: grey;
    --HEADER-COLOR: rgb(145, 155, 192);
    --LIGHT-COLOR: whitesmoke;
    
    /* GENERAL */
    --MAIN-PAD: 1em;
    --BORDER-RADIUS: 1em;
    --SHADOW:0 6px 5px -5px var(--DARK-COLOR);
   }


html {
    font-family:var(--FF);
}

* {
    margin: 0;
} 

main {
    background: var(--BGCOLOR);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}


h1 {
    text-align: center;
    color: var(--DARK-COLOR);
}

h2 {
    color: var(--DARK-COLOR);
}


#note {
        width: 30%;
        height: auto;
        margin-right: 1em;
        float: left;
    }

button {
    padding: .5em 0;
    background: rgb(91, 157, 157);
    border: 1px solid black;
    border-radius: .4em;
    width: calc(100% - 2em);
    font-size: 1.2em;
    box-shadow: var(--SHADOW);
    color: var(--LIGHT-COLOR);
}

.btn :hover {
    opacity: .9;
}

.current {
    opacity: .2;
    box-shadow: 0;
}

nav {
    display: flex;
    justify-content: space-arround;
    margin: 1.3em 0;
}

header {
    display: flex;
    justify-content: space-between;
    padding: 1.4em;
    background: var(--HEADER-COLOR);
}
.title h1{
    color: var(--LIGHT-COLOR);
}


header .center {
  margin-right: 12%;
}

footer {
    display: flex;
    justify-content: space-between;
    padding: 1.4em;
    background: var(--HEADER-COLOR);
}

footer .center {
    margin-left: 10%;
  }

footer .right {
    text-align: end;
}

.btn {
    display: flex;
    justify-content: center;
    padding: 0;
    width: 100%;
}

p {
    font-size: var(--FS);
}

img {
    width: 50%;
}

#bike_race {
    width: 10%;
    height: auto;
    margin-right: 1em;
    float: left;
}

#code_img {
    width: 35%;
    height: auto;
    margin-right: 1em;
    float: right;
}

#copy {
    margin: 0;
    padding: .2em;
    background: var(--HEADER-COLOR);
    text-align: center;
    opacity: .9;
    font-size: 1em;
    color: var(--LIGHT-COLOR);
}

#index1 {
    padding: 1em;
    margin: .5em;
    background: var(--LIGHT-COLOR);
    border-radius: .1em;
    display: flow-root;
}

#index2 {
    padding: 1em;
    margin: .5em;
    background: var(--LIGHT-COLOR);
    border-radius: .1em;
    
}
#index3 {
    padding: 1em;
    margin: .5em;
    background: var(--LIGHT-COLOR);
    border-radius: .1em;
   
}

#index4 {
    padding: 1em;
    margin: .5em;
    background: var(--LIGHT-COLOR);
    border-radius: .1em;
    display: flow-root;
}

#index1 img {
    float: right;
    width: 25%;
    height: auto;
}

#index2 img {
    float: right;
    width: 25%;
    height: auto;
}

#index3 img {
    float: right;
    width: 25%;
    height: auto;
}

#index4 img {
    float: right;
    width: 25%;
    height: auto;
}

.logo {
    height: 2.2em;
    width: auto;
}

@media screen and (min-width: 35em){
    
   #flex_container {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
   }

    #index1, #index2, #index3, #index4 {
        width: calc(47.5%);
    }
   #index2, #index4 {
        margin-right: 0;
   }   
}