*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}


html {
    height: 100vh
}

body{
    /*background-color: rgb(240, 250, 250);*/
    /* background-image: url(Images/background-image.jpg); */
    background-image: url(Images/background-code.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    overflow: hidden;
}

header a{
    text-decoration: none;
    margin: 4vw;
    color: #f7ffb1;
    font-size: 2vw;
    font-family: 'Sono', sans-serif;
    display: flex;
}
header p {
    padding: 0;
} header p:hover {color:yellow; font-style: italic;}

#arrow_left {
    width: 2vw;
    margin-right: 10px;
    color: rgb(100, 15, 15);
} #arrow_left:hover {color:rgb(192, 42, 42)}




main{
    width: 75%;
    background-color: rgba(255, 255, 255, 0.8);
    margin: 6vw auto;
    padding: 4vw;
    border-radius: 1.5vw;
    border: solid rgb(58, 56, 56) 1.5px;
    box-shadow: #677172 0.2vw 0.2vw;
    cursor: default;
    font-family: 'Raleway', sans-serif;
}main:hover{background-color: rgba(255, 255, 255, 0.82);}

main h1{
    color: #317fe4;
    font-size: 2.7vw;
}

main p{
    padding: 2.5vw;
    font-size: 2vw;
    color: #1a73e8;
}
main a{
    text-decoration: none;
    margin: 2vw;
    color: #202130;
    font-size: 1.7vw;
} main a:hover {color: black}




/* RESPONSIVE */

@media screen and (max-width: 1024px) {
    main {padding: 8vw}
}

@media screen and (max-width: 620px) {
    /* body {background: linear-gradient(80deg, rgb(190, 204, 165), rgb(161, 234, 109), rgb(29, 146, 29))} */
    body {background-image: url(Images/background-code2.jpg);}

    main {height: 60%; padding: 6vw;}

    main p {padding: 6vw 2.5vw}

    header a {font-size: 3vw; margin: 6vw}
}

@media screen and (max-width: 500px) {
    main {padding: 20vw 5vw; height: 65%}
    main h1 {font-size: 4vw}
    main p {font-size: 3vw; padding: 10vw 0 3vw 2.5vw;}
    main a {font-size: 2.8vw;}

@media screen and (max-width: 380px) {
    main {padding: 30vw 3vw; margin: 15vw auto;}
    main h1 {font-size: 4vw}
    main p {font-size: 3vw; padding: 10vw 0 3vw 2.5vw;}
    main a {font-size: 2.8vw;}
}
/*
@media screen and (max-width: 730px) {
    main {height: 50%}

    header p {font-size : 17px}

    #arrow_left {width: 15px}

    main h1 {font-size: 25px; padding: 1rem}
    main p {font-size: 14px}
    main a {font-size: 12px}
}

@media screen and (max-width: 610px) {
    header p {font-size: 15px}

    main h1 {font-size: 20px}
    main p {font-size: 12px}
    main a {font-size : 12px}
}

@media screen and (max-width: 540px) {
    header p {font-size: 12px}

    main h1 {font-size: 18px}
}

@media screen and (max-width: 485px) {
    main h1 {font-size: 16px}
}

@media screen and (max-width: 440px) {
    main {height: 70%; padding: 0}


} */