body{
    background-color: white;
}
#wrap {
    background-color: rgb(255, 255, 255);
    }
    
    #header{
        
        animation-duration: 3s;
        animation-iteration-count: none;
      
      
    }
    
    @keyframes flip{
        0% {opacity: 1;}
        50% {opacity:1 ;}
        51% {opacity:0 ;}
        100% {opacity:0 ;}
    }
    
    
    #ani {
        z-index: -1;
        position:absolute;
        top:0px;
        height:100%;
        width:100%;
        align-items: center;
        text-align: center;
        background-color: rgb(255, 255, 255);
        overflow: hidden;
        background-size: cover;
    }
    
    
    #m1{
    
        background-image:url("hockney1.png");
        width:100%;
        height:150vw;
        animation-name: fade1;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        position:absolute;
        background-size: cover;
        background-position: center;
        margin: auto;
        background-repeat: no-repeat;
        transition-duration: 1s;
        top:-10vh;
    }
    
    #m2{
        background-image:url("hockney2.png");
        width:100%;
        height:150vw;
        animation-name: fade2;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        position:absolute;
        background-size: cover;
        background-position: center;
        margin: auto;
        background-repeat: no-repeat;
        transition-duration: 1s;
        top:-10vh;
    }
    
    #m3{
        background-image:url("hockney3.png");
        width:100%;
        height:150vw;
        animation-name: fade3;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        position:absolute;
        background-size: cover;
        background-position: center;
        margin: auto;
        background-repeat: no-repeat;
        transition-duration: 1s;
        top:-10vh;
    
    }
    
    #m4{
        background-image:url("hockney2.png");
        width:100%;
        height:150vw;
        animation-name: fade4;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        position:absolute;
        background-size: cover;
        background-position: center;
        margin: auto;
        background-repeat: no-repeat;
        transform:scaleX(-1);
        transition-duration: 1s;
        top:-10vh;
    }
    
    #m5{
        background-image:url("hockney3.png");
        width:100%;
        height:150vw;
        position:absolute;
        background-size: cover;
        background-position: center;
        margin: auto;
        background-repeat: no-repeat;
        display: none;
        animation-name: zoomOut;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-fill-mode: forwards;
        background-color: #ffffff;
        transition-duration: 1s;
        top:0vh;
       
    }
    
    @keyframes fade1 {
        0% {opacity: 1;}
        25%{opacity:1;}
        26%{opacity:0;}
        99%{opacity:0;}
        100%{opacity:1;}
        
    }
    
    @keyframes fade2 {
        0% {opacity: 0;}
        25%{opacity:0;}
        26%{opacity:1;}
        50%{opacity:1;}
        51%{opacity:0;}
      
    }
    @keyframes fade3 {
        0% {opacity: 0;}
        50%{opacity:0;}
        51%{opacity:1;}
        75%{opacity:1;}
        76%{opacity:0;}
    }
    
    @keyframes fade4 {
        0%{opacity:0;}
        75%{opacity:0;}
        76%{opacity:1;}
        99%{opacity:1;}
        100%{opacity:1;}
    
    }
    
    @keyframes zoomOut {
        100%{height:100vh; background-size: contain;}
    
    }
    
    #alert1{
    
        position: absolute;
        font-family: sserif;
        animation-name: alert;
        animation-duration: 5s;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-fill-mode: forwards;
        z-index: 1000000;
        color:black;
        display:none;
        text-align: center;
        height: 70%;
        width: 20%;
        border-radius: 50%;   
    }
    
    #alert2{
        position: absolute;
        font-family: sserif;
        animation-name: alert;
        animation-duration: 5s;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-fill-mode: forwards;
        z-index: 1000000;
        color:black;
        display:none;
        text-align: center;
        height: 70%;
        width: 20%;
        border-radius: 50%;
        
    }
    
    #alert3{
        position: absolute;
        font-family: sserif;
        animation-name: alert;
        animation-duration: 5s;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-fill-mode: forwards;
        z-index: 1000000;
        color:black;
        display:none;
        text-align: center;
        height: 70%;
        width: 20%;
        border-radius: 50%;
        
    }
    
    #alert4{
        position: absolute;
        font-family: sserif;
        animation-name: alert;
        animation-duration: 5s;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-fill-mode: forwards;
        z-index: 1000000;
        color:black;
        display:none;
        text-align: center;
        height: 70%;
        width: 20%;
        border-radius: 50%;
        
    }
    
    #alert5{
        position: absolute;
        font-family: sserif;
        animation-name: alert;
        animation-duration: 5s;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-fill-mode: forwards;
        z-index: 1000000;
        color:black;
        display:none;
        text-align: center;
        height: 70%;
        width: 20%;
        border-radius: 50%;
        
    }
    
    #alert6{
        position: absolute;
        font-family: sserif;
        animation-name: alert;
        animation-duration: 5s;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-fill-mode: forwards;
        z-index: 1000000;
        color:black;
        display:none;
        text-align: center;
        height: 70%;
        width: 20%;
        border-radius: 50%;
        
    }
    #alert7{
        position: absolute;
        font-family: sserif;
        animation-name: alert;
        animation-duration: 5s;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-fill-mode: forwards;
        z-index: 1000000;
        color:black;
        display:none;
        text-align: center;
        height: 70%;
        width: 20%;
        border-radius: 50%;
        
    }
    
     h3 {
        color:black;
        font-size:250%;
        text-align: center;
        font-family: sserif;
        mix-blend-mode: difference;
    }
    
    @keyframes alert{
        0%{ opacity:1; }
        50%{ opacity:1; }
        100%{ opacity:0; transform:translateY(-10%); }
    }
    
    #words {
        z-index: 10;
        position:absolute;
        top: 0px;
        height:50%;
        width: 90%;
        font-size:1500%;
        text-align: center;
        font-family: sserif;
        color:black;
        line-height: 27vh;
        mix-blend-mode:darken;
        display:none;
        top:10vh;
        left:5%;
        right:5%;
        transition-duration:1s;
    }


    #word {
        font-size: 50%;
    }

    #poop {
        position:absolute;
        font-size:700%;
        text-align: center;
        font-family: sserif;
        height: 100%;
        width:80%;
        top:10%;
        left:10%;
        mix-blend-mode: multiply;
        z-index: 2000000;
        transition-duration:1s;
        
    
    }
    
    h2 {
        text-align: center;
        font-family: sserif;
        color:black;
        font-size:1000%;
    }

    h4{
        text-align: center;
        font-family: sserif;
        color:black;
        font-size:-100%;
    }
    
    #words1 {
        z-index: 10;
        position:absolute;
        top: 0px;
        height:50%;
        width: 90%;
        line-height: -0.001;
        font-size:2000%;
        text-align: center;
        font-family: sserif;
        color:black;
        line-height: 40vh;
        mix-blend-mode:darken;
        display:none;
        top:10vh;
        left:5%;
        right:5%;
    }
    
    #firewrap{
        height: 100vh;
        width: 100vw;
        z-index: 10;
    }
    
    #season{
        width:100%;
        height:100%;
        z-index: 100000000;
        
    }
    
    h4{
        font-size:150%;
        text-align: center;
        font-family: sserif;
        position:absolute;
        mix-blend-mode: difference;
        width:100%;
        height:10%;
        top:-1%;
       
        z-index: 100000000;
        text-decoration: none;
        
      
    }
    
    a {
        color: rgb(31, 31, 31);
        text-decoration: none;
    }
    
    a:hover{
        color:red;
        mix-blend-mode: multiply;
    }
    #season:hover{
        color:white;
    }
    
    #box {
        z-index: 10;
        position:absolute;
        height:60vh;
        width: 100vh;
        top:10vh;
        left:10%;
        right:50%;
    }
    
    #framewrap{
        display:none;
        height:100%;
        width:100%;
        overflow:hidden;
        
    }
    
    #framewrap div {
            height: 70%;
            width: 20%;
            border-radius: 50%;
            z-index: 1 ;
            position:absolute;
            background-size: cover;
            background-position: center;
            margin: auto;
            background-repeat: no-repeat;
            filter:blur(5px);
            
            animation: pulse 2s, scatterX 2s ease-out 1s forwards;
            opacity:0;
            animation-fill-mode: forwards;
            overflow:hidden;
        
    
    }
    #framewrap div.one {
        right:0%;
        top:0%;
        background-image:url("h1.png");
        border-color: white;
        box-shadow: 0px 0px 20px 20px rgb(252, 252, 252);
        overflow:hidden;
        transition-duration: 1s;
        
        
    }
    
    #framewrap div.two {
        left:20%;
        bottom:20%;
        background-image:url("h2.png");
        border-color: white;
        box-shadow: 0px 0px 20px 20px rgb(216, 255, 107);
        transition-duration: 1s;
    }
    
    #framewrap div.three {
        right:25%;
        top:-5%;
        background-image:url("h3.png");
        border-color: white;
        box-shadow: 0px 0px 20px 20px rgb(48, 167, 77);
        transition-duration: 1s;
    }
    
    #framewrap div.four {
        background-image:url("h4.png");
        border-color: white;
        box-shadow: 0px 0px 20px 20px rgb(48, 167, 77);
        transition-duration: 1s;
    }
    
    #framewrap div.five {
        background-image:url("h5.png");
        border-color: white;
        box-shadow: 0px 0px 20px 20px rgb(255, 255, 255);
        transition-duration: 1s;
    }
    
    #framewrap div.six {
        background-image:url("h6.png");
        border-color: white;
        box-shadow: 0px 0px 20px 20px rgb(216, 255, 107);
        transition-duration: 1s;
    }
    
    #framewrap div.seven {
        background-image:url("hockney7.png");
        border-color: white;
        box-shadow: 0px 0px 20px 20px rgb(255, 255, 255);
        transition-duration: 1s;
    }
    
    strong{
        -webkit-text-stroke: 0.01px black; 
    }
    
    
    
    @keyframes scatterX{
        0% { opacity:0;transform:translateX(0%);transform:scale(0.9,0.9)}
        100% {opacity: 1; transform: translate3d(10px, 0, 0);; transform:scale(1,1)}
    }
    
    #button {
        height: 70%;
            width: 20%;
            border-radius: 50%;
            z-index: -1;
            position:absolute;
    
    }
    
    #framewrap div.one:hover{
        background-color: aquamarine;
        transform:scale(1.1,1.1);
    }