body{
    margin:0px;
  }
main{
    margin-left:20px;
  }
h1{
    text-align: center;
  }  
.navbar ul{
    list-style-type:none;
    background-color:black;
    padding:0px;
    margin:0px;
    overflow:hidden;
  }
.navbar a{
    color:white;
    text-decoration:none;
    padding:15px;
    display:block;
    text-align:center;
  }
.navbar a:hover{
    background-color:grey;
  }
.navbar li{
    float:left;
  }
 



#hello::first-letter{
    font-size:2em;
    font-style:italic;
  }
#ough::first-line{
  background-color:lightgreen;
  }
#ough::selection{
  color:pink;
  background-color:green
  }
#fruit li::before{
  content:"🍊";
  }
#fruit li::marker{
  content:"✔";
  color: yellow;
  }
#me::after{
   content:"🧑🏻";
  }
#you::after{
   content:"👁";
  }
#grapefruit::after{
   content:"🍇"
  }  
  
  
#box5{
    width:250px;
    height:250px;
    border:5px;
    font-size:100px;
    text-align:center;
    background-color:tomato;
    
    transform:translate(-25%, 25%);
    transform:rotateX(15deg);
    transform:rotateZ(25deg);
    transform:skew(20deg);
  }
#viktor{
    height:150px;
    animation-name:grow;
    animation-duration:5s;
    animation-direction:alternate;
    animation-iteration-count:2;
    animation-play-state:running;
    animation-timing-function:linear;
  }
#box6{
    width:250px;
    height:250px;
    border:5px;
    font-size:75px;
    text-align:center;
    background-color:grey;
  }
#box6:hover{
    animation-name:rave;
    animation-duration:3s;
    animation-iteration-count:infinite;
  }
@keyframes slideLeft{
    from{transform: translateX(100%)}
  }
@keyframes rotate{
    100%{transform:rotateX(360deg)}
  }
@keyframes grow{
    50%{transform: scale(500%)}
  }
@keyframes fade{
    50%{opacity:0}
  }
@keyframes colourChange{
    0%{background-color:red}
    25%{background-color:orange}
    37.5%{background-color:yellow}
    50%{background-color:green}
    62.5%{background-color:blue}
    75%{background-color:indigo}
    87.5%{background-color:violet}
    100%{background-color:red}
  }
  
@keyframes rave{
    0%{box-shadow:0px 0px 75px red; background-color:red}
    16.7%{box-shadow:0px 0px 75px orange; background-color:orange}
    33.4%{box-shadow:0px 0px 75px yellow; background-color:yellow}
    50.1%{box-shadow:0px 0px 75px green; background-color:green}
    66.8%{box-shadow:0px 0px 75px blue; background-color:blue}
    83.5%{box-shadow:0px 0px 75px magenta; background-color:magenta}
    100%{box-shadow:0px 0px 75px red; background-color:red}
  }
  
  
.dropdown{
    display:inline-block;
  }  
.dropdown button{
    background-color:green;
    color:white;
    padding:10px 15px;
    border:none;
    cursor:pointer;
  }
.dropdown a{
    display:block;
    color:black;
    text-decoration:none;
    padding:10px 15px;
  }
.dropdown .content{
    display:none;
    position:absolute;
    background-color:lightgreen;
    min-width:100px;
    box-shadow:2px 2px 5px black;
  }
.dropdown:hover .content{
    display:block;
  }
.dropdown:hover button{
    background-color:grey;
  }
.dropdown a:hover{
    background-color:green;
  }
  
  
  
.box{
    width:150px;
    height:150px;
    font-size: 15px;
    text-align:center;
    border-radius:15px;
  }
#box1{
    background-color:cyan;
    align-self:center;
  }
#box2{
    background-color:magenta;
    order:1;
  }
#box3{
    background-color:yellow;
  }
#box4{
   background-color:black;
   color:white;
  }
.container{
    display:flex;
    flex-direction:column;
  }  
.container2{
    display:flex;
    justify-content:space-evenly;
    flex-wrap:wrap;
    align-content:flex-start;
  }
.container3{
    display:flex;
    border:10px solid black;
    height:90vh;
    align-items:flex-start;
    flex-wrap:wrap;
    column-gap:1em;
    row-gap:1em;
  }
  




  .icons{
      color:darkgreen;
      text-align:center;
    }
  .icons a{
      text-decoration:none;
      margin-right: 15px;
      margin-left: 15px;
    }
  
  
  
  
  
  .gallery{
      display:inline-block;
      border:1px solid green;
      margin:5px;
      width:200px
    }
  .gallery .description{
      padding:10px;
      text-align:center;
    }
    
  .gallery:hover{
      border: 1px solid lightgreen;
    }
  .gallery img{
      width: 100%;
      height: auto;
    }
  
    
  
  
  
  .pagination{
      text-align: center;
    }
  .pagination a{
      color:black;
      text-decoration:none;
      padding: 8px 15px;
      display: inline-block;
    }

 .pagination a.active{
   background-color:darkgreen;
   font-weight:bold;
   border-radius:5px;
   }

 .pagination a:hover:not(.active){
    background-color:grey;
    border-radius:5px;
   }