@import url('https://fonts.google.com/specimen/Poppins');
/***************
    GENERAL
****************/


*{
    box-sizing: border-box;
}

html{
    font-size: 18px;
}

body{
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
    width: 100vw;
    margin: 0;
    padding: 0;
}

img{
    max-width: 100%;
}

button{
    padding: 0.5em;
    color: hsl(180, 85%, 92%);
    width: 10em;
    border: 5px solid hsl(176, 58%, 56%);
    border-radius: 100px;
    font-size: 1em;
    background-color:hsl(176, 58%, 56%);
    outline: none;
    cursor: pointer;
}

button:hover {
    background-color: hsl(179, 56%, 75%);
    border-color: hsl(179, 56%, 75%);
}

/***************
    HEADER
****************/

header{
    margin-left: 5%;
    margin-top: 2%;
    
}

ul{
    margin: 0;
    padding: 0;
}

nav a {
   text-decoration: none; 
   color: hsl(257, 7%, 63%);
   
}


li{
    list-style: none;
    display: inline-block;
    margin: 0.5em 0 0 2em;
}



li:nth-child(4){
    position: absolute;
    left: 70%;
    margin-right: 1em;
}


nav>ul>li>a:hover {
    color: hsl(260, 8%, 14%);
}



li:nth-child(5){
    position: absolute;
    left: 80%;
    color:#ffffff;
    background-color: hsl(176, 58%, 56%);
    border: 0px solid hsl(176, 58%, 56%);
    border-radius: 5em;
    padding:0.2em 1em;
    margin-left: 2em;
    
}

li:nth-child(5):hover{
    color:#ffffff;
}


#wrapper{
    
    background-color: #ffffff;
  
}

#header {
    display: flex;
}

p{
    color: hsl(257, 7%, 63%);
}

a.icon{
    display: none;
}


#toggle-nav{
    visibility: hidden;
    margin: 0;  
    padding: 0;
}

.hide-nav{
    display: none;
}

/***************
    Container 1
****************/
.container-1{
    display: flex;
    margin-top: 5%;
    margin-left: 5%;
    
}

.left > h1{
    font-size: 4em;
    font-weight: 700;
    color: hsl(256, 10%, 21%);
}

.left > p {
    margin-top: -2em;
    font-size: 1.3em;
    
}

/***************
    Container-2
****************/
.middle1{
    background-color:hsl(230, 25%, 95%);
    margin-top: 10%;
}

.container-2{ 
     margin: 17% 5% 0 5%;
     position: relative;
     bottom: 5em;
     width: 90%;
     border: 1px solid hsl(257, 27%, 26%);
     border-radius: 10px;
     background-color: hsl(257, 27%, 26%);
     background-image: url('../images/bg-shorten-desktop.svg');
     background-size: cover;
     background-repeat: no-repeat;
     
    }
    

#form1{
    margin:5%;
}

input{
    width: 70%;
    padding: 0.5em;
    font-size: 1em;
    border: 5px solid #ffffff;
    border-radius: 5px;
    outline: none;
}

input:focus{
    border: 5px solid hsl(257, 27%, 26%);
    box-shadow: 0 0 6px hsl(257, 27%, 26%);
}


#btn{
    width: 20%;
    border: 5px solid hsl(176, 58%, 56%);
    border-radius: 5px;
    margin-left: 1em;
}

#btn:hover{
    border-color: hsl(179, 56%, 75%);
}

small{
    display: block;
    padding-top: 0.5em;
    visibility: hidden;
}

#list-container{
   display: flex;
   flex-direction: column;
}

.links{
    visibility: hidden;
    display: grid;
    grid-template: 1fr/3fr 0.5fr 0.5fr;
    font-size: 1em;
    background-color:#ffffff;
    border: 5px solid #ffffff;
    border-radius: 5px;
    width: 90%;
    color: hsl(256, 10%, 21%);
    margin:-3em 5% 0 5%;
}

.links > div {
    padding: 0.5em;
}


.shorten-link {
    color: hsl(176, 58%, 56%);
}

.links > button {
    border: 1px solid hsl(176, 58%, 56%);
    border-radius: 5px;
    margin-left: 1em;
    width: 80%;
}


/***************
    Container-3
****************/

.middle2{
    background-color: hsl(230, 25%, 95%);
}

.container-3{
    background-color: hsl(230, 25%, 95%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
}

.about{
    margin: 12%;
    margin-top: 4em;
    text-align: center;
}

.about > h2{
    font-size: 2em;
    color: hsl(256, 10%, 21%);
}

.about>p{
    font-size: 1em;
    width: 80%;
    margin: -1em auto;
    
}

.container-4{
    margin-left: 5%;
    margin-top: 3%;
}

.card{
    display: grid;
    width: 95%;
    grid-template: 1fr/1fr 1fr 1fr;
    grid-gap: 2em;
    margin-top: -12%;
}



.card-1, .card-2, .card-3{
    border: 5px solid hsl(0, 0%, 100%);
    background-color: hsl(0, 0%, 100%);
    padding: 1em;
    padding-top: 1em;
    margin-bottom: 50%;
    box-shadow: 0 0 6px hsl(0, 0%, 100%);
}

.card-2{
    position: relative;
    top: 10%;
    
}

.card-3{
    position: relative;
    top: 20%;
    
}

.card > div > img{
    position: relative;
    bottom: 3.1em;
    padding: 1em;
    background-color: hsl(257, 27%, 26%);
    border: 1px solid hsl(257, 27%, 26%);
    border-radius: 50%;
}







/***************
    Container 5
****************/
.container-5{
    background-color:hsl(257, 27%, 26%);
    background-image: url('../images/bg-boost-desktop.svg');
    background-size: cover;
    background-repeat: no-repeat;
}

.boost{
    padding: 5%;
    text-align: center;
}

.boost > h2{
    font-size: 2em;
    color: #ffffff;
}
/***************
    Footer
****************/
footer{
    background-color: hsl(260, 8%, 14%);
}

.footer-container{
    margin-left: 5%;
    display: grid;
    grid-template: 1fr/2fr 1fr 1fr 1fr 1fr;
}

.footer-image{
    margin-top: 3em;
}

.footer-image > img {
    filter: brightness(0) invert(1);
}

.column-1, .column-2, .column-3{
    margin-top: 2em;
}

h4{
    color: #ffffff;
}


.social-icons{
    margin: 1em;
    word-spacing: 1em;
    margin-top: 3.5em;
}

.attribution { font-size: 14px; text-align: center; padding: 2em; margin-top: 2em; color: hsl(228, 45%, 44%); font-size: 1em;}
.attribution a { color: hsl(176, 58%, 56%); text-decoration: none;}

/**********************
RESPONSIVENESS
***********************/

@media only screen and (max-width: 800px){
    html{
        font-size: 16px;
    }


    .container-1 > .right {
        margin-top: 2em;
    }
}

@media only screen and (max-width: 650px){

    /*styling toggle menu*/
    nav > #myLinks {
        display: none;
      }

    a.icon {
        color: hsl(257, 7%, 63%);
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        margin: 0.7em 0.8em 0 0;
        font-size: 2em;
    
    }  

    a {
        text-decoration: none; 
        color: hsl(0, 0%, 100%);;
    }

    .logo {
        margin-top: 1.1em;
    }

    #toggle-nav {
        position: absolute;
        top: 0;
        background-color: hsl(257, 27%, 26%);
        border: 1px solid hsl(257, 27%, 26%);
        border-radius: 10px;
        width: 90%;
        padding: 1em;
        margin: 0;
        margin-right: 7%;
        margin-top: 5em;
        visibility: visible;
    }

    #toggle-nav > div {
        margin: 2em;
    }

    #toggle-nav > div:nth-child(4){
        border-bottom: 1px solid hsl(258, 16%, 31%);
    }

    #toggle-nav > div:nth-child(6){
        border: 1px solid hsl(176, 58%, 56%);
        border-radius: 20px;
        background-color: hsl(176, 58%, 56%);
        padding: 0.5em 1em;
    }

    li:nth-child(4){
        position: relative;
        right: 0;
        left: 0;
    }

    li:nth-child(5){
        position: relative;
        right: 0;
        left: 0;
        margin: 0;
    }

    .container-1 {
        margin: 0;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .container-2 {
        margin-top: 10em;
        background-image: url(../images/bg-shorten-mobile.svg);
        background-size: cover;
    }

    #form1{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    input{
        width: 100%;
        
    }

    #btn{
        margin: 1em 0;
        width: 100%;
    }

    .links{
        display: flex;
        flex-direction: column;
        width: 90%;

    }

    .links > div, .links > button{
        margin: 0 auto;
        margin-bottom: 0.5em;
        width: 90%;
    }

    .paste-link{
        border-bottom: 1px solid hsl(230, 25%, 95%);
        margin: 0;
        padding: 0;
    }

   .about{
            margin-top: 0;
        }

    .card{
        grid-template: 1fr 1fr 1fr/1fr;
        grid-gap: 1em;
        margin-top: 2%;
    }

    .card-1, .card-2, .card-3{
        position: relative;
        top: 0;
        bottom: 0;
        margin-bottom: 4em;
        text-align: center;
    }

    .container-5{
        background-image: url(../images/bg-boost-mobile.svg);
        background-size: cover;
        background-position: top;
        background-repeat: repeat-y;
        
    }

    .footer-container{
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    

}

@media only screen and (max-width: 500px){

    html{
        font-size: 14px;
    }
}

@media only screen and (max-width: 382px){
    .container-1 > .left{
        margin-top: 4em;
    }
}