За проблем 2 css файла може да бъде оптимизиран значително. Ето как изглежда моят css файл за този проблем:

   @font-face{
   font-family: Animated;
   src: url("resources/Animated.ttf");
   }

   div{
   background-image: url("resources/TediHula.png"), url("resources/PetiaHula.png"), url("resources/VladoGHula.png"), url("resources/AlexHula.png"), url("resources/NakovHula.png"), url("resources/VladoKHula.png"), url("resources/HawaiiBackground.png"), 
   radial-gradient(ellipse farthest-corner at left top, #FDFFF2 10%, #FAFFB3 20%, #FfFFFf 30%, #3366FF 42%, #3366FF 67%, #3366FF 100%);
   background-repeat: no-repeat;
   background-position: 35% 95%, 28% 84%, 6% 85%, 76% 93%, 62% 82%, 100% 95%; 
   width: 900px;
   height: 600px;
   font: 25px Animated;  
   color:#ffcc33;
   }

   h1{
   position: absolute;
   top: 3px;
   left:450px;   
   }

За проблем 1 за box-shadow аз използвах следното: 

box-shadow: 0 0 0 5px #ffff33, 0 0 0 10px #009933, 0 0 0 15px #0033cc;

Като преди това задаваш на div-a рамка с червен цвят.С before както си тръгнал да го правиш е по трудно според мен. И писането е повече.