body{
  margin: 0;
  padding: 0;
  background-image: url("myTime_background.jpg");
  background-repeat: repeat-y;
  background-position: center top;
  background-color: #504a3f;
  }

.container{
  max-width: 1065px;
  padding: 10px;
  margin: auto;
}

.flexbox-container {  
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #849daa;
  text-shadow: 1px 1px 1px black; 
}

.flexbox-item {
  width: 100%;
  align-items: center;
  text-align: center;
  color: #849daa;
  text-shadow: 1px 1px 1px black;
}

.navbar a {
  display: block;
  color: #d2ab67;
  text-shadow: 1px 1px 1px black; 
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

.navbar a:hover {
  color: #849daa;
  text-shadow: 1px 1px 1px black;
}  

.flexbox-header{
  background-image: url("myTime_logo.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 40%;
  box-shadow: 1px solid black;
  height: 100px;
}

.dayTimes{
  display: none;
}

.dayName{
  display: block;
  float: left;
}

.event{
  align-items: center;
  margin-top: 10px;
  background-color: rgb(23,166,151);
  border-radius: 5px;
  color: white;
}

.event:hover{
  background-color: rgb(137, 241, 206);
}

.eventTitle a{
  text-decoration: none;
  color: white;
}

.day{
  max-width: 100%;  
}

.flexbox-item .flexbox-footer{
  display: flex;
  max-width: 70%;
  align-items: center;
}

@media screen and (min-width: 768px) {

  .navbar{
    display: flex;
    float: right;
    margin-top: 25px;
    overflow: hidden;
    }

  .navbar a{
    color: #d2ab67;
    text-shadow: 1px 1px 1px black; 
    padding: 15px 4px;
    text-decoration: none;
    text-align: center;
    }

  .navbar a:hover {
    color: #849daa;
    text-shadow: 1px 1px 1px black;
    } 
    
  .navbar a.active {
      display: none;
    }

  .navbar .spining{
      display: block;
    }

  .navbar .icon {
      display: none;
    }  
  }
  
  @media screen and (max-width: 1100px) {
    .navbar a:not(:first-child) {display: none;}
    .navbar a.icon {
      float: right;
      display: flex;
      position: absolute;
      right: 0;
      top: 35px;
      }
    
      .navbar .mytime{
        display: none;
      }  
              
    .navbar.responsive .icon {
      float: right;
      position: fixed;
      right: 0;
      top: 35px;
      }
          
    .navbar.responsive {
      position: absolute;
      float: right;
      top: 120px;
      right: 30%;
      width: 40%;
      background-color: rgb(95, 88, 88);
      opacity: 1;
      box-shadow: 15px 10px 10px rgb(43, 37, 23);
      }
         
    .navbar.responsive a {
      float: none;
      display: flex;
      flex-wrap: wrap;
      text-align: left;
      }
        }  
    
    @media screen and (min-width: 768px) {
    
       /* .navbar{
          display: flex;
          float: right;
          margin-top: 25px;
          overflow: hidden;
          }
    
        .navbar a{
          color: #d2ab67;
          text-shadow: 1px 1px 1px black; 
          padding: 15px 5px;
          text-decoration: none;
          text-align: center;
          }
      
        .navbar a:hover {
          color: #849daa;
          text-shadow: 1px 1px 1px black;
          } 
          
        .navbar a.active {
            display: none;
          }
    
        .navbar .icon {
            display: none;
          }  
    */
        .flexbox-item-1{
          margin-top: 20px;
          min-height:30px;
          justify-content: center;
          display: flex;
        }
    
        .dayName{
          display: block;
          float: none;
        }
    
        .flexbox-item-2{
          background-image: url("myTime_background_1.png");
          background-repeat: no-repeat;
          background-position: center, top;
          margin-top: 20px;
          min-height: 680px;
          justify-content: center;
          display: flex;
        }
    
        .naptar{
          display: flex;
          max-width: 1024px ;
          align-items: center;
        }
    
        .time{
          width: 60px;
        }
    
        .day{
            width: 110px;
        }
    
        .dayName{
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    
        .dayTimes, .dayEvents{
            display: grid;
            grid-template-rows: repeat(14, 55px);
        }
    
        .event {
          background-color: rgb(23,166,151);
          border-radius: 5px;
          color: white;
        }
    
        .event:hover{
          background-color: rgb(137, 241, 206);
        }
    
        .eventTitle {
          font-size: medium;
          text-align: center;
          font-weight: 400; 
          word-wrap: break-word; 
        }
        /* Csak az 1 óra hosszú, vagy az ütköző eseményeknél lesz aktiválva */
        
        .eventSubdivide .eventTitle, .length--1 .eventTitle {
          overflow: hidden; /* Elrejtjük a görgetősávat */
          white-space: nowrap; /* Szóköznél nem kezdünk új sort ha nincs elég hely */
        }
        
        /*.eventTime {
          font-size: small; 
          font-weight: 300; 
          background-color: rgb(23,166,151);
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
        */
        }
      
        .eventSubdivide {
          /* Szeretjük a flexet */
          display: flex;
        }
        
        .eventSubdivide .event {
          max-width: 88px; /* Ha valami oknál fogva tovább akarna nyúlni, akkor ne */
        }
    
        .flexbox-item-3{
          min-height: 180px;
          margin-top: 20px;
        }
    
        .flexbox-footer{
          display: flex;
          max-width: 60%;
          padding: 10px;
          align-items: center;
          justify-content: space-between;
        }
    
        .flexbox-footer .face{
          border-radius: 100%;
          
        }
    
        .flexbox-footer .insta{
          border-radius: 25%;
          
        }
    }