SaraSoueidan

/*
Animate.css - http://daneden.me/animate
LICENSED UNDER THE  MIT LICENSE (MIT)

Copyright (c) 2012 Dan Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

SaraSoueidan

body {
    background-color: black;
    background-image: -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40,from(rgba(150, 111, 195, 0.2)), color-stop(0.3, rgba(150, 111, 195, 0.3)),  to(transparent)),
        
        -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(224, 124, 203, 0.1)), color-stop(0.2, rgba(224, 124, 203, 0.2)), to(transparent)),
        
        -webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(224, 124, 203, 0.1)), color-stop(0.2, rgba(224, 124, 203, 0.2)), to(transparent)),        
        
        -webkit-gradient(radial, 50% 50%, 38, 50% 50%, 46, from(rgba(145, 75, 113, 0.3)), color-stop(0.3, rgba(145, 75, 113, 0.4)),  to(transparent)),
        

SaraSoueidan

//*Overlay behind lightbox, if you have shadows (work around FF bug 480888): */

.box{
    box-shadow: /* other shadows here */, 0 0 0 9999px rgba(0,0,0,.3);
}

/*Overlay behind lightbox in one simple line: */
.box{
    outline: 9999px solid rgba(0,0,0,.3);
}

SaraSoueidan

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

SaraSoueidan

.box{
    border:1px dashed white;
    box-shadow:0px 0px 0px 3px black;
}/*we created one border, the dashed one, and the illusion of a wider area by adding a slight
box shadow*/

SaraSoueidan

.drop-shadow {
    background: #9479fa;
}

.drop-shadow.top {
    box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4)
}

.drop-shadow.right {
    box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4)

SaraSoueidan

/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/

/* ==========================================================================
Base styles: opinionated defaults

SaraSoueidan

body{
    font-size:62.5%; /*to get base 10 and use ems or REMS more easily, biseer 1.4rem = 14px*/
    /*use REMS much easier and saves lots of calculations*/
    line-height:1.5; /*kind of standard and best-practice*/
}
h1,h2,h3,h4,h5,h6 {
    line-height:1.2;/*usually don't need as much line height space as paragraphs*/
}
sup,sub {
    line-height:0;/*always to prevent them from increasing the height of the line box*/

SaraSoueidan

#box{
display:inline-block;
/*don't specify width*/
}
#boxes-container{
column-count: 3;
}

SaraSoueidan

body:after {
    content: "less than 320px";
    font-size: 300%;
    font-weight: bold;
    position: fixed;
    bottom: 100px;
    width: 100%;
    text-align: center;
    background-color: hsla(1,60%,40%,0.4);
    color: #fff;