style.scss

//********************
//*
//* VARIABLES
//*
//********************

$top-blank-space: 30px;
$content-width: 700px;
$widget-top-height: 40px;

$almost_white: #f7f7f7;
$light_grey: #efefef;
$dark_grey: #222;
$medium_grey: #e5e4e4;
$red: #ef003c;
$red2: #d2213e;
$blue: #29deff;
$dark_blue: #298cff;
$yellow: #fdef3f;
$green: #29ff63;

// Default Transitions values
$type: ease-in-out;
$duration: 500ms;

$bebas: Bebas, Helvetica, sans-serif;

$default-font-size: 15.5px;

//********************
//*
//* FONTS
//*
//********************

@font-face {
    font-family: 'Bebas';
    src: url('fonts/BebasNeue.otf');
    font-weight: normal;
    font-style: normal;
}

@mixin font-size($factor: 1) {
    font-size: $factor * $default-font-size;
    font-size: $factor rem;
}


//********************
//*
//* STYLING
//*
//********************

body {
background-color: $almost_white;
margin:0;
padding:0;

}

#branding {

margin:0;
padding:5px;
background: $red2; 
    
    #site-title {
        margin:0;
        padding-top:5px;
        @include font-size(6);
        line-height: 0.8em;
        color: $dark_grey;
        font-family:  $bebas;
        
        .valarmorghulis {color: $almost_white;}
    }
    
}


/* Advertise */

#advertise {
    
    margin:0;
    padding: 0;
    height: 350px;
    background: black url('img/eyes.png') no-repeat 80%;
    
        #site-description {
        margin: 0 0 0 3%;
            padding-top: 50px;
        @include font-size(3.5);
        font-family: $bebas;
        color: $red2;
        width: 75%;
            
            .speech {
                font-family: Helvetica;
                color: $medium_grey;
                font-weight: 100;
                @include font-size(2.5);
            }
}
    
}

/* Content Main */
#main {
margin:0 6em 0 6em;
    padding: 5px;
background-color:white;
    border-top: 2px solid $medium_grey; 
    border-bottom: 2px solid $medium_grey; 
}


/* Grid */
.grid {
-webkit-column-count:3; /* Chrome, Safari, Opera */
-moz-column-count:3; /* Firefox */
column-count:3; 

}

.grid li {
display:inline;
}

.grid .avatar {
}

.grid .info {
}

.grid .info .pseudo {
}

.grid .meta {
}

.grid .meta .followers {
}

/* Footer */

#site-info {
}

#site-info #legal {
}

/* Main Perso */

#perso {

margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;

background-color:green;

white-space: nowrap;
}

#perso > div {
white-space: nowrap;
display:inline-block;
}

#main-perso {

width:64%;

/*margin-top:10px;*/
margin-left:1%;
/*margin-right:10px;
margin-bottom:10px;

padding-top:50px;
padding-bottom:10px;
padding-right:50px;
padding-left:50px;
border-radius: 50px;*/

background-color:white;
}

/* Widgets */

#widgets {
width:34%;

background-color: red;
}

.widget {
}

.widget-title {
}

.widget-content {
}

#subscribers-number {
}

.widget .grid {
}

/* Videos */

.videos {
}

#archives-videos {
}

video {
width:320;
height:240; 
}