@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
html
{
    scroll-behavior: smooth;
}
.record
{
    background: #fff;
    height: 2.5cm;
    width: 100vw;
}
.record h1
{
   text-align: center;
    font-size: 25px;
    padding: 30px;
    font-family: Californian FB Italic;
}
#edit-1
{
    color: crimson;
}
.navbar
{
    background-color: #272933;
    position: sticky!important;
    z-index: 1!important;
    top: 0%!important;    
}
li.nav-item
{
    color: #fff;
     display: flex;
    justify-items: center;
    padding: 10px;
    margin: 0 auto;
}
a.nav-link
{
    color: #B3B6B7!important;
    font-size: 25px; 
    font-family: Georgia;
}
a.navbar-brand
{
    color: crimson!important;
    font-size: 25px;
    font-weight: 600;
}
a.nav-link:hover
{
    color: crimson!important;
    transition: 0.5s;
}
.page-1
{
    background-image: url(grafix/inshot.jpg);
    height: 80vh;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.btn
{
    margin-left: 20px;
    background-image: linear-gradient(to right, #444 50%, #fff 50%);
    font-size: 30px!important;
    color: crimson!important;
    font-weight: 400!important;
}

.head1
{
    color: #fff;
    padding: 5px 10px;
    animation: head1 4s linear 1s forwards;
    position: relative;
    top: -10%;
    opacity: 0;
    font-family: Algerian;
}
@keyframes head1{
    0%{
        top: -10%;
        opacity: 0;
    }
    50%{
        top: 5%;
        opacity: 0.5;
    }
    100%{
        top: 0%;
        opacity: 1;
    }
}
.head2
{
    color: #fff;
    padding: 5px 10px;
    animation: head2 4s linear 1s forwards;
    position: relative;
    left: -10%;
    opacity: 0;
    font-family: Algerian;
}
@keyframes head2{
    0%{
        left: -10%;
        opacity: 0;
    }
    50%{
        left: 5%;
        opacity: 0.5;
    }
    100%{
        left: 0%;
        opacity: 1;
    }
}
.head3
{
    color: #fff;
    font-family: Algerian;
    padding: 5px 10px;
    animation: head3 4s linear 1s forwards;
    position: relative;
    top: -10%;
    opacity: 0;
}
@keyframes head3{
    0%{
        top: -10%;
        opacity: 0;
    }
    50%{
        top: 5%;
        opacity: 0;
    }
    100%{
        top: 0%;
        opacity: 1;
    }
}
.page-2
{
    height: auto;
    background:  #F7F9F9;
}
.page-2 h1{
    text-align: center;
    padding-top: 50px;
    font-weight: 300;
}
.page-2 p
{
    padding: 20px;
    font-size: 20px;
}
.page-3
{
    height: auto;
   
}
.page-3 h1
{
    text-align: center;
    padding: 30px;
    font-weight: 300;
}
.container
{
    display: grid;
    grid-gap: 10px;
}
.box1
{
    background-image: url(grafix/fk1.jpg);
    background-size: cover;
    background-position: center;
    
    height: 50vh;
}
.box2
{
    background-image: url(grafix/kankam.jpg);
   background-size: cover;
    background-position: center;
    height: 50vh; 
}
.box3
{
    background-image: url(grafix/IMG-20200905-WA0082.jpg);
    background-size: cover;
    background-position: center;
    height: 50vh;
}
.box4
{
    background-image: url(grafix/InShot_20200722_165421588.jpg);
    background-size: cover;
    filter: grayscale(1);
    background-position: center;
    height: 50vh;
}
.box5
{
    background-image: url(grafix/IMG-20200404-WA0021.jpg);
    background-size: cover;
    background-position: center;
    height: 50vh;
}
.box1:hover
{
    background-image: linear-gradient(rgba(0,0,250,0.5),rgba(0,0,250,0.5)),url(grafix/fk1.jpg);
}
.page-4
{
    background: yellow
}
.page-4 h1
{
    text-align: center;
    font-weight: 300;
    padding: 50px;
}
.song1
{
    display: flex;
    justify-items: center;
    margin: 0 auto;
    height: 5cm;
    background-image: url(grafix/wounds.jpg);
    background-size: cover;
    background-position: center;
}
.song2
{
    display: flex;
    justify-items: center;
    margin: 0 auto;
    height: 5cm;
    background-image: url(grafix/dw3.jpg);
    background-size: cover;
    background-position: center;
}
.song3
{
    display: flex;
    justify-items: center;
    margin: 0 auto;
    height: 5cm;
    background-image: url(grafix/dont%20be%20late.jpg);
    background-size: cover;
    background-position: center;
}
.song4
{
    display: flex;
    justify-items: center;
    margin: 0 auto;
    height: 5cm;
    background-image: url(grafix/kANKAM%20f%20wOR%20SOR%202-2.jpg);
    background-size: cover;
    background-position: center;
}
.download
{
    margin-left: 5px;
    padding: 15px;
    margin-bottom: 20px;
    margin-top: 25px;
    background: crimson;
    border: none;
    color: #fff;
    font-weight: 600;
}
.page-5
{
    background-color: #330033;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='352' height='352' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23404' stroke-width='2.7'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23505'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}
.page-5 h1
{
    text-align: center;
    font-size: 35px;
    font-weight: 400;
    padding: 30px;
    color: #fff;
    
}
.btn2
{
    display: flex;
    justify-items: center;
    margin: 0 auto;
    padding: 20px;
    background: crimson;
    color: white;
    border: none;
}
.page-5 h2
{
    color: #fff;
    padding: 20px;
    
}
.btn3
{
    background: transparent;
    border: none;
    border-bottom: 1px solid blue;
    color: white!important;
    
    
    
}
input[type="email"]
{
    padding: 15px;
    margin-left: 10px;
    border: none;
    border-bottom: 1px solid grey;
    outline: none;  
}
.btn4
{
    padding: 15px;
    margin-left: 10px;
    background: #7DCDEB;
    color: #fff;
    border: none;
    font-size: 18px;
    
}
p#small
{
    font-size: 18px;
    color: #ffffff;
    font-weight: 300;
}
.icons 
{
    text-align: center;
    color: crimson;
    font-size: 20px;
    padding: 5px;
}
.icons a i
{
    color: crimson;
}
.icons i
{
    padding: 10px;
    
}
.page-5 p
{
    padding: 20px;
    color: #fff;
    font-size: 20px;
    
}
.fa-heart
{
    color: crimson;
}
@media only screen and (min-width:990px){
    .container{
        display: grid;
        grid-template-columns: repeat(5, 1fr); 
        grid-gap: 20px;
        margin-bottom: 30px;
    }
    .page-1{
        background-position: center;
        background-size: contain;
    }
    .page-1 h1
    {
        color: black;
    }
    
}