#space-for-mobile{
    height: 200px;
    width: 50%;
    min-width: 600px;
    margin:auto;
    border: 2px solid red;
}
#topBanner{
    width: 32%;
    min-width: 380px;

    margin-top:1%;
}

#gif-panel{
    width: 200px;
    height: 200px;
    top: 7px;
    left: 94px;
    position: absolute;
}
.red-link {
  color: red;
  text-decoration: underline; /* optional for classic link styling */
}

#top-nav{
    margin-left:20px;
    margin-top: 60px;
    height: 40px;
    width: 60%;
    border: 2px solid rgba(255, 192, 203, 0);
    border-radius: 4px;
}
#nav-buttons{
    width: 100px;
    height: 30px;
    margin-top: 5px;
    margin-left: 5px;
    font-family: 'Courier New', monospace;
    color: black;
    text-align: center;
    border-color: rgb(116, 116, 116);
    display:inline-block;
}

#nav-box{
    width: 546px;
    height: 40px;
    top: 27px;
    left: 154px;
    
    position: absolute;
}

#new-main-div{
    width:850px;
    height: 800px;
    left: 50%;
    top: 120px;
     transform: translate(0%, -15%);
    margin: auto;
    background-image: url('images/crt.png');
    background-size: 108%;
    background-repeat: no-repeat;
    background-position: center;
    border: 4px solid rgba(0, 0, 0, 0);
    z-index: 200;
}
#screen{
    top: 101px;
    left: 143px;
    height: 400px;
    width: 545px;
    position: absolute;
    border: 10px solid black;
    border-radius: 5px;
    /*
    background-image: url('images/dbd_TV.gif');
    background-position: center;
    background-size: 100%;*/
}
#spotify-window{
    right: 5%;
    top: 10%;
    width: 228px;
    height: 400px;
    position: absolute;
}

/* Style The Dropdown Button */
.dropbtn {
    background-color: #ff6868;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin-top: 70px;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff6a3;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
    background-color: #ee6060;
  }
  /*
  .wordart {
    font-family: Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    position: relative;
    z-index: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
  }
  
  .wordart.rainbow {
    transform: scale(1, 1.5);
    -webkit-transform: scale(1, 1.5);
    -moz-transform: scale(1, 1.5);
    -o-transform: scale(1, 1.5);
    -ms-transform: scale(1, 1.5);
  }
  
  .wordart.rainbow .text {
    margin-left: 20px;
    background: red; 
    background: -webkit-linear-gradient(left, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af);
    background: -o-linear-gradient(left, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af);
    background: -moz-linear-gradient(left, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af);
    background: linear-gradient(to right, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af); 
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }*/
  .wordart {
    font-family: Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    position: relative;
    z-index: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .wordart.blues .text {
      font-family: Impact, sans-serif;
      color: #24c0fd;
      -webkit-text-stroke: 0.01em #0000aa;
      filter: progid:DXImageTransform.Microsoft.Glow(Color=#0000aa,Strength=1);
      text-shadow: 0.13em -0.13em 0px #0000aa;
      letter-spacing: -0.05em;
  }
  .wordart1 {
    font-family: Arial, sans-serif;
    font-size: 4em;
    font-weight: bold;
    position: relative;
    z-index: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .wordart1.italic-outline {
    transform: scale(1, 1.3);
    -webkit-transform: scale(1, 1.3);
    -moz-transform: scale(1, 1.3);
    -o-transform: scale(1, 1.3);
    -ms-transform: scale(1, 1.3);
}

.wordart1.italic-outline .text {
    letter-spacing: -0.01em;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-style: italic;
    color: #fff;
    -webkit-text-stroke: 0.01em #000;
    filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000, Strength=1);
    text-shadow: 0.03em 0.03em 0 #6D6D6D;
}

/*********  News Page **********/
#globe-gif-box{
    top: 0px;
    right: 0px;
    height: 75px;
    width: 75px;
    background-image: url('images/spinEarth.gif');
    background-position: center;
    background-size: 100%;
    position: absolute;
}
#news-scroll-box{
    height: 44px;
    width: 100%;
    bottom: 0px;
    position: absolute;
    /*
    font-family: "News Cycle";
    font-size: 20px;
    color: red;*/
    background-image: linear-gradient(white, silver, white);
    border-radius: 5px;
}
#breaking-box{
    top: 0px;
    height: 100%;
    min-width: 25%;
    background-image: linear-gradient(red, black, red);
    text-align: center;
    position: absolute;
    border-radius: 5px;
}
#breaking-box h1{
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 25px;
    padding-left: 5px;
    padding-right: 5px;
    color: rgb(255, 255, 255);
    line-height: 16px; 
}
#text-scroll-box{
    height: 100%;
    width: 73%;
    right: 0px;
    top: 0px;
    position: absolute;
}
#text-scroll-box h1{
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 21px;
    padding-left: 5px;
    padding-right: 5px;
    color: rgb(0, 0, 0);
    line-height: 16px;
    text-align: center; 
}

#news-page{
    top: 0px;
    left: 0px;
    height: 400px;
    width: 100%;
    position: absolute;
    background-image: linear-gradient(rgb(52, 52, 255), rgb(0, 50, 143));
    background-color: rgb(52, 52, 255);
}
#news-content{
    top: 0px;
    left: 0px;
    height: 400px;
    width: 100%;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    background-image: linear-gradient(rgb(52, 52, 255), rgb(0, 50, 143));
    background-color: rgb(52, 52, 255);
}
#news-content h1{
    font-family: 'Courier New', monospace;
    color: greenyellow;
    font-weight: bolder;
    font-size: 25px;
    padding-left: 5px;
    text-align: center;
}
#news-page h2{
    font-family: 'Courier New', monospace;
    color: rgb(255, 47, 47);
    font-weight: bolder;
    font-size: 15px;
    padding-left: 5px;
}
#news-page p{
    font-family: 'Courier New', monospace;
    color: greenyellow;
    font-weight: bolder;
    font-size: 15px;
    padding-left: 5px;
    padding-right: 5px;
}
#larry-pic{
    width: 150px;
    height: 150px;
    margin: 10px 10px 10px 10px;
    background-image: url('images/larConOrange.png');
    background-repeat: no-repeat;
    background-size: 100%;
    float: left;
}

#larry-horse-pic{
    width: 349px;
    height: 174px;
    margin: 10px 4px 1px 10px;
    background-image: url('images/larryCRT.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    float: left;
}
#checkpoint-flag{
    width: 150px;
    height: 150px;
    margin: 10px 4px 1px 10px;
    background-image: url('images/checkpointFlag.gif');
    background-repeat: no-repeat;
    background-size: 100%;
    float: left;
}
#larry-thumbs-up{
    width: 150px;
    height: 150px;
    margin: 10px 20px 1px 10px;
    background-image: url('images/larryThumbsUpSmile.png');
    background-repeat: no-repeat;
    background-size: 100%;
    float: left;
}
/* Parent container */
#hb-news-container {
    display: flex;
    justify-content: space-between; /* Even spacing between items */
    align-items: center;
    padding: 10px;
}

/* Image box */
#hb-news-pic {
    width: 150px;
    height: 150px;
    background-image: url('images/larryThumbsUpSmile.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0; /* Let flexbox handle spacing */
}

#domo-arigato{
    width: 150px;
    height: 40px;
    margin-left: 35%;
    margin-top: -7px;
    background-color: yellow;
    text-align: center;
    color: red;
    font-size: 16px;
    font-weight: bold;
}
/********* End News Page **********/
/********* About Page ************/
#about-page{
    visibility: hidden;
    top: 0px;
    left: 0px;
    height: 400px;
    width: 100%;
    background-image: linear-gradient(rgb(119, 167, 255), rgb(255, 255, 255),rgb(119, 167, 255));
    position: absolute;
}
#about-title{
    width: 100%;
    height: 128px;
    top: 0px;
    position: absolute;
    background-image: url('images/singleCloud.png');
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: -120px;
    background-size: 90%;
}
#about-title h1{
    font-family: 'Courier New', monospace;
    color: rgb(54, 54, 54);
    font-size: 25px;
    padding-left: 5px;
    padding-top: 20px;
    text-align: center;
}
#about-title h2{
    font-family: 'Courier New', monospace;
    color: rgb(54, 54, 54);
    font-size: 18px;
    padding-left: 5px;
    text-align: center;
}
#wave-gif{
    width: 99.5%;
    height: 136px;
    top: 145px;
    position: absolute;
    background-image: url('images/wave.gif');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
#logan-icon{
    width: 139px;
    height: 139px;
    top: 140px;
    left: 305px;
    background-image: url('images/logan.png');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(253, 253, 253, 0.534);
    position: absolute;
    border: 5px solid rgba(192, 192, 192, 0.507);
    border-radius: 20px;
}
#logan-label{
    width: 94px;
    height: 24px;
    bottom: 29px;
    left: 337px;
    position: absolute;
    background-image: linear-gradient(rgb(255, 202, 55), rgb(255, 166, 0));
    border: 1px solid rgb(77, 77, 77);
    font-family: "Times New Roman", serif;
    color: rgb(54, 54, 54);
    font-size: 13px;
    text-align: center;
}
#dbd-icon{
    width: 139px;
    height: 139px;
    top: 140px;
    left: 86px;
    background-image: url('images/elipticalDBD.png');
    background-color: rgba(253, 253, 253, 0.534);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    border:5px solid rgba(192, 192, 192, 0.438);
    border-radius: 20px;
    position: absolute;
}
#dbd-label{
    width: 94px;
    height: 24px;
    bottom: 29px;
    left: 109px;
    position: absolute;
    background-image: linear-gradient(rgb(255, 202, 55), rgb(255, 166, 0));
    border: 1px solid rgb(77, 77, 77);
    font-family: "Times New Roman", serif;
    color: rgb(54, 54, 54);
    font-size: 13px;
    text-align: center;
}
#pillar-1{
    width: 231px;
    height: 112px;
    bottom: 0px;
    left: 46px;
    position: absolute;

    background-image: url('images/pillar.png');
    background-position-x: center;
    background-size: 100%;
}
#pillar-2{
    width: 231px;
    height: 112px;
    bottom: 0px;
    left: 264px;
    position: absolute;
    background-image: url('images/pillar.png');
    background-position-x: center;
    background-size: 100%;
    transform: scaleX(-1);
}
#about-dbd{
    visibility: hidden;
    top: 0px;
    left: 0px;
    height: 400px;
    width: 100%;
    background-color: black;
    position: absolute;
}
#about-dbd-gif{
    position: relative;      /* or absolute if you prefer, see below */
    width: 40%;
    height: 40%;
    margin: 0 auto;          /* centers it horizontally */
    margin-top: 3%;
    background-image: url(images/iscoLogo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#about-dbd-body{
    top: 183px;
    width: 100%;
    height: 210px;
    background-image: linear-gradient(black, grey);
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
}
#about-dbd-body p{
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(255, 255, 255);
    font-size: 15px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 1.5;  
}
#about-dbd-return{
    top: 5px;
    width: 98px;
    height: 39px;
    left: 10px;
    position:absolute;
    background-color: rgba(255, 255, 255, 0);
    background-image: url('images/flame.gif');
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(255, 255, 255);
    font-size: 15px;
}
#about-logan{
    visibility: hidden;
    top: 0px;
    left: 0px;
    height: 400px;
    width: 100%;
    background-image: linear-gradient(rgba(94,177,215,255), rgba(60,158,153,255));
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
}
#resume-title{
    top: 10px;
    left: 0px;
    width: 250px;
    height: 88px;
    position: absolute;
}
#resume-title h1{
    font-family: "Raleway", sans-serif;
    font-weight: 500;
    font-size: 30px;
    color: #867782;
    margin: 0;
    padding-left: 5px;
}
#resume-title h2{
    font-family: "Raleway", sans-serif;
    font-weight:normal;
    font-size: 25px;
    color:#deaaa3;
    margin: 0;
    padding-left: 5px;
}
#resume-title h3{
    font-family: "Raleway", sans-serif;
    font-weight:lighter;
    font-size: 20px;
    color:#d2c0b6;
    margin: 0;
    padding-left: 5px;
}
#skills{
    top:  120px;
    left: 0px;
    width: 50%;
    height: 500px;
    position: absolute;
    
}
#skills h1{
    font-family: "Raleway", sans-serif;
    font-weight:lighter;
    font-size: 22px;
    color:#e0d79c;
    margin: 0.3;
    padding-left: 5px;
    display: inline-block;
}
#skills h2{
    font-family: "Raleway", sans-serif;
    font-weight:lighter;
    font-size: 15px;
    color:rgb(228, 228, 228);
    margin: 0;
    padding-left: 5px;
    display: inline-block;
}
#reef{
    height: 226px;
    width: 200%;
    padding-bottom: 0px;
}
#aquarium{
    display: inline-block;
    height: 100%;
    width: 33.33%;
    background-image: url('images/aquarium1.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%; 
}
#aquarium1{
    display: inline-block;
    height: 100%;
    width: 33.33%;
    background-image: url('images/aquarium1.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    transform: scaleX(-1);
    margin-left: -5px;
}
#aquarium2{
    display: inline-block;
    height: 100%;
    width: 33.33%;
    background-image: url('images/aquarium1.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left: -4px;
}
#logan-portrait{
    top: 34px;
    right: 37px;
    width: 111px;
    height: 111px;
    position: absolute;
    border-radius: 50%;
    background-image: url(images/loganMariner.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
#wheel-frame{
    top: -13px;
    right: -11px;
    width: 205px;
    height: 205px;
    position: absolute;
    background-image: url(images/wheelFrame.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
#back-bubbles{
    top: 194px;
    right: 10px;
    width: 230px;
    height: 497px;
    position: absolute;
    display: inline-block;
    background-image: url(images/bubbles.gif);
    background-position: center;
    background-size: 200%;
    background-color: #86778200;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0);
    font-family: 'Courier New', monospace;
    font-weight:lighter;
    font-size: 30px;
    color:#e0d79c;
}
#dolphinGif{
    top: 0px;
    left: -300px;
    width: 164px;
    height: 133px;
    background-image: url(images/dolphin.gif);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    z-index: 500;
}
/********* End About Page ************/
/********* Games Page ************/
#games-page{
    visibility: hidden;
    top: 0px;
    left: 0px;
    height: 400px;
    width: 545px;
    /*
    background-image: url('images/chromeBG.png');
    background-repeat: no repeat;
    background-position: center;
    background-size: 100%;*/


    background: repeating-linear-gradient(#38ff0000, #7c46ff 3px), 
    repeating-linear-gradient(0.18turn, #ff00d9, #00ff5a 3px);
   
    
    
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
}
#larry-title-box{
    width: 310px;
    height: 50px;
    margin:auto;
    margin-top: 15px;
    border: 2px solid #cfcfcf;
    background-image: linear-gradient(rgb(168, 168, 168),#d4d4d4, rgb(161, 161, 161) );
    border-radius: 50px
}
#title-coming-soon{
    width: 125px;
    height: 20px;
    margin-left: 24%;
    margin-top: 25px;
    margin-bottom: -17px;
    border: 2px solid #cfcfcf;
    background-color: #a5a5a5;
    border-radius: 50px
}
#title-web-port{
    width: 119px;
    height: 20px;
    margin-left: 53.5%;
    margin-top: -2px;
    border: 2px solid #cfcfcf;
    background-color: #a5a5a5;
    border-radius: 50px;
}
#games-page h1{
    font-family: 'Courier New', monospace;
    font-style: italic;
    font-weight: bold;
    color: rgb(255, 255, 255);
    text-shadow: 5px 5px 4px black;
    font-size: 25px;
    padding-left: 5px;
    text-align: center;
}
#larry-title-box h1{
    font-family: 'ArcadeClassic', sans-serif;
    font-style: italic;
    color: rgb(87, 87, 87);
    text-shadow: 1px 1px 2px black;
    font-size: 25px;
    text-align: center;
    line-height: 20px;
}
#title-coming-soon h1{
    font-family: 'ArcadeClassic', sans-serif;
    font-style: italic;
    color: rgb(195 94 247);
    text-shadow: 1px 1px 1px black;
    font-size: 17px;
    text-align: center;
    line-height: 0.5px;
}
#title-web-port h1{
    font-family: 'ArcadeClassic', sans-serif;
    font-style: italic;
    color: rgb(195 94 247);
    text-shadow: 1px 1px 1px black;
    font-size: 17px;
    text-align: center;
    line-height: 0.5px;
}
#games-page h3{
    font-family: 'Tangerine';
    font-size: 30px;
    color: rgb(0, 4, 255);
    animation: color-change 10s infinite;
    text-shadow: 2px 1px 1px black;
    text-align: center;
}

@keyframes color-change {
    0% { color: red;}
    25%{color: yellow;}
    50% { color: rgb(0, 255, 0);}
    75% {color: rgb(0, 225, 255);}
    100% {color: rgb(255, 0, 212); }
  }

#games-p-box{
    margin-top: 10px;
    margin-left: 10%;
    margin-right: 10%;
    
    border: 2px solid #cfcfcf;
    background-color: #a5a5a5b7;
    
    border-radius: 5px;
}
#games-p-box p{
    font-family: "Raleway", sans-serif;
    font-weight: lighter;
    color: rgb(249 255 154);
    text-shadow: 1px 1px 2px rgb(84 84 84);
    font-size: 16px;
    margin-left: 3%;
    margin-right: 3%;
    text-align: start;
}
#larry-trailer-box{
    width: 75%;
    height: 224px;
    margin-left: 9%;
    margin-top: 10px;
    border: 20px solid transparent;
    border-image: repeating-linear-gradient(30deg, #84a7ff, #c4ffbe, #ff94c6 20px) 60;
}
#music-vid-box{
    width: 75%;
    height: 224px;
    margin-left: 9%;
    margin-top: 10px;
    border: 20px solid transparent;
    border-image: repeating-linear-gradient(30deg, #84a7ff, #c4ffbe, #ff94c6 20px) 60;
}
#mainmenu-box{
    width: 75%;
    height: 221px;
    margin-left: 9%;
    margin-top: 10px;
    border: 20px solid transparent;
    border-image: repeating-linear-gradient(30deg, #84a7ff, #c4ffbe, #ff94c6 20px) 60;
    background-image: url('images/hillbomberDrawing.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}
#store-badges{
    width: 100%;
    height: 62px;
}
#play-store{
    width: 182px;
    height: 65px;
    margin-left: 10%;
    background-image: url(images/playStore.png);
    background-repeat: no-repeat;
    background-size: 125%;
    background-position: center;
    display: inline;
    background-color: #000;
    border-radius: 5px;
}
#app-store{
    width: 182px;
    height: 65px;
    margin-left: 10%;
    background-image: url(images/appStore.png);
    background-repeat: no-repeat;
    background-size: 110%;
    background-position: center;
    display: inline;
    background-color: #000;
    border-radius: 5px;
}
.LLLimg{
    padding: 50px;
    background-color: green;
    transition: transform .2s;
    width: 13px;
    height: 92px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin-left: 5.5%;
    border: 10px solid transparent;
    border-image: repeating-linear-gradient(30deg, #84a7ff, #c4ffbe, #ff94c6 20px) 60;
}
.LLLimg-ls{
    padding: 50px;
    background-color: green;
    transition: transform .2s;
    width: 149px;
    height: 39px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin-left: 24.5%;
    margin-bottom: 30px;
    margin-top: 30px;
    border: 10px solid transparent;
    border-image: repeating-linear-gradient(30deg, #84a7ff, #c4ffbe, #ff94c6 20px) 60;
}
.LLLimg:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }
  .LLLimg-ls:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }
/********* End Games Page ************/
#spacer2{
    top: 0px;
    left: 0px;
    width: 100%;
    height: 150px;
}
#spacer3{
    top: 0px;
    left: 0px;
    width: 100%;
    height: 10px;
}
#gif-player-code{
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgb(60, 77, 75);
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
}
#gif-player-code h1{
    font-family: "Raleway", sans-serif;
    font-weight:lighter;
    font-size: 50px;
    color:#dbffd8;
    margin: auto;
    padding-left: 15px;
}
#gif-player-code p{
    font-family: "Raleway", sans-serif;
    font-weight:lighter;
    font-size: 18px;
    color:#dbffd8;
    padding-left: 15px;
    padding-right: 5px;
}
#example-link-box{
    width: 200px;
    height: 50px;
    margin: 20px 10px 10px 20%;
}
#example-gif-box{
    width: 200px;
    height: 200px;
    margin: 5px 10px 10px 20%;
}
/********* New Code Page ************/
#code-page{
    visibility: hidden;
    top: 0px;
    left: 0px;
    height: 400px;
    width: 100%;

    background: repeating-linear-gradient(#38ff0000, #000000 6px), 
    repeating-linear-gradient(0.5turn, #000000, #00c106 3px);
}
#code-content{
    top: 0px;
    left: 0px;
    height: 400px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
#code-content h1{
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: rgb(0, 255, 4);
 
    font-size: 25px;
    padding-left: 15px;
    text-align: left;
    animation: opaque-change 1.5s infinite;
}
#code-content h2{
    font-family: 'Courier New', monospace;
    font-weight: bolder;
    color: rgb(0, 255, 4);
 
    font-size: 20px;
    padding-left: 15px;
    padding-bottom: 20px;
    text-align: left;
}
#code-content h3{
    font-family: 'Courier New', monospace;
    font-weight: lighter;
    color: rgb(0, 255, 4);
 
    font-size: 4.5px;
    padding-left: 15px;
    float: left;
}
@keyframes opaque-change {
    0% {color:  rgb(0, 255, 4);}
    50% {color:  rgb(0, 255, 4, 0);}
  }
  #code-content h4{
    font-family: 'Courier New', monospace;
    font-weight: lighter;
    color: rgb(0, 255, 0);
    font-size: 5px;
    float: left;
  }

  #code-content p{
    font-family: 'Courier New', monospace;
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: bolder;
    text-align: start;
    
    margin: 17px 32px 0px 23px;
    overflow-wrap: break-word;
    hyphens: manual;
  }
  /******************* END NEW CODE PAGE ********************/

  /****************** BEGIN CONTACT PAGE ********************/
  #contact-page{
    visibility: hidden;
    top: 0px;
    left: 0px;
    height: 400px;
    width: 100%;
    position: absolute;

    background-color: rgb(0, 0, 0);
}
#contact-content{
    top: 0px;
    left: 0px;
    height: 400px;
    width: 100%;
}
#contact-page h1{
    font-family: 'Courier New', monospace;
    font-style: italic;
    font-weight: bold;
    color: rgb(255 135 135);
    text-shadow: 1px 1px 1px rgb(255, 255, 255);
    font-size: 25px;
    padding-left: 5px;
    text-align: center;
}
#contact-page h3{
    font-family: 'Courier New', monospace;
    font-style: italic;
    font-weight: normal;
    color: rgb(0, 17, 255);
    font-size: 12px;
    padding-left: 5px;
    text-align: left;
    display: inline;
}

#form-box{
    margin-left: 10%;
    margin-top: 45px;
    height: 305px;
    width: 80%;
    
    background-color: rgb(168, 168, 168);
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 2px 2px rgb(88, 88, 88);
    border: 2px solid rgb(223, 223, 223);
}
#form-top{
    width: 99.6%;
    height: 22px;
    background-color: rgb(0, 0, 199);
    margin-top: 0px;
    border: 1px solid white;
    padding: 0px;
}
#form-top p{
    font-family: "Lucida Console", monospace;
    color: white;
    font-weight: bold;
    font-size: 12px;
    padding-left: 34px;
    top: 43px;
    position: absolute;

}
#ur-email{
 display: flex;
 width: 79.5%;
 margin-left: 10%;
}
#ur-name{
    margin-top: 1px;
    width: 79.5%;
    margin-left: 10%;
}
#message-box{
    margin-top: 2px;
    margin-left: 10%;
    height: 150px;
    width: 80%;
    display:flex;
}
#subject-box{
    width: 79.5%;
    margin-left: 10%;
}
#send-btn{
   
    margin-top: 3px;
    margin-left: 45%;
    background-color: #c0c0c0;
    border: 1px dashed black;
    color:#000000;
}
input { 
    text-align: left; 
}
#fake-toolbar{
    width: 99.6%;
    height: 20px;
    margin-top: 0px;
   
    font-family: "Lucida Console", monospace;
    color: rgb(0, 0, 0);
    font-size: 12px;
    line-height: 1px;
    
}

.video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }
  
  .video-wrapper iframe {
    width: 50vw;
    height: 75vh;
    border: none;
  }