html {
    overflow-x: hidden;
    overflow-y: hidden;
}

body {
    font-size: 20px;
    color: white;
    background-color: black;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    overflow: hidden;
}

#parent {
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    top: 9.9vh;
}

.grid {
    position: relative;
    width: 8.33vw;
    height: 8.33vw;
    box-shadow: 0.4px 0.4px 0 0 white;
    color: white;
    cursor: pointer;
    z-index: -10;
}

@media screen and (max-width: 1200px) {
    .grid {
        width: 10vw;
        height: 10vw;
    }
}

@media screen and (max-width: 992px) {
    .grid {
        width: 12.5vw;
        height: 12.5vw;
    }
}

@media screen and (max-width: 768px) {
    .grid {
        width: 20vw;
        height: 20vw;
    }
}

#button {
    position: relative;
    width: 8.33vw;
    height: 8.33vw;
    font-size: 1.5vw;
/*    box-shadow: 0.4px 0.4px 0 0 white;*/
    color: white;
    cursor: pointer;
    transition: transform 1s !important;
}


@media screen and (max-width: 1200px) {
    #button {
        width: 10vw;
        height: 10vw;
        font-size: 1.5vw;
    }
}

@media screen and (max-width: 992px) {
    #button {
        width: 12.5vw;
        height: 12.5vw;
        font-size: 2vw;
    }
}

@media screen and (max-width: 768px) {
    #button {
        width: 20vw;
        height: 20vw;
        font-size: 3vw;
    }
}


.transform-active {
    transform: scale(4, 4) !important;
    position: absolute !important;
    top: 50% !important;
    left: 46.9% !important;
    z-index: 10 !important;
    box-shadow: none !important;
    color: white !important;
}

@media screen and (max-width: 1200px) {
    .transform-active {
        transform: scale(3, 3);
        left: 45% !important;
    }
}

@media screen and (max-width: 992px) {
    .transform-active {
        left: 43.8% !important;
    }
}

@media screen and (max-width: 768px) {
    .transform-active {
        transform: scale(2, 2);
        left: 40% !important;
    }
}

#background {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index: 1;
    animation-name: backgroundOpacity;
    animation-duration: 1.5s;
}

@keyframes backgroundOpacity {
  from {opacity: 0;}
  to {opacity: 1;}
}

#reload {
    position: relative;
    width: fit-content;
    float: left;
    padding-left: 5vw;
    font: 1.5vw Arial, sans-serif;
    line-height: 10vh;
    text-align: center;
    margin-top: -0.1vh;
    color: white;
    background-color: black;
    cursor: pointer;
    z-index: 100;
}

@media (max-width: 1200px) {
    #reload {
        font-size: 20px;
    }
}

.about {
    position: relative;
    width: fit-content;
    float: left;
    height: 9.9vh;
/*    padding-left: 1vw;*/
    font: 2vw Arial, sans-serif;
    line-height: 9.9vh;
    cursor: pointer;
    color: white;
    background-color: black;
    z-index: 100;
}

@media (max-width: 1200px) {
    .about {
        font-size: 25px;
    }
}

@media (max-width: 768px) {
    .about {
        font-size: 20px;
    }
}

.about:hover {
    font-style: italic;
}

#content {
    display: none;
    position: fixed;
    width: 85vw;
    height: 100vh;
    padding-left: 15vw;
    right: 0vw;
    top: 0;
    padding-top: 9.8vh;
    background-color: black;
    cursor: auto;
    z-index: -1;
}

#index {
  position: relative;
  width: fit-content;
  float: left; 
  padding-left: 6vw;
  padding-right: 5vw;    
  height: 9.9vh;
  font: 2vw Arial, sans-serif;
  line-height: 9.9vh; 
  cursor: pointer;    
  color: white;
  z-index: 1000;
}

@media (max-width: 1200px) {
    #index {
        font-size: 25px;
    }
}

@media (max-width: 768px) {
    #index  {
        font-size: 20px;
    }
}

#index:hover {
  font-style: italic;   
}


p {
    margin: 0;
    padding-right: 25vw;
    font: 2vw Arial, sans-serif;
    line-height: 125%;
    hyphens: auto;
    color: white;
}

@media (max-width: 1200px) {
    p {
        font-size: 25px;
        padding-right: 10vw;
    }
}

@media (max-width: 768px) {
    p {
        padding-top: 0vh;
        font-size: 20px;
        padding-right: 5vw;
    }
}

#close {
    position: relative;
    padding-top: 20vh !important;
    padding-left: 70vw !important;
    color: white !important;
    cursor: pointer;
}

#close:after {
    content: '';
    height: 3.5vh;
    border-left: 3px solid white;
    position: absolute;
    left: 70vw;
    transform: rotate(45deg);
}

#close:before {
    content: '';
    height: 3.5vh;
    border-left: 3px solid white;
    position: absolute;
    left: 70vw;
    transform: rotate(-45deg);
}

#classList {
    font-family: Arial, sans-serif;
}

/*the classes*/

/*fontFamily*/
.class-1 {}

/*filter*/
.class-2 {}

/*transform*/
.class-3 {}

/*fontStyle*/
.class-4 {}

/*fontVariant*/
.class-5 {}

/*fontVariantCaps*/
.class-6 {}

/*fontWeight*/
.class-7 {}

/*letterSpacing*/
.class-8 {}

/*lineHeight*/
.class-9 {}

/*wordSpacing*/
.class-10 {}

/*textTransform*/
.class-11 {}

/*direction*/
.class-12 {}

/*hyphens*/
.class-13 {}

/*textAlign*/
.class-14 {}

/*textAlignLast*/
.class-15 {}

/*textIndent*/
.class-16 {}

/*TESTColor*/
.class-17 {}

/*textOverflow               overflow*/
/*.class-18 {}*/

/*unicodeBidi*/
/*
.class-19 {
    direction: rtl;
}
*/

/*writingMode*/
.class-18 {}