* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    
    body {
    background-color: black;
    }
    #navContainer {
    height: 15vh;
    width: 100vw;
    background: black;
    }
    
    nav {
    width: 100%;
    height: 15vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    }
    
    ul {
    display: flex;
    }
    
    li {
    padding: 20px;
    list-style: none;
    }
    
    a {
    color: white;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 1rem;
    }
    
    .current {
    color: green;
    }
    
    #letters {
    background-color: black;
    width: 100vw;
    }
    
    #letters h1 {
    text-transform: capitalize;
    text-align: center;
    background: black;
    color: white;
    padding-bottom: 10px;
    }
    
    #letters h2 {
    color: white;
    font-style: italic;
    text-align: center;
    background: black;
    text-transform: capitalize;
    padding-bottom: 20px;
    }
    
    #letters .redText {
    color: red;
    }
    
    #greenBar {
    
    height: 25vh;
    width: 100vw;
    position: relative;
    }
    
    /***spining record***/
    
    
    #container3 .parent .child-2 h1 span {
                font: 16px Monaco, MonoSpace;
                 height: 100px;
                  position: absolute;
                  z-index: 3;
                   width: 20px;
                    left: 45.5%;
                     top: 5%;
                      transform-origin: bottom center;
                       }
    
    .char1 {
     transform: rotate(11.25deg);
      }
    
      .char2 {
    
        transform: rotate(22.5deg);
        }
    
        .char3 {
         transform: rotate(33.75deg);
          }
    
    .char4 {
     transform: rotate(45deg);
      }
    
      .char5 {
    
        transform: rotate(56.25deg);
        }
    
        .char6 {
         transform: rotate(67.5deg);
          }
    
    .char7 {
     transform: rotate(78.75deg);
      }
    
      .char8 {
    
        transform: rotate(90deg);
        }
    
        .char9 {
         transform: rotate(101.25deg);
          }
    
    .char10 {
     transform: rotate(112.5deg);
      }
    
      .char11 {
    
        transform: rotate(123.75deg);
        }
    
        .char12 {
         transform: rotate(135deg);
         }
    
         .char13 {
         transform: rotate(146.25deg);
          }
    
          .char14 {
            transform: rotate(157.5deg);
          }
    
    .char15 {
     transform: rotate(168.75deg);
      }
    
      .char16 {
    
        transform: rotate(180deg);
        }
    
        .char17 {
         transform: rotate(191.25deg);
          }
    
    .char18 {
     transform: rotate(202.5deg);
      }
    
      .char19 {
    
        transform: rotate(213.75deg);
        }
    
        .char20 {
         transform: rotate(225deg);
          }
    
    .char21 {
     transform: rotate(236.25deg);
      }
    
      .char22 {
    
        transform: rotate(247.5deg);
        }
    
        .char23 {
         transform: rotate(258.75deg);
          }
    
    .char24 {
     transform: rotate(270deg);
      }
    
      .char25 {
    
        transform: rotate(281.25deg);
        }
    
        .char26 {
         transform: rotate(292.5deg);
         }
    
         .char27 {
         transform: rotate(303.75deg);
          }
          .char28 {
            transform: rotate(315deg);
          }
    
          .char29 {
    
        transform: rotate(326.25deg);
        }
    
        .char30 {
         transform: rotate(337.5deg);
         }
    
         .char31 {
         transform: rotate(348.75deg);
          }
          .char32 {
            transform: rotate(360deg);
          }
    
          .red {
            color: red;
          }
    
          .green {
             color: green;
          }
    
          .black {
            color: blueviolet;
          }
     
    .parent {
        width: 400px;
        height: 400px;
        background-color: green;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
    }
    .child-2 {
        width: 220px;
        height: 220px;
        background-color: black;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        -webkit-animation:  rotation 12s infinite linear;
    
    }
    .recordText {
        color: white;
    }
    .child-3 {
        width: 50px;
        height: 50px;
        background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top-left-radius: 50%;
        border-bottom-right-radius: 50%;
        position: absolute;
        top: 38%;
        left: 38%;
       
    }
    @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotate(0deg);
        }
    
        to {
            -webkit-transform: rotate(360deg);
        }
    }
    .child-4 {
        width: 15px;
        height: 15px;
        background-color: blueviolet;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .child-5 {
        width: 5px !important;
        height: 5px !important;
        border-radius: 50%;
        background-color:black;
    }
    
    
    /***end of spining record***/
    
    #container3 img {
    width: 100%;
    padding: 20px;
    
    }
    
    #container3 {
    display: flex;
    background: black;
    position: relative;
    height: 250px;
    width: 100vw;
    margin-top: 25vh;
    }
    
    #container3 div {
    padding: 20px;
    }
    
    #container3 div h1 #whiteText {
    padding: 20px;
    color: white !important;
    position: relative;
    z-index: 3;
    background-color: rgba(0, 0, 0, .5);
    top: 75px;
    }
    #whiteText {
    color: white;
    margin-top: 15vh;
    padding: 0 100px 0 100px;
    }
    #container3 div h1 {
    text-transform: capitalize;
    }
    
    #textUnderRecord {
    position: relative;
    z-index: 5;
    }
    #imageBgContainer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    top: 20vh;
    background-color: black;
    }
    
    #backgroundImageOverlay {
    background-color: rgba(0, 0, 0, .6);
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 10vh;
    }
    #container4 {
    background-image: url('nightclub2.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
    width: 100vw;
    top: 10vh;
    }
    
    #imageBgContainer div  {
    position: absolute;
    }
    
    #container5 {
    width: 50%;
    position: absolute;
    }
    
    #container5, h2 p {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    font-weight: bold;
    }
    
    #container5 h2 {
    text-transform: uppercase;
    }
    
    #imageGallery {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 150px;
    }
    
    #imageGallery div {
    width: 100%;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    }
    
    #imageGallery div img {
    width: 20%;
    height: auto;
    display: inline-block;
    padding: 6px;
    
    transition: all ease-in-out 1s;
    }
    
    #imageGallery div img:hover {
    cursor: pointer;
    }
    
    /* photos & events page */
    
    #container2PhotoPage h1, h2 {
    color: red;
    text-align: center;
    text-transform: capitalize;
    
    }
    
    #container2PhotoPage h2 {
    font-style: italic;
    padding-bottom: 20px;
    }
    .scroll {
    width: 100vw;
    display: flex;
    }
    
    .scroll {
    border-top: 2px solid red;
    border-bottom: 2px solid red;
    }
    .scroll div {
    display: flex;
    align-items: center;
    height: 20vh;
    width: 250vw;
    color: green;
    font-size: 4em;
    background: black;
    white-space: nowrap;
    font-weight: 900;
    text-transform: uppercase;
    animation: animate 35s linear infinite;
    }
    
    @keyframes animate {
    
    0%
    {
    transform: translateX(100vw);
    }
    100%
    {
    transform: translateX(-100%);
    }
    }
    
    .juggernaut1 {
    width: 16.5vw;
    padding: 0 20px;
    }
    
    .dj1 {
    animation: fade1 10s infinite;
    display: block;
    }
    
    .dj2 {
    animation: fade2 10s infinite;
    display: block;
    }
    
    .dj3 {
    
    animation: fade3 10s infinite;
    display: block;
    }
    
    @keyframes fade1 {
    0%{opacity: 1;}
    25%{opacity:  0;}
    50%{opacity:  0;}
    75%{opacity:  0;}
    100%{opacity:  1;}
    }
    
    @keyframes fade2 {
    0%{opacity: 0;}
    25%{opacity:  1;}
    50%{opacity: 0;}
    75%{opacity:  0;}
    100%{opacity:  0;}
    }
    
    @keyframes fade3 {
    0%{opacity: 0;}
    25%{opacity:  0;}
    50%{opacity: 1;}
    75%{opacity:  0;}
    100%{opacity:  0;}
    }
    
    #fadeImages {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    }
    
    #fadeImages div {
    width: 33%;
    position: relative;
    
    }
    
    #fadeImages div p {
    z-index: 9;
    background-color: rgba(0, 0, 0, .5);
    color: white;
    position: relative;
    top: 36px;
    text-align: center;
    font-size: 1.5em;
    }
    
    #fadeImages img {
    width: 33vw;
    top: 6vh;
    position: absolute;
    
    }
    
    :root {
      /* Set fade in duration */
      --fade-time: 0.5s;
    }
    
    body {
      margin: 20px;
      padding: 0;
    }
    
    .container {
      max-width: 450px;
      margin: 115vh auto 5vh auto;
      border: red solid 3px;
      background: black;
    }
    
    .main-img img,
    .imgs img {
      width: 100%;
    }
    
    .imgs {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 5px;
    }
    
    .imgs img {
      cursor: pointer;
    }
    
    /* Fade in animation */
    @keyframes fadeIn {
      to {
        opacity: 1;
      }
    }
    
    .fade-in {
      opacity: 0;
      animation: fadeIn var(--fade-time) ease-in 1 forwards;
    }
    
    /* Media Queries */
    @media(max-width: 600px) {
      .imgs {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    /* contact page */
    .header {
    background-color: black;
    width: 100%;
    }
    .greenText {
    color: green;
    text-align: center;
    text-transform: capitalize;
    }
    
    #contactPageBackgroundImageContaner {
    height: 130vh;
    width: 100vw;
    top: 10vh;
    position: relative;
    }
    
    #formContainer {
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: start;
    position: fixed;
    align-items: center;
    top: 50%;
    z-index: 3;
    }
    
    
    #contactPageOverlay {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    }
    #contactPageBackgroundImage {
    background-image: url("deepdiscopic.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    width: 100vw;
    
    }
    
    body {
    background-color: black;
    }
    
    /***contact page***/
    
    form {
    width: auto;
    height: auto;
    padding: 10px;
    background-color: rgba(0, 0, 0, .5);
    color: white;
    }
    
    form h1 {
    color: #A7DEEF;
    }
    
    form input {
    display: block;
    width: 100%;
    padding: 7px;
    color: white;
    background-color: rgba(0, 0, 0, .1);
    }
    
    form textarea {
    width: 100%;
    padding: 7px;
    color: white;
    background-color: rgba(0, 0, 0, .1);
    }
    
    form button {
    width: 100%;
    padding: 7px;
    background-color: rgba(167, 222, 239, .5);
    color: white;
    }
    
    form button:hover {
    cursor: pointer;
    background-color: rgb(167, 222, 239);
    }
    
    @media screen and (max-width: 800px) {
        .parent {
            width: 400px;
            height:400px;
            background-color: green;
        }
    }