/* General body text */

body {  
    color:white;  
    font-size:1.2em;
    font-family: "Verdana", sans-serif;
    font-weight: bolder;
    background-color:rgba(54, 0, 75, 0.445)
}

p {
    font-weight: lighter;
}

/*NAVBAR*/
/* Add a black background color to the top navigation */
.topnav {
    background-color:rgba(12, 12, 12, 0.87);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    background-color:rgba(87, 32, 109, 0.425);
    margin: 5px;
    border-radius: 10px;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Add an active class to highlight the current page */
  .active {
    color: white;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }
  
  /* Dropdown container - needed to position the dropdown content */
  .dropdown {
    float: left;
    overflow: hidden;
    background-color:rgba(87, 32, 109, 0.26);
    border-radius: 10px;
    margin: 5px;
  }
  
  /* Style the dropdown button to fit inside the topnav */
  .dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  
  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    z-index: 1;
  }
  
  /* Style the links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a dark background on topnav links and the dropdown button on hover */
  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
  }
  
  /* Add a grey background to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }

    .topnav {
        flex-direction: column;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }

  
/* PAGE MAJOR DIVS AND HEADERS */

div.JavaHead {
    text-align: center;
    background-color: rgba(77, 0, 107, 0.459);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
}

div.PythonHead {
    text-align:center;
    background-color:rgba(56, 0, 78, 0.555);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
}

div.HomepageHead {
    background-image: url(final_images/CityBackground.jpeg); 
    background-repeat: no-repeat;  
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    margin-left: 0px;
    margin-right: 0px;
    opacity: 0.7;
}

div.TraditionalBackgroundHead {
    background-image: url(final_images/EyeStudyOne.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    margin-left: 0px;
    margin-right: 0px;
    opacity: 0.9;
}

div.DigitalArtBackground {
    background-image: url(final_images/UmbrellaOne.JPEG);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    margin-left: 0px;
    margin-right: 0px;
    opacity: 0.9;
}

div.CodingBackgroundHead {
    background-image: url(final_images/CodeHeader.jpeg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    margin-left: 0px;
    margin-right: 0px;
    opacity: 0.82;
}

div.TraditionalHeader, div.DigitalHeadText, div.FirstCodeHeader, div.AboutMeHeaderText {
    background-color:rgba(12, 12, 12, 0.911);
    background-attachment: fixed;
    background-size: cover;
    padding-top: 7em;
    text-align: center;
    margin-left: 0px;
    margin-right: 0px;
}

div.HeadText {
    background-color:rgba(12, 12, 12, 0.87);
    background-attachment:fixed;
    background-size: cover;
    padding-top: 7em;
    padding-left: 4em;
    padding-right: 4em;
    line-height: 160%;
    text-align: center;
    margin-left: 0px;
    margin-right: 0px;
    color: white;
}

/* block behind each body of text and images per 'section' */
div.CreativeSpace, div.COVID, div.Weathering, div.BlenderHead {
    margin-top: 2em;
    background-color: rgba(77, 0, 107, 0.329);
    padding-left: 4em;
    padding-right: 4em;
    padding-top: 1em;
    padding-bottom: 1em;
}

div.Robotics {
    margin-top: 2em;
    background-color: rgba(77, 0, 107, 0.459);
    border-radius: .5em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
    font-weight: lighter;
}

/* Homepage */

div.ArtSection {
    background-color: rgba(69, 0, 97, 0.363);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 2em;
    padding-bottom: 2em;
    color:white;
}

div.ArtHeadText, div.CodeHeadText {
    text-align: center;
    padding-left: 4em;
    padding-right: 4em;
    line-height: 160%;
}

div.CodingSection {
    background-color: rgba(44, 0, 61, 0.486);
    padding-top: 2em;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
}

/* Slide show one images */
img#DigitalSampleOne, img#SampleOne, img#SampleFour, img#DigitalSampleFour, img#SampleSix, img#DigitalSampleSeven { /*F*/
    height: 300px;
    margin-left: 30px;
    border-radius: .5em;
}

img#DigitalSampleTwo { /*SU*/
    height: 300px;
    margin-left: 75px;
    border-radius: .5em;
}

img#SampleTwo { /*HS*/
    height: 300px;
    margin-left: 118px;
    border-radius: .5em;
}

img#SampleThree {
    height: 300px;
    margin-left: 130px;
    border-radius: .5em;
}

img#DigitalSampleThree {
    height: 300px;
    margin-left: 200px;
    border-radius: .5em;
}

img#SampleFive {
    height: 300px;
    margin-left: 125px;
    border-radius: .5em;
}

img#DigitalSampleFive {
    height: 300px;
    margin-left: 185px;
    border-radius: .5em;
}

img#SampleSeven {
    height:300px;
    margin-left:270px;
    border-radius: .5em;
}

img#DigitalSampleSix {
    height: 300px;
    margin-left: 200px;
    border-radius: .5em;
}

/* SLIDESHOW ONE */

.slideshowContainerOne {
    max-width: 1100px;
    max-height: 400px;
    position: relative;
    margin: auto;
    background-color: rgba(88, 8, 119, 0.37);
    padding-left: 7.5em;
    padding-right: 7.5em;
    padding-top: 2em;
    padding-bottom: 2em;
    border-radius: .5em;
  }
  
  .SlideFade {
    display: none;
  }
  
  /* Next & previous buttons */
  .prev, .next, .prevTwo, .nextTwo {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: .5em;
    user-select: none;
  }
  
  .next, .nextTwo {
    right: 0;
    margin-right: 150px;
  }
  
  .prev:hover, .next:hover, .prevTwo:hover, .nextTwo:hover {
    background-color: rgba(77, 0, 107, 0.459);
  }
  
  .fade {
    animation-name: fade;
    animation-duration: 1s;
  }
  
  @keyframes fade {
    from {opacity: .3}
    to {opacity: 1}
  }

/* Slideshow 2 images */

img#CreativeSpaceSample {
    height: 300px;
    border-radius: .5em;
    margin-left: 50px;
}

img#CSampleTwo, img#ScatterProgress {
    height: 300px;
    border-radius: .5em;
    margin-left: 20px;
}

img#BlenderRender {
    height: 300px;
    border-radius: .5em;
    margin-left: 20px;
}

img#MountainAniSample {
    height: 300px;
    border-radius: .5em;
    margin-left: 190px;
}

/* Art Projects Page */

h1.TraditionalHeader, h1.DigitalHeadText {
    text-align: center;
}

/* Traditional Art Images */

.ZendayaContainer, img#Zendaya, .ArianaGrandeContainer, img#ArianaGrande, .SelenaContainer, img#SelenaGomez, .TaylorContainer, img#TaylorSwift, .DEContainer, img#DoubleExposure,
.MonkeyContainer, img#Monkeys, .EyeStudyContainer, img#EyeStudyOne, .EyeStudyTwoContainer, img#EyeStudyTwo, .BrownHSContainer, img#HairStudyTwo, .PinkHSContainer, img#HairStudyThree, 
.SmallHSContainer, img#HairStudyOne, .StrawberriesContainer, img#Strawberries, .LotusContainer, img#Lotus, .CupcakeContainer, img#Cupcake, 
.ButterflyContainer, img#Butterfly, .FrozenContainer, img#Frozen, .JellyfishContainer, img#Jellyfish, .PaintingOneContainer, img#PaintingOne, .PaintingTwoContainer, img#PaintingTwo, 
.PaintingThreeContainer, img#PaintingThree, .FogOneContainer, img#FogOne, .FogTwoContainer, img#FogTwo, .P1Container, img#P1, .P2Container, img#P2, .overlay,
.WaterfallContainer, img#Waterfall, .PandaContainer, img#Panda, .RainyNightContainer, img#RainyNight, .NightTramContainer, img#NightTram, .NightOutContainer,
img#NightOut, .ForestContainer, img#Forest, .SunriseContainer, img#Sunrise {
    position: relative;
    height: 300px;
    border-radius: .5em;
    margin: 1em;
}

div.Gallery {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-right: 1em;
    padding-left: 1em;
}

/* GRAY OVERLAY CSS */

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    width: auto;
    border-radius: .5em;
    opacity: 0;
    transition: .5s ease;
    background-color: #212425da;
}
  .ZendayaContainer:hover .overlay, .ArianaGrandeContainer:hover .overlay, .SelenaContainer:hover .overlay, .TaylorContainer:hover .overlay, .DEContainer:hover .overlay, 
  .MonkeyContainer:hover .overlay, .EyeStudyContainer:hover .overlay, .EyeStudyTwoContainer:hover .overlay, .BrownHSContainer:hover .overlay, .PinkHSContainer:hover .overlay, 
  .SmallHSContainer:hover .overlay, .StrawberriesContainer:hover .overlay, .LotusContainer:hover .overlay, .CupcakeContainer:hover .overlay,
  .ButterflyContainer:hover .overlay, .FrozenContainer:hover .overlay, .JellyfishContainer:hover .overlay, .PaintingOneContainer:hover .overlay, .PaintingTwoContainer:hover .overlay, 
  .PaintingThreeContainer:hover .overlay, .FogOneContainer:hover .overlay, .FogTwoContainer:hover .overlay, .P1Container:hover .overlay, .P2Container:hover .overlay, 
  .WaterfallContainer:hover .overlay, .PandaContainer:hover .overlay, .RainyNightContainer:hover .overlay, .NightTramContainer:hover .overlay,
  .NightOutContainer:hover .overlay, .ForestContainer:hover .overlay, .SunriseContainer:hover .overlay {
    opacity: .9;
  }
  
  /* caption overlay */
  .caption {
    color: white;
    font-size: 16px;
    font-weight: lighter;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

/* Digital Art Page */

div.DigitalGallery {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-right: 1em;
    padding-left: 1em;
}

.overlayOne {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 250px;
    width: auto;
    border-radius: .5em;
    opacity: 0;
    transition: .5s ease;
    background-color: #212425da;
    margin: 1em;
}

.BridgeContainer, img#Lake, .SunflowerContainer, img#Sunflower, .F1Container, img#ForestOne, .F2Container, img#ForestTwo, .U1Container, img#FallUmbrella,
.U2Container, img#SpringUmbrella{
    position: relative;
    height: 250px;
    width: auto;
    border-radius: .5em;
    margin: 1em;
} 

.BridgeContainer:hover .overlayOne, .SunflowerContainer:hover .overlayOne, .F1Container:hover .overlayOne, .F2Container:hover .overlayOne, 
.U1Container:hover .overlayOne, .U2Container:hover .overlayOne, .CityDrawingContainer:hover .overlayTwo, .MemoriesContainer:hover .overlayTwo,
.AquariumContainer:hover .overlayTwo, .WUContainer:hover .overlayThree, .ENBContainer:hover .overlayFour, .FIContainer:hover .overlayFour, 
.QuarkContainer:hover .overlayFour, .LogoContainer:hover .overlayFive, .ReadingContainer:hover .overlayTwo, .HxHContainer:hover .overlayTwo,
.MadnessContainer:hover .overlayTwo, .WU1Container:hover .overlayThree, .BannerContainer:hover .overlaySix, 
.SpiderManContainer:hover .overlaySeven{
    opacity: .9;
}

.CityDrawingContainer, img#CityDrawingOne, .MemoriesContainer, 
img#Memories, .AquariumContainer, img#Aquarium, .ReadingContainer, img#Reading, .overlayTwo {
    position: relative;
    height: 400px;
    border-radius: .5em;
    margin: 1em;
}

.HxHContainer, img#HxH, .MadnessContainer, img#Madness {
    position: relative;
    height: 400px;
    border-radius: .5em;
    margin: 1em;
}

.WUContainer, img#WeeklyUpdate, .overlayThree{
    position: relative;
    width: 1100px;
    border-radius: .5em;
    margin: 1em;
}

img#SpiderManDrawing, .SpiderManContainer {
    position: relative;
    width: 600px;
    border-radius: .5em;
    margin: 1em;
}

.WU1Container, img#WeeklyUpdateOne, .overlayThree, .BannerContainer, img#TeamBanner {
    position: relative;
    width: 1100px;
    border-radius: .5em;
    margin: 1em;
}

.overlayTwo {
    position: absolute;
    height: 400px;
    width: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: .5em;
    opacity: 0;
    transition: .5s ease;
    background-color: #212425da;
}
.overlayThree {
    position: absolute;
    width: 1100px;
    height:197px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: .5em;
    opacity: 0;
    transition: .5s ease;
    background-color: #212425da;
}

.overlayFour {
    position: absolute;
    width: auto;
    height:420px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: .5em;
    opacity: 0;
    transition: .5s ease;
    background-color: #212425da;
    margin: 1em;
}

.ENBContainer, img#ENB, .QuarkContainer, img#Quark, .FIContainer, img#FIRSTInitiative {
    position: relative;
    height: 420px;
    border-radius: .5em;
    margin: 1em;
}

.overlayFive {
    position: absolute;
    width: auto;
    height:300px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: .5em;
    opacity: 0;
    transition: .5s ease;
    background-color: #212425da;
    margin: 1em;
}

.overlaySix {
    position: absolute;
    width: 1100px;
    height:451px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: .5em;
    opacity: 0;
    transition: .5s ease;
    background-color: #212425da;
    margin: 1em;
}

.overlaySeven {
    position: absolute;
    width: 600px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: .5em;
    opacity: 0;
    transition: .5s ease;
    background-color: #212425da;
    margin: 1em;
}

.LogoContainer, img#Logo {
    position: relative;
    height: 300px;
    border-radius: .5em;
    margin: 1em;
}

/* Homepage Gallery Buttons */

button {
    font-size: 16px;
    font-family: inherit;
    color: rgba(77, 0, 107, 0.459);
    text-align: center;
    font-weight: lighter;
    border-radius: .5em;
    color: white;
    padding: 14px 16px;
    background-color: rgb(87, 32, 109);
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: rgba(17, 0, 26, 0.822); 
    cursor: pointer; 
}

/* Java and Python Images */
div.COVIDGraph, div.MountainReel {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    background-color:rgba(77, 0, 107, 0.459);
    padding-top: 1em;
    padding-bottom: 1em;
    padding-right: 1em;
    padding-left: 1em;
    border-radius: .5em;

}

img#DonutRender {
    margin: auto;
    border-radius: .5em;
    height: 600px;
    width: auto;
}

div.CreativeSpaceGallery {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-right: 1em;
    padding-left: 1em;
    border-radius: .5em;
}

.CSoverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 280px;
    width: auto;
    border-radius: .5em;
    opacity: 0;
    transition: .5s ease;
    background-color: #212425da;
    margin: 1em;
}

.CScaption {
    color: white;
    font-size: 16px;
    font-weight: lighter;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 23px;
  }

.DrawContainer, img#CSOne, .ShapesContainer, img#CSTwo, .ImageContainer, img#CSThree {
    position: relative;
    height: 280px;
    width: auto;
    border-radius: .5em;
    margin: 1em;
}

.DrawContainer:hover .CSoverlay, .ShapesContainer:hover .CSoverlay, .ImageContainer:hover .CSoverlay {
    opacity: .9;
}

img#Results {
    height: 300px;
    border-radius: .5em;
    margin: 1em;
}

img#Display, img#Ani {
    height: 400px;
    border-radius: .5em;
    margin: 1em;
}

/* footer */
footer {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color:rgba(34, 0, 48, 0.623);
    font-size: 1.2vw;
    font-family: sans-serif;
    flex: 1 1 auto;
}

div.footerButtons {
    font-size: 16px;
    font-family: inherit;
    color: rgba(77, 0, 107, 0.459);
    text-align: center;
    font-weight: lighter;
    border-radius: .5em;
    color: white;
    padding: 14px 16px;
    border: none;
    text-decoration: none;
}

button.FB {
    margin: .5em;
    cursor: pointer;
    text-decoration: none;
}

button.FB:hover {
    background-color: rgba(17, 0, 26, 0.822); 
}

div.flexible {
    flex-direction: row;
    padding: 2em;
    text-align: center;
    flex: 1 1 auto;
} 

.SocialBar {
    display: inline-flex;
    margin: 2em;
  }
  
.SocialsIcons .icon, .SocialIconTwo .icon {
    border-radius: 50%;
    margin-left: 20px;
    margin-right: 20px;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    cursor: pointer;
 }

img#github {
      border-radius: 50%;
      width: 60px;
      opacity:0.8;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      cursor: pointer;
}

img#instagram {
    border-radius: 50%;
    width: 90px;
    opacity: 0.7;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    cursor: pointer;

}

@media screen and (max-width: 1050px) {

    h1 {
        font-size: 16px;
    }

    h2, h3 {
        font-size: 14px;
    }

    p, p.strong {
        font-size: 12px;
    }

    div.container {
        margin: auto;
        width: fit-content;
        margin: auto;
    }
      
    /* Slide show one images */
    img#DigitalSampleOne, img#SampleFour { 
        height: 83px;
        margin: auto;
        border-radius: .5em;
    }

    img#DigitalSampleTwo { 
        height: 83px;
        margin: auto;
        border-radius: .5em;
    }

    img#SampleOne, img#SampleTwo { 
        height: 92px;
        margin: auto;
        border-radius: .5em;
    }

    img#SampleFour, img#SampleThree {
        height: 96px;
        margin-left: auto;
        border-radius: .5em;
    }

    img#DigitalSampleThree, img#DigitalSampleFour {
        height: 118px;
        margin-left: auto;
        border-radius: .5em;
    }

    img#SampleFive, img#SampleSix {
        height: 95px;
        margin-left: auto;
        border-radius: .5em;
    }

    img#DigitalSampleFive {
        height: 110px;
        margin-left: auto;
        border-radius: .5em;
    }

    img#SampleSeven {
        height:143px;
        margin-left:auto;
        border-radius: .5em;
    }

    img#DigitalSampleSix, img#DigitalSampleSeven {
        height: 112px;
        margin-left: auto;
        border-radius: .5em;
    }

    /* SLIDESHOW ONE */

    .slideshowContainerOne {
        max-width: 400px;
        max-height: 400px;
        position: relative;
        margin: auto;
        background-color: rgba(88, 8, 119, 0.37);
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-top: 1em;
        padding-bottom: 1em;
        border-radius: .5em;
    }
  
    .SlideFade {
        display: none;
    }
  
    /* Next & previous buttons */
    .prev, .next, .prevTwo, .nextTwo {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -14px;
        padding: 5px;
        color: white;
        font-weight: bold;
        font-size: 15px;
        transition: 0.6s ease;
        border-radius: .5em;
        user-select: none;
    }
  
    .next, .nextTwo {
        right: 0;
        margin-right: 0px;
    }

    .prev, .prevTwo {
         left: 0;
        margin-left: 0px;
    }

    /* Slideshow 2 images */

    img#CreativeSpaceSample {
        height: 79px;
        border-radius: .5em;
        margin-left: auto;
    }

    img#CSampleTwo, img#ScatterProgress {
        height: 79px;
        border-radius: .5em;
        margin-left: auto;
    }

    img#ScatterProgress {
        height: 107px;
        border-radius: .5em;
        margin-left: auto;
    }

    img#MountainAniSample {
        height: 107px;
        border-radius: .5em;
        margin-left: auto;
    }

    button {
        margin: 5px;
        font-size: 10px;
    }

    img#Results, img#Display, img#Ani {
        width: 200px;
        height: auto;
    }

    img#CSOne, img#CSTwo, img#CSThree {
        height: 200px;
    }

    .CSoverlay {
        display: none;
    }



}