/*indexpage*/
body{
    background: linear-gradient(#FBEEC1,#DAAD86) fixed;
}
.indFrame{


}

#bitcoin_ttl{
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    font-size: 100px;
    position:relative;
    top:70px;
    background-color:#F1d5bc;
    width:700px;
    animation-name:slide-in-left;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 900ms;
}
@keyframes slide-in-left {
    from{
        right:600px;
    }
    to{
        right:0px;
    }
}



#intro{
    text-align: center;
    font-family: 'Source Code Pro', monospace;
    font-size: 18px;
    width:1000px;
    margin:auto;
    position:relative;
    top:350px;
    padding:20px;
    border-style: double;
    border-width:15px;
    border-color:rgba(255,255,255, 0.5);
    border-radius:10px;
}

#trading{
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    font-size: 30px;
    position:relative;
    top:400px;
}

.sites{
    top:400px;
    display:grid;
    grid-template-columns: 400px 400px 400px;
    grid-gap:20px;
    left:250px;
    position:relative;
    text-align:center;
}
#block1,#block2,#block3{
    background-color:#F7E7CE;
    height:40px;
    font-family: 'Libre Baskerville', serif;
    padding: 10px;
    border: solid;
    opacity:0.7;
}
#block1:hover,#block2:hover,#block3:hover{
    opacity:1;
}

#learn{
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    font-size: 50px;
    right:200px;
    position:relative;
    top:450px;
}

#bitcoin-graph{
    position:absolute;
    left:740px;
    top:30px;
    width:500px;
    transition: transform .8s;
    animation-name:fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 1500ms;
}
#bitcoin-graph2{
    position:absolute;
    left:1010px;
    top:30px;
    width:520px;
    transition: transform .8s;
    animation-name:fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 1500ms;
}
#bitcoin-graph3{
    position:absolute;
    left:1210px;
    top:30px;
    width:500px;
    transition: transform .8s;
    animation-name:fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 1500ms;
}
#bitcoin-graph:hover,#bitcoin-graph2:hover,#bitcoin-graph3:hover{
    transform:scale(1.2);
    transition: transform 0.3s;
}

.grid_map{
    top:550px;
    display:grid;
    grid-template-columns: 400px 450px;
    grid-auto-rows: minmax(150px,auto);
    grid-gap:30px;
    margin:auto;
    text-align:center;
    position:relative;
    left:500px;
    font-family:'Bebas Neue', cursive;
}

#bkcimg{
    width:350px;
    position:relative;
    top:60px;
}

.block_chain{
    font-size:40px;
    padding-top:30px;
    padding-left:20px;
    padding-right:20px;
    background-color:#e4effd;
    grid-row: span 3;
}
#new{
    width:350px;
    top:10px;
    position:relative;
}
#algoimg{
    width:250px;
    top:10px;
    position:relative;
}
.algorithm{
    padding-top:30px;
    background-color:#afcffa;
    grid-row: span 2;
    font-size:40px;
}
.algorithm:hover, .mining_fork:hover, .block_chain:hover, .history:hover{
    animation-name:imgShake;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 500ms;
}

/*@keyframes spin {*/
/*    from {*/
/*        transform:rotate(0deg);*/
/*    }*/
/*    to {*/
/*        transform:rotate(360deg);*/
/*    }*/
/*}*/
@keyframes imgShake{
    0% { transform: translate(1px, 1px) rotate(0deg);}
    10% { transform: translate(-1px, -2px) rotate(-2deg);}
    30% { transform: translate(3px, 2px) rotate(0deg); }
    50% { transform: translate(-1px, 2px) rotate(2deg);}
    70% { transform: translate(3px, 1px) rotate(-2deg);}
    90% { transform: translate(1px, 2px) rotate(0deg);}
}

.mining_fork{
    background-color:#7aaff7;
    grid-row: span 3;
    font-size:40px;
    padding-top:40px;
    padding-left:30px;
    padding-right:30px;
}
.history{
    background-color:#6e9ede;
    grid-row: span 2;
    font-size:40px;
    padding-top:30px;
    padding-left:30px;
    padding-right:30px;
}

#box{
    position:absolute;
    background-color:#8e8d6b;
    width:1200px;
    height:1000px;
    z-index:-1;
    top:-70px;
    left: -160px;
    opacity:0.8;
    border-radius:30px;
}



.footer1{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #bebc8e;
    color: white;
    text-align: center;
    opacity:0.7;
    font-size:18px;
    font-family:'Bebas Neue', cursive;
}


/*blockCHAIN*/

#header1{
    font-family: 'Roboto Mono', monospace;
    font-size: 80px;
    position:relative;
    left: 100px;
    width:1100px;
    height:250px;
    background-color:#eab676;
    padding:40px;
    
}

#paragraph1{
    width:400px;
    height:500px;
    position:relative;
    left:200px;
    font-family: 'Source Code Pro', sans-serif;
    
}

#bkimg1{
    width:700px;
    left: 750px;
    bottom:350px;
    position:relative;
    border: 2mm ridge rgba(250,219,148,0.6);
    
}
.homebutton{
    position: fixed;
    width:60px;
    height:25px;
    left:-5px;
    background-color:#e5c7b0;
    padding: 15px;
    font-family: 'Source Code Pro', sans-serif;
    border: 1mm ridge rgba(216,109,52,0.6);
    font-family: 'Teko', sans-serif;
    font-size:25px;
}
    
#header2{
    font-family:'Source Code Pro', sans-serif;
    position:relative;
    font-size:40px;
}

#bkimg2{
    width:500px;
    position:relative;
    left:150px;
    top:-600px;
    border: 2mm ridge rgba(250,219,148,0.6);
}
#bkimg3{
    position:absolute;
    width:600px;
    right:700px;
    top:320px;
    border: 2mm ridge rgba(250,219,148,0.6);
}

#paragraph2{
    width:500px;
    font-family:'Source Code Pro', sans-serif;
    left: 900px;
    position:relative;
    top:100px;
}


/*Algo html code starts here*/
#algoTitle{
    font-family: 'Roboto Mono', monospace;
    font-size: 100px;
    position:relative;
    top:50px;
    animation-name:fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 1500ms;
}
.flexbox-container{
    display:flex;
    justify-content:space-around;
    top:300px;
    position:relative;
    background-color:#c5ebec;
    height:900px;
    animation-name:slide-in;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 500ms;
}
@keyframes slide-in {
    from{
        top:800px;
    }
    to{
        top:300px;
    }
}
.items{
    width:600px;
    margin:10px;
    background-color:#eaecdf;
    border:3px solid #333;
    opacity:0.7;
    font-family: 'Source Code Pro', sans-serif;
    
}

.item-1{
    min-height:400px;
    padding:20px;
    align-self:flex-end;
}
.item-2{
    min-height:400px;
    align-self: start;
    padding:20px;
}
.item-3{
    min-height:500px;
    height:700px;
    align-self:center;
    padding:20px;

}
#algoIMG1{
    width:400px;
    position:relative;
    left: 100px;
    align-self:center;
}
#algoIMG2{
    width:300px;
    position:absolute;
    left: 1100px;
    top: 50px;
    animation-name:spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 20000ms;
}
#algoIMG3{
    width:300px;
    position:relative;
    left: 100px;
    align-self:center;
    top:20px
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
@keyframes fadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}



/*start of mining*/
.container{
    display:grid;
    grid-template-columns: 400px 450px;
    grid-auto-rows: minmax(150px,auto);
    grid-gap:150px;
    margin:auto;
    text-align:center;
    position:relative;
    left:300px;
    font-family: 'Redressed', cursive;
    animation: slide-up-for 1s linear 1;
}

@keyframes slide-up-for {
    from{
        top:600px;
    }
    to{
        top:0px;
    }
}



.mine_head{
    font-size:70px;
    grid-row:span 2;
}
#miningp1{
    font-size:15px;
    top:100px;
    position:relative;
    background-color:#FFFFFF;
    padding:10px;
    border-radius:30px;
    font-family: 'Source Code Pro', sans-serif;
}

#miningp2{
    font-size:15px;
    font-family: 'Source Code Pro', sans-serif;
    position:relative;
    top:200px;
    background-color:black;
    color:white;
    padding:10px;
    border-radius:30px;
}

#no{
    width: 400px;
    position:relative;
    top:200px;
}
#yes{
    width: 400px;
    position:relative;
    top:300px;
}

#lastMining{
    font-size:15px;
    font-family: 'Source Code Pro', sans-serif;
    position:relative;
    top:300px;
    background-color:white;
    padding:10px;
    border-radius:30px;
}

#bodymine{
    padding:150px;
}

.fork1{
    font-size:15px;
    font-family: 'Source Code Pro', sans-serif;
    position:relative;
    background-color:black;
    color:white;
    padding:10px;
    border-radius:30px;
    top:100px;
}
.fork2{
    font-size:20px;
    font-family: 'Source Code Pro', sans-serif;
    position:relative;
    top:300px;
}

#hi{
    position:relative;
    top:350px;
    width:500px;
}
.fork3{
    font-size:20px;
    font-family: 'Source Code Pro', sans-serif;
    position:relative;
    top:400px;

}
#hi2{
    position:relative;
    top:450px;
    width:500px;
}

#line{
    position:absolute;
    background-color:black;
    width:5px;
    animation:lineup 3s forwards;
    height:1800px;
    top:50px;
    left: 470px;
    animation: animate 5s linear infinite;
}
@keyframes animate {
            0% {
                background-color:#FBEEC1;
            }
  
            50% {
                background-color:black;
            }
  
            100% {
                background-color:#FBEEC1;
            }
}