* {
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial;
    padding: 10px;
    background: #FFFFFF;
  }
  
  /*Header*/
  header {
    padding: 10px;
    background: rgb(114, 102, 28);
  }
  
  header h1 {
    font-size: 30px;
  }
  
  /*nav*/
  nav {
    overflow: hidden;
    background-color: rgb(91, 76, 0);
    box-shadow:2px 2px 12px rgba(12, 23, 99, 0.458);
  }
  
  nav a {
      float: left;
      display: block;
      color: #fabd06;
      text-align: center;
      padding: 15px 15px;
      text-decoration: none;
  }
  nav a:hover {
    background-color: rgb(244, 209, 114);
    color: black;
    font-weight:bold;
  }
  
  /* aside */
  aside {
      padding-left: 10px;
  }
  
  /* Footer */
  footer{
      height:150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative; 
      background: rgb(114, 102, 28);
  }
  
  /* column */
  .column {   
    float: left;
    padding: 10px;
  }
  .column.left {   
    width: 85%;
  }
  .column.right {   
    width: 15%;
  }
  
  .myphoto {
      width: 100px;
      height: 150px;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  
  
  /* Social Media */
  .social-icons a{
      width:30px;
      height:30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color:rgb(91, 76, 0);
      margin:20px 10px;
      border-radius:50%;
  }
  .social-icons{
      display: flex;    
  }
  .social-icons i,.social i{
      color: #fabd06
  }
  .social-icons a:hover{
      background-color:#000000;
      box-shadow:2px 2px 12px rgba(0,0,0,0.2);
      transition:all ease 0.5s;
  }
  .social-icons a:hover i,
  .social a:hover i{
      color:#FFFFFF;
      transition:all ease 0.5s;
  } 
    
  /* Timer */
  .countdown {
      position: relative;
      font-family:verdana;
      font-weight:bold;
      color: rgb(91, 76, 0);
  }
  
  /* Score */
  .titlescore {
      position: relative;
      font-family: verdana;
      font-weight: bold;
      color: rgb(185, 148, 47);
  }	
  
  /* Created */
  .created {
      color:#b6b2b2;
  }
  
  @media (max-width: 540px) {
      .column.left, .column.right {
          width: 100%;
      }
  
      .floating-box {
          position: relative;
          display: inline-block;
          width: 40px;
          height: 90px;
          background-image: url("assets/images/01.png");
          background-size: cover;
          background-position: center;
          background-repeat:no-repeat;		
          padding: 0 5px;
          margin: 5px;
          cursor: pointer;		
      }  
  
  }
  
  @media (min-width : 550px) and (max-width: 1024px) {
      .column.left, .column.right {
          width: 100%;
      }
  
      .floating-box {
          position: relative;
          display: inline-block;
          width: 100px;
          height: 170px;
          background-image: url("assets/images/01.png");
          background-size: cover;
          background-position: center;
          background-repeat:no-repeat;		
          padding: 0 5px;
          margin: 5px;
          cursor: pointer;		
      }  
  }
  
  @media (min-width : 1024px) {
  
      .floating-box {
          position: relative;
          display: inline-block;
          width: 150px;
          height: 230px;
          background-image: url("assets/images/01.png");
          background-size: cover;
          background-position: center;
          background-repeat:no-repeat;		
          padding: 0 5px;
          margin: 5px;
          cursor: pointer;		
      }  
      
  
  }