 html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: black;
}.navbar {
    width: 400px;           /* Sets the width of the div */
    height: 25px;          /* Sets the height of the div */
    margin: auto;      /* Center the div with auto margins */ 
    display: flex;                /* Enable flexbox */
    justify-content: flex-start;  
}
.homelink {
    width: 67px;                /* Width of each small div */
    height: 25px;               /* Height of each small div */
    display: flex;
    justify-content: center;    /* Center content horizontally */
    align-items: center;        /* Center content vertically */
    background-image: url('home.png');
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center; 
}
.homelink:hover{
    opacity: 0.5;
}
.calendarlink {
    width: 66px;                /* Width of each small div */
    height: 25px;               /* Height of each small div */
    display: flex;
    justify-content: center;    /* Center content horizontally */
    align-items: center;        /* Center content vertically */
    background-image: url('Calendar.png');
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center; 
}
.calendarlink:hover{
    opacity: 0.5;
}
.powerlink {
    width: 66px;                /* Width of each small div */
    height: 25px;               /* Height of each small div */
    display: flex;
    justify-content: center;    /* Center content horizontally */
    align-items: center;        /* Center content vertically */
    background-image: url('power.png');
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center; 
}
.powerlink:hover{
    opacity: 0.5;
}
.winterlink {
    width: 66px;                /* Width of each small div */
    height: 25px;               /* Height of each small div */
    display: flex;
    justify-content: center;    /* Center content horizontally */
    align-items: center;        /* Center content vertically */
    background-image: url('winter.png');
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center; 
}
.winterlink:hover{
    opacity: 0.5;
}
.locallink {
    width: 66px;                /* Width of each small div */
    height: 25px;               /* Height of each small div */
    display: flex;
    justify-content: center;    /* Center content horizontally */
    align-items: center;        /* Center content vertically */
    background-image: url('local.png');
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center; 
}
.locallink:hover{
    opacity: 0.5;
}
.misclink {
    width: 66px;                /* Width of each small div */
    height: 25px;               /* Height of each small div */
    display: flex;
    justify-content: center;    /* Center content horizontally */
    align-items: center;        /* Center content vertically */
    background-image: url('misc.png');
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center; 
}
.misclink:hover{
    opacity: 0.5;
}
 .header {
    width: 400px;           /* Sets the width of the div */
    height: 100px;          /* Sets the height of the div */
    margin: auto;      /* Center the div with auto margins */
    text-align: center;     /* Center text inside the div */
    background-image: url('heading.png');
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center;   /* Center the image */
    border: none;                  /* Ensure no border */
}
 .housekeeping {
    width: 400px;           /* Sets the width of the div */
    height: 100px;          /* Sets the height of the div */
    margin: auto;      /* Center the div with auto margins */
    text-align: center;     /* Center text inside the div */
    background-image: url('housekeeping.png');
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center;   /* Center the image */
    border: none;                  /* Ensure no border */
}
 .calendar {
    width: 400px;           /* Sets the width of the div */
    height: 200px;          /* Sets the height of the div */
    margin: auto;      /* Center the div with auto margins */
    text-align: center;     /* Center text inside the div */
    border: none;                  /* Ensure no border */
}
 .winterizing {
    width: 400px;           /* Sets the width of the div */
    height: 100px;          /* Sets the height of the div */
    margin: auto;      /* Center the div with auto margins */
    text-align: center;     /* Center text inside the div */
    background-image: url('winterizing.gif');
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center;   /* Center the image */
    border: none;                  /* Ensure no border */
}
 .reservations {
    width: 400px;           /* Sets the width of the div */
    height: 100px;          /* Sets the height of the div */
    margin: auto;      /* Center the div with auto margins */
    text-align: center;     /* Center text inside the div */
    background-image: url('reservations.png');
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center;   /* Center the image */
    border: none;                  /* Ensure no border */
}
 .power {
    width: 400px;           /* Sets the width of the div */
    height: 100px;          /* Sets the height of the div */
    margin: auto;      /* Center the div with auto margins */
    text-align: center;     /* Center text inside the div */
    background-image: url('power.gif');
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center;   /* Center the image */
    border: none;                  /* Ensure no border */
}
 .local {
    width: 400px;           /* Sets the width of the div */
    height: 100px;          /* Sets the height of the div */
    margin: auto;      /* Center the div with auto margins */
    text-align: center;     /* Center text inside the div */
    background-image: url('local-banner.png');
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center;   /* Center the image */
    border: none;                  /* Ensure no border */
}
 .misc {
    width: 400px;           /* Sets the width of the div */
    height: 100px;          /* Sets the height of the div */
    margin: auto;      /* Center the div with auto margins */
    text-align: center;     /* Center text inside the div */
    background-image: url('misc-banner.png');
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center;   /* Center the image */
    border: none;                  /* Ensure no border */
}
 .image-container{
    width: 400px;           /* Sets the width of the div */
    height: 267px;          /* Sets the height of the div */
    margin: auto;      /* Center the div with auto margins */
    display: flex;                /* Enable flexbox */
    justify-content: flex-start; 
}
.images {
    width: 200px;                /* Width of each small div */
    height: 267px;               /* Height of each small div */
    display: flex;
    justify-content: center;    /* Center content horizontally */
    align-items: center;        /* Center content vertically */
    background-size: cover;        /* Make the image cover the entire div */
    background-repeat: no-repeat;  /* Prevent image from repeating */
    background-position: center;   /* Center the image */
}
